{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-02",
  "title": "Three-tier comparison",
  "description": "Free, Pro and Team tiers side-by-side with feature checklists and a highlighted middle plan.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/pricing/pricing-02.tsx",
      "content": "import { ArrowRight, Check, Minus } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype Tier = {\n  name: string\n  description: string\n  price: string\n  cadence: string\n  highlight?: boolean\n  cta: string\n  features: { label: string; included: boolean }[]\n}\n\nconst tiers: Tier[] = [\n  {\n    name: \"Starter\",\n    description: \"Try a block, ship a side-project.\",\n    price: \"$0\",\n    cadence: \"free, forever\",\n    cta: \"Start free\",\n    features: [\n      { label: \"All free blocks\", included: true },\n      { label: \"Manual copy-paste install\", included: true },\n      { label: \"Community support\", included: true },\n      { label: \"Pro blocks\", included: false },\n      { label: \"Priority support\", included: false },\n      { label: \"Team workspace\", included: false },\n    ],\n  },\n  {\n    name: \"Solo\",\n    description: \"Everything you need to ship a real product.\",\n    price: \"$119\",\n    cadence: \"one-time\",\n    highlight: true,\n    cta: \"Get full access\",\n    features: [\n      { label: \"All free blocks\", included: true },\n      { label: \"All Pro blocks\", included: true },\n      { label: \"Future blocks, forever\", included: true },\n      { label: \"Commercial license\", included: true },\n      { label: \"Priority support\", included: true },\n      { label: \"Team workspace\", included: false },\n    ],\n  },\n  {\n    name: \"Team\",\n    description: \"Bring your whole crew along.\",\n    price: \"$349\",\n    cadence: \"one-time\",\n    cta: \"Get team access\",\n    features: [\n      { label: \"Everything in Solo\", included: true },\n      { label: \"Up to 10 teammates\", included: true },\n      { label: \"Team workspace\", included: true },\n      { label: \"Role-based access\", included: true },\n      { label: \"High-priority support\", included: true },\n      { label: \"Custom invoicing\", included: true },\n    ],\n  },\n]\n\nexport default function Pricing02() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"mx-auto mb-12 max-w-xl text-center\">\n          <span className=\"inline-flex items-center rounded-full border border-border bg-card/60 px-2.5 py-1 font-medium text-xs text-muted-foreground\">\n            Pricing\n          </span>\n          <h2 className=\"mt-4 text-balance font-semibold text-3xl tracking-tight sm:text-4xl\">\n            Pick a plan, never deal with a renewal email.\n          </h2>\n          <p className=\"mt-3 text-pretty text-sm text-muted-foreground sm:text-base\">\n            Three plans, one price each, no monthly anything.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n          {tiers.map((tier) => (\n            <article\n              key={tier.name}\n              className={cn(\n                \"relative flex flex-col gap-6 rounded-2xl border border-border bg-card p-6\",\n                tier.highlight && \"ring-2 ring-foreground/10\"\n              )}\n            >\n              {tier.highlight && (\n                <span className=\"absolute -top-3 left-6 inline-flex items-center rounded-full bg-foreground px-2.5 py-0.5 font-medium text-[10px] uppercase tracking-widest text-background\">\n                  Most picked\n                </span>\n              )}\n\n              <div className=\"flex flex-col gap-1.5\">\n                <h3 className=\"font-semibold text-lg tracking-tight\">\n                  {tier.name}\n                </h3>\n                <p className=\"text-sm text-muted-foreground\">\n                  {tier.description}\n                </p>\n              </div>\n\n              <div className=\"flex items-baseline gap-2\">\n                <span className=\"font-semibold text-4xl tracking-tight\">\n                  {tier.price}\n                </span>\n                <span className=\"text-xs text-muted-foreground\">\n                  {tier.cadence}\n                </span>\n              </div>\n\n              <Button\n                size=\"lg\"\n                variant={tier.highlight ? \"default\" : \"outline\"}\n                className=\"w-full rounded-lg\"\n              >\n                {tier.cta}\n                <ArrowRight />\n              </Button>\n\n              <ul className=\"flex flex-col gap-2 border-t border-border pt-5\">\n                {tier.features.map((feature) => (\n                  <li\n                    key={feature.label}\n                    className={cn(\n                      \"flex items-start gap-2 text-sm\",\n                      feature.included\n                        ? \"text-foreground\"\n                        : \"text-muted-foreground/70\"\n                    )}\n                  >\n                    {feature.included ? (\n                      <Check\n                        className=\"mt-0.5 size-3.5 shrink-0 text-foreground\"\n                        strokeWidth={2.5}\n                      />\n                    ) : (\n                      <Minus className=\"mt-0.5 size-3.5 shrink-0 text-muted-foreground/40\" />\n                    )}\n                    {feature.label}\n                  </li>\n                ))}\n              </ul>\n            </article>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/pricing-02.tsx"
    }
  ],
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}