{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-04",
  "title": "Inline pricing pills",
  "description": "Three compact tiers arranged in a single horizontal card — perfect for a marketing site footer band.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/pricing/pricing-04.tsx",
      "content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype Pill = {\n  name: string\n  price: number\n  highlight?: boolean\n  bullets: string[]\n}\n\nconst pills: Pill[] = [\n  {\n    name: \"Solo\",\n    price: 49,\n    bullets: [\"1 project\", \"Email support\"],\n  },\n  {\n    name: \"Studio\",\n    price: 119,\n    highlight: true,\n    bullets: [\"Unlimited projects\", \"Priority support\", \"10 teammates\"],\n  },\n  {\n    name: \"Agency\",\n    price: 349,\n    bullets: [\"Client projects\", \"Onboarding call\"],\n  },\n]\n\nexport default function Pricing04() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-5xl px-6\">\n        <div className=\"mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end\">\n          <div className=\"flex flex-col gap-2\">\n            <span className=\"font-medium text-xs uppercase tracking-widest text-muted-foreground\">\n              Plans\n            </span>\n            <h2 className=\"text-balance font-semibold text-3xl tracking-tight sm:text-4xl\">\n              Three sizes. One catalog.\n            </h2>\n          </div>\n          <p className=\"max-w-sm text-sm text-muted-foreground sm:text-right\">\n            Pay once. Use the blocks on any project, side-hustle or client\n            site for as long as the URLs still resolve.\n          </p>\n        </div>\n\n        <div className=\"rounded-3xl border border-border bg-card\">\n          <div className=\"grid divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0\">\n            {pills.map((pill) => (\n              <article\n                key={pill.name}\n                className={cn(\n                  \"relative flex flex-col gap-5 p-7\",\n                  pill.highlight && \"bg-muted/40\"\n                )}\n              >\n                {pill.highlight && (\n                  <span className=\"absolute -top-3 left-7 inline-flex items-center gap-1 rounded-full bg-foreground px-2 py-0.5 font-medium text-[10px] uppercase tracking-widest text-background\">\n                    <span className=\"size-1.5 rounded-full bg-emerald-400\" />\n                    Best value\n                  </span>\n                )}\n\n                <div className=\"flex items-baseline justify-between\">\n                  <h3 className=\"font-semibold text-base tracking-tight\">\n                    {pill.name}\n                  </h3>\n                  <div className=\"flex items-baseline gap-1\">\n                    <span className=\"font-semibold text-3xl tracking-tight\">\n                      ${pill.price}\n                    </span>\n                    <span className=\"text-xs text-muted-foreground\">once</span>\n                  </div>\n                </div>\n\n                <ul className=\"flex flex-col gap-1.5\">\n                  {pill.bullets.map((bullet) => (\n                    <li\n                      key={bullet}\n                      className=\"flex items-center gap-2 text-sm text-muted-foreground\"\n                    >\n                      <Check\n                        className=\"size-3.5 text-foreground/70\"\n                        strokeWidth={2.5}\n                      />\n                      {bullet}\n                    </li>\n                  ))}\n                </ul>\n\n                <Button\n                  size=\"sm\"\n                  variant={pill.highlight ? \"default\" : \"outline\"}\n                  className=\"mt-auto w-fit rounded-full\"\n                >\n                  Choose {pill.name}\n                  <ArrowRight />\n                </Button>\n              </article>\n            ))}\n          </div>\n        </div>\n\n        <p className=\"mt-6 text-center text-xs text-muted-foreground\">\n          All sales final. No refunds, no chargebacks, no surprises.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/pricing-04.tsx"
    }
  ],
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}