{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-minimal",
  "type": "registry:block",
  "title": "Pricing — Minimal",
  "description": "Three-tier pricing with a monthly/yearly toggle, featured plan glow and checkmark feature lists.",
  "files": [
    {
      "path": "registry/blocks/pricing-minimal.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport interface Tier {\n  name: string;\n  monthly: number;\n  yearly: number;\n  description: string;\n  features: string[];\n  cta: string;\n  featured?: boolean;\n}\n\nconst defaultTiers: Tier[] = [\n  { name: \"Starter\", monthly: 0, yearly: 0, description: \"For side projects.\", features: [\"3 projects\", \"Community support\", \"Basic analytics\"], cta: \"Start free\" },\n  { name: \"Pro\", monthly: 24, yearly: 19, description: \"For growing products.\", features: [\"Unlimited projects\", \"Priority support\", \"Advanced analytics\", \"Custom domains\"], cta: \"Upgrade to Pro\", featured: true },\n  { name: \"Team\", monthly: 59, yearly: 49, description: \"For teams at scale.\", features: [\"Everything in Pro\", \"SSO and audit log\", \"Dedicated manager\"], cta: \"Contact sales\" },\n];\n\nexport function PricingMinimal({ tiers = defaultTiers }: { tiers?: Tier[] }) {\n  const [yearly, setYearly] = React.useState(true);\n\n  return (\n    <section className=\"bg-black px-6 py-20 text-zinc-100\">\n      <div className=\"mx-auto max-w-5xl text-center\">\n        <h2 className=\"text-4xl font-medium tracking-[-0.045em] sm:text-5xl\">\n          Simple, <span className=\"font-serif font-normal italic text-sky-300\">honest</span> pricing.\n        </h2>\n        <div className=\"mt-8 inline-flex rounded-full border border-white/15 p-[3px] text-[13px]\">\n          {[\"Monthly\", \"Yearly\"].map((label) => {\n            const on = (label === \"Yearly\") === yearly;\n            return (\n              <button\n                key={label}\n                onClick={() => setYearly(label === \"Yearly\")}\n                className={[\"rounded-full px-4 py-1.5 transition\", on ? \"bg-sky-300 font-medium text-sky-950\" : \"text-zinc-400\"].join(\" \")}\n              >\n                {label}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"mx-auto mt-12 grid max-w-5xl gap-4 md:grid-cols-3\">\n        {tiers.map((tier) => (\n          <div\n            key={tier.name}\n            className={[\n              \"flex flex-col rounded-2xl border p-6 text-left\",\n              tier.featured\n                ? \"border-sky-300/40 bg-zinc-950 shadow-[0_30px_80px_-30px_rgba(56,189,248,.35)]\"\n                : \"border-white/10\",\n            ].join(\" \")}\n          >\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-sm font-medium\">{tier.name}</span>\n              {tier.featured && (\n                <span className=\"rounded-full border border-sky-300/30 bg-sky-300/10 px-2 py-0.5 text-[11px] text-sky-300\">\n                  Popular\n                </span>\n              )}\n            </div>\n            <div className=\"mt-5 flex items-baseline gap-1\">\n              <span className=\"text-4xl font-medium tracking-[-0.04em]\">${yearly ? tier.yearly : tier.monthly}</span>\n              <span className=\"text-sm text-zinc-500\">/ mo</span>\n            </div>\n            <p className=\"mt-1.5 text-sm text-zinc-400\">{tier.description}</p>\n            <ul className=\"mt-6 flex-1 space-y-2.5 border-t border-white/10 pt-6 text-sm text-zinc-300\">\n              {tier.features.map((feature) => (\n                <li key={feature} className=\"flex items-center gap-2.5\">\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7dd3fc\" strokeWidth=\"2.5\">\n                    <path d=\"M5 12l5 5L20 7\" />\n                  </svg>\n                  {feature}\n                </li>\n              ))}\n            </ul>\n            <button\n              className={[\n                \"mt-8 h-10 rounded-full text-sm font-medium transition\",\n                tier.featured ? \"bg-sky-300 text-sky-950 hover:bg-sky-200\" : \"border border-white/15 hover:border-white/30\",\n              ].join(\" \")}\n            >\n              {tier.cta}\n            </button>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}\n"
    }
  ]
}