{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-03",
  "title": "Pricing 03",
  "description": "Three-column pricing section with a tabbed billing toggle, feature lists with separators, and CTA buttons. Use it as an alternative pricing layout when you want to visually emphasize the most popular plan.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "tabs",
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "src/registry/blocks/pricing-03/pricing.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\ninterface Plan {\n  name: string;\n  prices: {\n    monthly: string;\n    yearly: string;\n  };\n  description: string;\n  features: string[];\n  popular?: boolean;\n  cta: { text: string; url: string };\n}\n\ninterface Pricing03Props {\n  title?: string;\n  description?: string;\n  plans?: Plan[];\n  className?: string;\n}\n\nconst Pricing03 = ({\n  title = \"Flexible Plans for Every Budget\",\n  description = \"Choose the plan that fits your needs. No hidden fees.\",\n  plans = [\n    {\n      name: \"Free\",\n      prices: { monthly: \"$0\", yearly: \"$0\" },\n      description: \"Great for personal projects and exploration.\",\n      features: [\"50+ components\", \"Community support\", \"Free updates\"],\n      cta: { text: \"Get Started\", url: \"#\" },\n    },\n    {\n      name: \"Pro\",\n      prices: { monthly: \"$12\", yearly: \"$99\" },\n      description: \"Perfect for professionals and small teams.\",\n      features: [\n        \"200+ components\",\n        \"Priority support\",\n        \"Premium templates\",\n        \"API access\",\n      ],\n      popular: true,\n      cta: { text: \"Start Free Trial\", url: \"#\" },\n    },\n    {\n      name: \"Enterprise\",\n      prices: { monthly: \"$49\", yearly: \"$399\" },\n      description: \"For large teams with custom needs.\",\n      features: [\n        \"Everything in Pro\",\n        \"Dedicated support\",\n        \"Custom components\",\n        \"SLA guarantee\",\n      ],\n      cta: { text: \"Contact Sales\", url: \"#\" },\n    },\n  ],\n  className,\n}: Pricing03Props) => {\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\n          <Tabs\n            value={isAnnual ? \"yearly\" : \"monthly\"}\n            onValueChange={(value) => setIsAnnual(value === \"yearly\")}\n          >\n            <TabsList className=\"border\">\n              <TabsTrigger\n                value=\"monthly\"\n                className=\"data-[state=active]:rounded-sm data-[state=active]:bg-primary data-[state=active]:text-primary-foreground\"\n              >\n                Monthly\n              </TabsTrigger>\n              <TabsTrigger\n                value=\"yearly\"\n                className=\"data-[state=active]:rounded-sm data-[state=active]:bg-primary data-[state=active]:text-primary-foreground\"\n              >\n                Annual\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </div>\n\n        <div className=\"mt-8 flex flex-col items-center justify-center gap-4 lg:flex-row lg:items-stretch\">\n          {plans.map((plan) => (\n            <Card\n              key={plan.name}\n              className={cn(\n                \"flex w-full max-w-sm flex-col gap-4 rounded-sm p-6 shadow-none lg:min-h-[450px]\",\n                plan.popular &&\n                  \"bg-primary text-primary-foreground dark:bg-foreground\",\n              )}\n            >\n              <div className=\"flex items-center justify-between\">\n                <h3 className=\"text-xl font-medium\">{plan.name}</h3>\n                {plan.popular && (\n                  <Badge variant=\"secondary\">Most Popular</Badge>\n                )}\n              </div>\n\n              <p className=\"text-4xl font-medium\">\n                {isAnnual ? plan.prices.yearly : plan.prices.monthly}\n                <span className=\"text-base font-normal opacity-80\">\n                  /{isAnnual ? \"year\" : \"month\"}\n                </span>\n              </p>\n\n              <p\n                className={cn(\n                  \"line-clamp-2 min-h-10 text-sm\",\n                  plan.popular ? \"opacity-80\" : \"text-muted-foreground\",\n                )}\n              >\n                {plan.description}\n              </p>\n\n              <Button\n                variant={plan.popular ? \"secondary\" : \"outline\"}\n                className=\"w-full\"\n                asChild\n              >\n                <a href={plan.cta.url}>{plan.cta.text}</a>\n              </Button>\n\n              <Separator\n                className={cn(plan.popular && \"bg-primary-foreground/20\")}\n              />\n\n              <p className=\"text-sm font-medium\">What&apos;s included:</p>\n\n              <ul className=\"flex flex-col gap-2\">\n                {plan.features.map((feature) => (\n                  <li key={feature} className=\"flex items-center gap-2 text-sm\">\n                    <Check className=\"size-4 shrink-0\" />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Pricing03;\n",
      "type": "registry:component",
      "target": "components/pricing-03.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/pricing-03.webp",
    "imageDark": "/r/previews/pricing-03-dark.webp",
    "prose": {
      "about": "Pricing 03 is a three-column pricing section with a tabbed billing toggle, per-plan feature lists with separator lines between groups, and clearly labeled CTA buttons. Built with shadcn/ui Tabs and Card components, it uses visual separators to organize feature lists by category rather than presenting a flat bullet list. The tab toggle updates all plan prices at once without a page reload.",
      "whenToUse": [
        "Products that want a more structured feature list presentation than a flat checkmark grid",
        "Pricing pages where features naturally group into categories like Core, Advanced, and Support",
        "SaaS products with a strong upsell narrative where feature grouping guides the upgrade decision",
        "Alternative to Pricing 01 when you want the same layout with stronger visual feature organization"
      ],
      "notes": "Use the separator lines to create two or three named feature categories per plan. Grouping features by value (what it does for the user) rather than by technical category converts better."
    }
  },
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}