{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-01",
  "title": "Pricing 01",
  "description": "Three tactile pricing cards with revealed hover notes, clear feature lists, and a highlighted popular plan.",
  "type": "registry:block",
  "categories": [
    "pricing"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing-01/pricing-01.tsx",
      "target": "components/pricing-01.tsx",
      "type": "registry:component",
      "content": "import { ArrowUpRight, Check } from \"lucide-react\";\n\nconst plans = [\n  {\n    name: \"Starter\",\n    price: \"$0\",\n    cadence: \"/month\",\n    description:\n      \"For personal projects and early ideas that need a polished place to begin.\",\n    features: [\n      \"Up to 3 active projects\",\n      \"Core analytics\",\n      \"Community support\",\n      \"Unlimited collaborators\",\n    ],\n    hoverNote: \"Start building. No card needed.\",\n  },\n  {\n    name: \"Studio\",\n    price: \"$29\",\n    cadence: \"/month\",\n    description:\n      \"For small teams shipping client work and growing products every week.\",\n    features: [\n      \"Unlimited active projects\",\n      \"Advanced analytics\",\n      \"Priority email support\",\n      \"Custom domains\",\n    ],\n    hoverNote: \"Everything your team needs to move.\",\n    highlighted: true,\n  },\n  {\n    name: \"Scale\",\n    price: \"$99\",\n    cadence: \"/month\",\n    description:\n      \"For established teams that need more control, support, and room to grow.\",\n    features: [\n      \"Everything in Studio\",\n      \"Single sign-on\",\n      \"Dedicated onboarding\",\n      \"Custom usage limits\",\n    ],\n    hoverNote: \"More control, without more complexity.\",\n  },\n];\n\nexport function Pricing01() {\n  return (\n    <section className=\"bg-background px-4 py-20 text-foreground sm:px-6 lg:px-8 lg:py-28\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"grid gap-6 md:grid-cols-12 md:items-end\">\n          <div className=\"md:col-span-5\">\n            <p className=\"font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground\">\n              Pricing\n            </p>\n            <h2 className=\"mt-3 max-w-md text-3xl font-medium leading-tight tracking-[-0.04em] sm:text-4xl\">\n              A plan for every stage.\n            </h2>\n          </div>\n          <p className=\"max-w-md text-sm leading-6 text-muted-foreground md:col-span-5 md:col-start-8\">\n            Start for free, then move up when your work needs more room. Every\n            plan includes the essentials to ship something great.\n          </p>\n        </div>\n\n        <div className=\"mt-10 grid gap-3 lg:grid-cols-3\">\n          {plans.map((plan) => (\n            <a\n              key={plan.name}\n              href=\"#\"\n              className=\"group relative block min-h-full pt-10\"\n            >\n              <div className=\"pointer-events-none absolute inset-x-0 top-0 bottom-2 z-0 rounded-[1.35rem] bg-white/45 opacity-0 shadow-[0_0_0_1px_rgba(0,0,0,0.05),inset_0_18px_40px_-30px_rgba(0,0,0,0.28),inset_0_-18px_40px_-32px_rgba(0,0,0,0.24)] backdrop-blur-xl [transform:translate3d(0,14px,0)] transition-[opacity,transform] duration-150 ease-in will-change-[opacity,transform] group-hover:opacity-100 group-hover:[transform:translate3d(0,0,0)] group-hover:duration-500 group-hover:ease-out-strong motion-reduce:transform-none motion-reduce:transition-opacity motion-reduce:will-change-auto dark:bg-white/[0.055] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.07),inset_0_18px_40px_-30px_rgba(255,255,255,0.2),inset_0_-18px_40px_-32px_rgba(255,255,255,0.16)]\">\n                <p className=\"px-4 pt-3 text-center text-sm font-medium text-zinc-700 dark:text-zinc-100\">\n                  {plan.hoverNote}\n                </p>\n              </div>\n\n              <div\n                className={`relative z-10 flex min-h-[390px] flex-col overflow-hidden rounded-[1.35rem] bg-white p-5 text-left shadow-[0_0_0_1px_rgba(0,0,0,0.06),inset_0_8px_18px_-20px_color-mix(in_oklch,var(--foreground)_45%,transparent),inset_0_-8px_18px_-22px_color-mix(in_oklch,var(--foreground)_40%,transparent)] [transform:translate3d(0,0,0)] transition-[background-color,box-shadow,transform] duration-500 ease-out-strong will-change-transform group-hover:[transform:translate3d(0,-4px,0)] group-hover:bg-white group-hover:shadow-[0_0_0_1px_rgba(0,0,0,0.075),0_22px_60px_-42px_rgba(0,0,0,0.65),inset_0_8px_18px_-20px_color-mix(in_oklch,var(--foreground)_45%,transparent),inset_0_-8px_18px_-22px_color-mix(in_oklch,var(--foreground)_40%,transparent)] motion-reduce:transform-none motion-reduce:transition-colors motion-reduce:will-change-auto dark:bg-[#1a1a1a] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.085),inset_0_8px_18px_-20px_color-mix(in_oklch,var(--foreground)_45%,transparent),inset_0_-8px_18px_-22px_color-mix(in_oklch,var(--foreground)_40%,transparent)] dark:group-hover:bg-[#1a1a1a] dark:group-hover:shadow-[0_0_0_1px_rgba(255,255,255,0.105),0_22px_60px_-42px_rgba(0,0,0,0.9),inset_0_8px_18px_-20px_color-mix(in_oklch,var(--foreground)_45%,transparent),inset_0_-8px_18px_-22px_color-mix(in_oklch,var(--foreground)_40%,transparent)] sm:p-6 ${\n                  plan.highlighted\n                    ? \"shadow-[0_0_0_1px_rgba(0,0,0,0.085),0_18px_50px_-44px_rgba(0,0,0,0.65),inset_0_8px_18px_-20px_color-mix(in_oklch,var(--foreground)_45%,transparent),inset_0_-8px_18px_-22px_color-mix(in_oklch,var(--foreground)_40%,transparent)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.115),0_18px_50px_-44px_rgba(0,0,0,0.95),inset_0_8px_18px_-20px_color-mix(in_oklch,var(--foreground)_45%,transparent),inset_0_-8px_18px_-22px_color-mix(in_oklch,var(--foreground)_40%,transparent)]\"\n                    : \"\"\n                }`}\n              >\n                <div className=\"flex items-start justify-between gap-4\">\n                  <div>\n                    <p className=\"text-sm font-normal text-muted-foreground\">\n                      {plan.name}\n                    </p>\n                    <div className=\"mt-3 flex items-end gap-1\">\n                      <span className=\"text-[clamp(2.55rem,13vw,3rem)] font-medium leading-none tracking-[-0.06em] sm:text-5xl\">\n                        {plan.price}\n                      </span>\n                      <span className=\"pb-1 text-sm text-muted-foreground\">\n                        {plan.cadence}\n                      </span>\n                    </div>\n                  </div>\n\n                  {plan.highlighted && (\n                    <span className=\"rounded-full bg-foreground px-2.5 py-1 font-mono text-[10px] uppercase tracking-[0.14em] text-background shadow-[0_1px_1px_rgba(0,0,0,0.1),0_8px_20px_-12px_rgba(0,0,0,0.45)]\">\n                      Popular\n                    </span>\n                  )}\n                </div>\n\n                <p className=\"mt-5 text-sm leading-6 text-muted-foreground\">\n                  {plan.description}\n                </p>\n\n                <ul className=\"mt-8 space-y-3 pb-8\">\n                  {plan.features.map((feature) => (\n                    <li key={feature} className=\"flex gap-2 text-sm\">\n                      <Check className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\" />\n                      <span>{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n\n                <div className=\"mt-auto flex h-10 items-center justify-center gap-1.5 rounded-full bg-foreground text-sm font-medium text-background transition-opacity duration-300 ease-out group-hover:opacity-90\">\n                  Choose {plan.name}\n                  <ArrowUpRight className=\"size-3.5 [transform:translate3d(0,0,0)] transition-transform duration-300 ease-out group-hover:[transform:translate3d(2px,-2px,0)]\" />\n                </div>\n              </div>\n            </a>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "meta": {
    "createdAt": "2026-07-29",
    "iframeHeight": 850,
    "previewClassName": "min-h-[850px]"
  }
}