{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-16",
  "title": "Two-plan side-by-side",
  "description": "Free and Pro plans in two clean side-by-side cards, one highlighted — monthly-only, no toggle required.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/pricing/pricing-16.tsx",
      "content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype Plan = {\n  name: string\n  price: number\n  cadence: string\n  description: string\n  highlight?: boolean\n  cta: string\n  features: string[]\n}\n\nconst plans: Plan[] = [\n  {\n    name: \"Solo\",\n    price: 0,\n    cadence: \"free forever\",\n    description: \"Start with the free blocks, no account needed.\",\n    cta: \"Start free\",\n    features: [\n      \"All free blocks\",\n      \"Copy-paste install\",\n      \"Community support\",\n      \"MIT licensed\",\n    ],\n  },\n  {\n    name: \"Pro\",\n    price: 119,\n    cadence: \"one-time\",\n    description: \"Every block we've shipped and every block we'll ship next.\",\n    highlight: true,\n    cta: \"Get Pro access\",\n    features: [\n      \"All free blocks\",\n      \"All Pro blocks\",\n      \"Future blocks, forever\",\n      \"Commercial license\",\n      \"Priority support\",\n    ],\n  },\n]\n\nexport default function Pricing16() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-4xl px-6\">\n        <div className=\"mx-auto mb-12 max-w-lg text-center\">\n          <h2 className=\"text-balance font-semibold text-3xl tracking-tight sm:text-4xl\">\n            Two plans. No subscriptions.\n          </h2>\n          <p className=\"mt-3 text-pretty text-sm text-muted-foreground sm:text-base\">\n            Free gets you in the door. Pro gets you everything — once.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          {plans.map((plan) => (\n            <article\n              key={plan.name}\n              className={cn(\n                \"relative flex flex-col gap-7 rounded-2xl border border-border bg-card p-7\",\n                plan.highlight && \"border-foreground/20 ring-1 ring-foreground/10\"\n              )}\n            >\n              {plan.highlight && (\n                <span className=\"absolute -top-3 left-6 inline-flex items-center rounded-full bg-foreground px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-widest text-background\">\n                  Recommended\n                </span>\n              )}\n\n              <div className=\"flex flex-col gap-1.5\">\n                <h3 className=\"font-semibold text-xl tracking-tight\">\n                  {plan.name}\n                </h3>\n                <p className=\"text-sm text-muted-foreground\">\n                  {plan.description}\n                </p>\n              </div>\n\n              <div className=\"flex items-baseline gap-2 border-y border-border py-5\">\n                {plan.price === 0 ? (\n                  <span className=\"font-semibold text-4xl tracking-tight\">\n                    Free\n                  </span>\n                ) : (\n                  <>\n                    <span className=\"font-semibold text-4xl tracking-tight tabular-nums\">\n                      ${plan.price}\n                    </span>\n                    <span className=\"text-sm text-muted-foreground\">\n                      {plan.cadence}\n                    </span>\n                  </>\n                )}\n              </div>\n\n              <ul className=\"flex flex-col gap-2.5\">\n                {plan.features.map((feature) => (\n                  <li\n                    key={feature}\n                    className=\"flex items-start gap-2.5 text-sm text-foreground\"\n                  >\n                    <Check\n                      className=\"mt-0.5 size-3.5 shrink-0 text-foreground\"\n                      strokeWidth={2.5}\n                    />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n\n              <Button\n                size=\"lg\"\n                variant={plan.highlight ? \"default\" : \"outline\"}\n                className=\"mt-auto w-full rounded-lg\"\n              >\n                {plan.cta}\n                <ArrowRight />\n              </Button>\n            </article>\n          ))}\n        </div>\n\n        <p className=\"mt-6 text-center text-xs text-muted-foreground\">\n          All sales final. No refunds, no chargebacks.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/pricing-16.tsx"
    }
  ],
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}