{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-01",
  "title": "Pricing 01",
  "description": "Three-column pricing table with a monthly/yearly billing toggle, a highlighted recommended plan, and feature lists. Use it on dedicated pricing pages to help users choose the right plan and increase conversion.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "switch",
    "separator"
  ],
  "files": [
    {
      "path": "src/registry/blocks/pricing-01/pricing.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { CircleCheck } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Separator } from \"@/components/ui/separator\";\n\ninterface Plan {\n  name: string;\n  prices: {\n    monthly: string;\n    yearly: string;\n  };\n  features: string[];\n  popular?: boolean;\n  cta: { text: string; url: string };\n}\n\ninterface Pricing01Props {\n  title?: string;\n  description?: string;\n  plans?: Plan[];\n  className?: string;\n}\n\nconst Pricing01 = ({\n  title = \"Simple, Transparent Pricing\",\n  description = \"Choose the plan that fits your needs. No hidden fees.\",\n  plans = [\n    {\n      name: \"Starter\",\n      prices: { monthly: \"$0\", yearly: \"$0\" },\n      features: [\n        \"All core components\",\n        \"Community support\",\n        \"Free updates\",\n        \"Free support\",\n      ],\n      cta: { text: \"Get Started\", url: \"#\" },\n    },\n    {\n      name: \"Pro\",\n      prices: { monthly: \"$49\", yearly: \"$490\" },\n      popular: true,\n      features: [\n        \"Everything in Starter\",\n        \"Premium components\",\n        \"Priority support\",\n        \"Early access\",\n        \"Pro support\",\n        \"Free updates\",\n        \"Community support\",\n      ],\n      cta: { text: \"Start Free Trial\", url: \"#\" },\n    },\n    {\n      name: \"Enterprise\",\n      prices: { monthly: \"$99\", yearly: \"$790\" },\n      features: [\n        \"Everything in Pro\",\n        \"Custom components\",\n        \"Dedicated support\",\n        \"SLA guarantee\",\n        \"Early access\",\n        \"Pro support\",\n        \"Free updates\",\n        \"Community support\",\n      ],\n      cta: { text: \"Contact Sales\", url: \"#\" },\n    },\n  ],\n  className,\n}: Pricing01Props) => {\n  const [isAnnual, setIsAnnual] = useState(false);\n\n  return (\n    <section\n      className={cn(\n        \"relative w-full overflow-hidden py-16 md:py-24\",\n        className,\n      )}\n    >\n      <div className=\"container mx-auto px-4\">\n        <div className=\"flex flex-col items-center gap-4 text-center\">\n          <h2 className=\"text-4xl font-medium tracking-tight md:text-5xl\">\n            {title}\n          </h2>\n          <p className=\"text-muted-foreground\">{description}</p>\n          <div className=\"flex items-center gap-4\">\n            <span\n              className={cn(\n                \"text-sm\",\n                !isAnnual ? \"font-semibold\" : \"text-muted-foreground\",\n              )}\n            >\n              Monthly\n            </span>\n            <Switch checked={isAnnual} onCheckedChange={setIsAnnual} />\n            <span\n              className={cn(\n                \"text-sm\",\n                isAnnual ? \"font-semibold\" : \"text-muted-foreground\",\n              )}\n            >\n              Yearly\n            </span>\n          </div>\n        </div>\n\n        <div className=\"lg: mt-12 flex flex-col items-center gap-8 lg:flex-row lg:items-stretch\">\n          {plans.map((plan) => (\n            <Card\n              key={plan.name}\n              className={cn(\n                \"relative flex w-full max-w-md flex-col\",\n                plan.popular ? \"border-2 border-foreground\" : \"\",\n              )}\n            >\n              {plan.popular && (\n                <div className=\"absolute -top-4 left-1/2 -translate-x-1/2\">\n                  <span className=\"rounded-full bg-foreground px-4 py-1.5 text-sm font-medium whitespace-nowrap text-background\">\n                    Most Popular\n                  </span>\n                </div>\n              )}\n\n              <CardHeader>\n                <h3 className=\"text-2xl font-medium\">{plan.name}</h3>\n                <div className=\"flex items-baseline gap-1\">\n                  <span className=\"text-5xl font-semibold\">\n                    {isAnnual ? plan.prices.yearly : plan.prices.monthly}\n                  </span>\n                  <span className=\"text-muted-foreground\">\n                    {isAnnual ? \"/year\" : \"/month\"}\n                  </span>\n                </div>\n              </CardHeader>\n\n              <CardContent className=\"flex flex-1 flex-col gap-4\">\n                <Separator />\n                <ul className=\"flex flex-1 flex-col gap-3\">\n                  {plan.features.map((feature) => (\n                    <li key={feature} className=\"flex items-center gap-4\">\n                      <CircleCheck className=\"size-4 shrink-0\" />\n                      <span>{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n              </CardContent>\n\n              <CardFooter>\n                <Button\n                  size=\"lg\"\n                  variant={plan.popular ? \"default\" : \"outline\"}\n                  className=\"w-full\"\n                  asChild\n                >\n                  <a href={plan.cta.url}>{plan.cta.text}</a>\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Pricing01;\n",
      "type": "registry:component",
      "target": "components/pricing-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/pricing-01.webp",
    "imageDark": "/r/previews/pricing-01-dark.webp",
    "prose": {
      "about": "Pricing 01 is a three-column pricing table with a monthly/yearly billing toggle, a visually highlighted recommended plan, and per-plan feature lists with checkmark indicators. Built with shadcn/ui Card, Badge, and Button components, it handles the toggle state client-side and updates all prices simultaneously. The highlighted plan uses a distinct border and background to draw the eye without requiring a custom design.",
      "whenToUse": [
        "SaaS products with two or three distinct pricing tiers targeting different customer segments",
        "Dedicated pricing pages where conversion is the primary goal of the entire page",
        "Products with a meaningful discount for annual billing that you want to surface clearly",
        "Situations where you want to guide users toward a specific plan without hiding the alternatives"
      ],
      "notes": "The yearly/monthly toggle is fully client-side — no server requests needed. Connect the CTA buttons to your Stripe Checkout session creation endpoint or payment link.",
      "faqs": [
        {
          "question": "Does the monthly/yearly toggle need a backend or state library?",
          "answer": "No. The toggle is local client-side React state — no server request, no global store. All prices update simultaneously when it's flipped."
        },
        {
          "question": "How do I connect the plan buttons to Stripe?",
          "answer": "Point each plan's CTA button at your Stripe Checkout session creation endpoint or a Stripe Payment Link. The block only renders the UI — it doesn't call Stripe itself."
        },
        {
          "question": "Can I use two tiers instead of three?",
          "answer": "Yes. The plans are passed as an array of props, so removing or adding a tier doesn't require touching the component's layout logic."
        }
      ]
    }
  },
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}