{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-flow",
  "type": "registry:ui",
  "title": "Pricing Flow",
  "description": "An interactive pricing flow with billing toggles and plan selection.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-flow.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { CheckIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\ntype PlanType = \"monthly\" | \"annually\";\n\nexport interface PLAN {\n  id: string;\n  title: string;\n  desc: string;\n  monthlyPrice: number;\n  annuallyPrice: number;\n  badge?: string;\n  buttonText: string;\n  features: string[];\n  link: string;\n}\n\ninterface PricingFlowProps {\n  plans?: PLAN[];\n  defaultBillPlan?: PlanType;\n}\n\nexport const DEFAULT_PLANS: PLAN[] = [\n  {\n    id: \"starter\",\n    title: \"Starter\",\n    desc: \"Ideal for developers and indie hackers building with Ruixen UI for personal or small commercial projects.\",\n    monthlyPrice: 29,\n    annuallyPrice: 306,\n    buttonText: \"Get Starter Access\",\n    features: [\n      \"Access to 50+ UI components\",\n      \"Tailwind-compatible styling\",\n      \"Basic theming support\",\n      \"Starter templates (blog, dashboard)\",\n      \"1 project license\",\n      \"Community support\",\n      \"Early access to updates\",\n    ],\n    link: \"#\",\n  },\n  {\n    id: \"pro\",\n    title: \"Pro\",\n    desc: \"Designed for teams and startups who need advanced UI components, theme customization, and premium support.\",\n    monthlyPrice: 79,\n    annuallyPrice: 834,\n    badge: \"Best Value\",\n    buttonText: \"Upgrade to Pro\",\n    features: [\n      \"Access to 100+ production-grade components\",\n      \"Advanced theming & dark mode\",\n      \"Code snippets & layout presets\",\n      \"Figma design system access\",\n      \"Commercial use for up to 10 projects\",\n      \"Priority GitHub issue support\",\n      \"Team collaboration tools\",\n    ],\n    link: \"#\",\n  },\n];\n\nexport default function PricingFlow({\n  plans = DEFAULT_PLANS,\n  defaultBillPlan = \"monthly\",\n}: PricingFlowProps) {\n  const [billPlan, setBillPlan] = useState<PlanType>(defaultBillPlan);\n\n  const handleSwitch = () => {\n    setBillPlan((prev) => (prev === \"monthly\" ? \"annually\" : \"monthly\"));\n  };\n\n  return (\n    <div className=\"relative flex flex-col items-center justify-center max-w-5xl py-20 mx-auto space-y-12\">\n      {/* Header */}\n      <div className=\"flex flex-col items-center text-center max-w-2xl mx-auto space-y-4\">\n        <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold\">Pricing</h2>\n        <p className=\"text-base md:text-lg text-accent-foreground/80\">\n          Streamline your creative process with AI. Generate, manage, and\n          publish content — all in one place.\n        </p>\n\n        {/* Billing Toggle */}\n        <div className=\"flex items-center justify-center space-x-4 mt-4\">\n          <span className=\"text-base font-medium\">Monthly</span>\n          <button\n            onClick={handleSwitch}\n            className=\"relative rounded-full focus:outline-none\"\n          >\n            <div className=\"w-12 h-6 transition rounded-full shadow-md bg-blue-500\"></div>\n            <div\n              className={cn(\n                \"absolute inline-flex items-center justify-center w-4 h-4 transition-all duration-500 ease-in-out top-1 left-1 rounded-full bg-white\",\n                billPlan === \"annually\" ? \"translate-x-6\" : \"translate-x-0\",\n              )}\n            />\n          </button>\n          <span className=\"text-base font-medium\">Annually</span>\n        </div>\n      </div>\n\n      {/* Plans Grid */}\n      <div className=\"grid w-full grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 max-w-4xl mx-auto\">\n        {plans.map((plan) => (\n          <PlanCard key={plan.id} plan={plan} billPlan={billPlan} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst PlanCard = ({ plan, billPlan }: { plan: PLAN; billPlan: PlanType }) => {\n  const price = billPlan === \"monthly\" ? plan.monthlyPrice : plan.annuallyPrice;\n  const suffix = billPlan === \"monthly\" ? \"/mo\" : \"/yr\";\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col relative rounded-2xl lg:rounded-3xl bg-background border border-foreground/10 overflow-hidden\",\n        plan.badge ? \"border-blue-500\" : \"\",\n      )}\n    >\n      {/* Badge Glow */}\n      {plan.badge && (\n        <div className=\"absolute top-1/2 inset-x-0 mx-auto h-12 -rotate-45 w-full bg-blue-600 rounded-2xl lg:rounded-3xl blur-[8rem] -z-10\"></div>\n      )}\n\n      {/* Header */}\n      <div className=\"p-6 md:p-8 flex flex-col items-start w-full\">\n        <h2 className=\"font-medium text-xl text-foreground\">{plan.title}</h2>\n        <h3 className=\"mt-3 text-2xl font-bold md:text-5xl\">\n          <AnimatePresence mode=\"wait\">\n            <motion.span\n              key={price}\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n            >\n              ${price}\n              {suffix}\n            </motion.span>\n          </AnimatePresence>\n        </h3>\n        <p className=\"text-sm md:text-base text-muted-foreground mt-2\">\n          {plan.desc}\n        </p>\n      </div>\n\n      {/* Button & Billing */}\n      <div className=\"flex flex-col items-start w-full px-6 pb-4\">\n        <Button size=\"lg\" className=\"w-full\">\n          <a href={plan.link}>{plan.buttonText}</a>\n        </Button>\n        <div className=\"h-8 overflow-hidden w-full mt-3\">\n          <AnimatePresence mode=\"wait\">\n            <motion.span\n              key={billPlan}\n              initial={{ y: 20, opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              exit={{ y: -20, opacity: 0 }}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n              className=\"text-sm text-muted-foreground block text-center w-full\"\n            >\n              {billPlan === \"monthly\" ? \"Billed monthly\" : \"Billed annually\"}\n            </motion.span>\n          </AnimatePresence>\n        </div>\n      </div>\n\n      {/* Features */}\n      <div className=\"flex flex-col items-start w-full px-6 py-4 gap-y-2\">\n        <span className=\"text-base text-left mb-2\">Includes:</span>\n        {plan.features.map((feature, idx) => (\n          <div key={idx} className=\"flex items-center gap-2\">\n            <CheckIcon className=\"w-4 h-4 text-green-500\" />\n            <span>{feature}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-flow.tsx"
    }
  ]
}