{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-02",
  "title": "Pricing 02",
  "description": "Side-by-side pricing comparison table with feature rows and checkmark/cross indicators. Use it when your plans share many features and you want to make the differences crystal clear for potential buyers.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/pricing-02/pricing.tsx",
      "content": "import { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface Plan {\n  name: string;\n  price: string;\n  popular?: boolean;\n  cta?: { text: string; url: string };\n}\n\ninterface FeatureItem {\n  name: string;\n  values: (string | boolean)[];\n}\n\ninterface Pricing02Props {\n  title?: string;\n  description?: string;\n  plans?: Plan[];\n  features?: FeatureItem[];\n  className?: string;\n}\n\nconst Pricing02 = ({\n  title = \"Compare Plans\",\n  description = \"Choose the plan that fits your needs.\",\n  plans = [\n    { name: \"Basic\", price: \"$29\", cta: { text: \"Get Started\", url: \"#\" } },\n    { name: \"Standard\", price: \"$59\", cta: { text: \"Get Started\", url: \"#\" } },\n    {\n      name: \"Pro\",\n      price: \"$99\",\n      popular: true,\n      cta: { text: \"Get Started\", url: \"#\" },\n    },\n    {\n      name: \"Enterprise\",\n      price: \"$199\",\n      cta: { text: \"Contact Sales\", url: \"#\" },\n    },\n  ],\n  features = [\n    { name: \"Components\", values: [\"50+\", \"100+\", \"200+\", \"Unlimited\"] },\n    { name: \"Templates\", values: [\"5\", \"15\", \"50\", \"Unlimited\"] },\n    {\n      name: \"Support\",\n      values: [\"Community\", \"Email\", \"Priority\", \"Dedicated\"],\n    },\n    { name: \"Updates\", values: [true, true, true, true] },\n    { name: \"Custom branding\", values: [false, true, true, true] },\n    { name: \"API access\", values: [false, false, true, true] },\n  ],\n  className,\n}: Pricing02Props) => (\n  <section\n    className={cn(\"relative w-full overflow-hidden py-16 md:py-24\", className)}\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>\n\n      <div className=\"mt-12 overflow-x-auto\">\n        <table className=\"w-full min-w-[800px] border-collapse\">\n          <thead>\n            <tr>\n              <th className=\"p-4\" />\n              {plans.map((plan) => (\n                <th\n                  key={plan.name}\n                  className={cn(\n                    \"p-6 text-center\",\n                    plan.popular &&\n                      \"rounded-t-md bg-primary text-primary-foreground\",\n                  )}\n                >\n                  <div className=\"text-sm font-medium\">{plan.name}</div>\n                  <div className=\"text-3xl font-medium\">{plan.price}</div>\n                  <div className=\"text-sm opacity-80\">Per month</div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {features.map((feature) => (\n              <tr key={feature.name} className=\"border-b\">\n                <td className=\"p-4 font-medium\">{feature.name}</td>\n                {feature.values.map((value, j) => (\n                  <td\n                    key={j}\n                    className={cn(\n                      \"p-4 text-center\",\n                      plans[j]?.popular && \"bg-primary/5\",\n                    )}\n                  >\n                    {value === true ? (\n                      <Check className=\"mx-auto size-5\" />\n                    ) : value === false ? (\n                      <span className=\"text-muted-foreground\">-</span>\n                    ) : (\n                      value\n                    )}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            <tr>\n              <td className=\"p-4\" />\n              {plans.map((plan) => (\n                <td\n                  key={plan.name}\n                  className={cn(\n                    \"p-4 text-center\",\n                    plan.popular && \"rounded-b-md bg-primary/5\",\n                  )}\n                >\n                  <Button\n                    variant={plan.popular ? \"default\" : \"outline\"}\n                    className=\"w-full\"\n                    asChild\n                  >\n                    <a href={plan.cta?.url ?? \"#\"}>\n                      {plan.cta?.text ?? \"Get Started\"}\n                    </a>\n                  </Button>\n                </td>\n              ))}\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </section>\n);\n\nexport default Pricing02;\n",
      "type": "registry:component",
      "target": "components/pricing-02.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/pricing-02.webp",
    "imageDark": "/r/previews/pricing-02-dark.webp",
    "prose": {
      "about": "Pricing 02 is a side-by-side feature comparison table with plan columns and feature rows. Each cell shows a checkmark for included features and a cross or dash for excluded ones. Built with a responsive HTML table styled with Tailwind CSS and shadcn/ui design tokens, it makes plan differences immediately scannable. The table scrolls horizontally on mobile to preserve the full comparison layout.",
      "whenToUse": [
        "Products where plans share many features and users need to see exactly what they gain by upgrading",
        "Pricing pages that target technical buyers who evaluate features methodically before purchasing",
        "B2B SaaS with complex feature matrices where a card layout would be too long to compare visually",
        "Situations where a traditional three-column card pricing table has already been shown higher on the page"
      ],
      "notes": "Keep the feature list under 15 rows for mobile readability. Group features by category (core, advanced, support) and add a subtle separator row between groups to improve scannability."
    }
  },
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}