{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-3",
  "title": "Single Plan Spotlight",
  "description": "Single plan pricing card centered on the page with a large price, billing toggle, eight item feature checklist, trial note, and social proof footnote.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing/3/pricing-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst PLAN = {\n  name: \"Acme Pro\",\n  tagline: \"Everything you need to ship faster.\",\n  monthly: 49,\n  annual: 39,\n  period: \"Per Seat / Month\",\n  trialNote: \"14-day free trial, no credit card required.\",\n  features: [\n    \"Unlimited projects and workspaces\",\n    \"Up to 25 team members\",\n    \"100 GB asset storage\",\n    \"Priority support with 4-hour SLA\",\n    \"Advanced analytics and reports\",\n    \"Custom domain and branding\",\n    \"SSO and role-based access control\",\n    \"Audit logs and compliance exports\",\n  ],\n  cta: \"Start Free Trial\",\n}\n\ntype Billing = \"monthly\" | \"annual\"\n\nexport default function PricingBlock() {\n  const [billing, setBilling] = React.useState<Billing>(\"monthly\")\n  const price = billing === \"annual\" ? PLAN.annual : PLAN.monthly\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"mx-auto flex w-full max-w-md flex-col items-center gap-8\">\n        <div className=\"flex flex-col items-center gap-2 text-center\">\n          <Badge variant=\"outline\" className=\"gap-1\">\n            <IconPlaceholder\n              lucide=\"ShieldCheck\"\n              tabler=\"IconShieldCheck\"\n              hugeicons=\"Shield01Icon\"\n              phosphor=\"ShieldCheck\"\n              remixicon=\"RiShieldCheckLine\"\n              className=\"size-3\"\n              aria-hidden=\"true\"\n            />\n            One plan. Full access.\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight\">\n            Simple, transparent pricing\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            No tiers, no surprises. One plan that gives your whole team\n            everything.\n          </p>\n        </div>\n\n        <Card className=\"w-full ring-primary\">\n          <CardHeader className=\"gap-4 pb-0\">\n            <div className=\"flex flex-col gap-1\">\n              <CardTitle className=\"text-base font-semibold\">\n                {PLAN.name}\n              </CardTitle>\n              <CardDescription>{PLAN.tagline}</CardDescription>\n            </div>\n\n            <div\n              role=\"group\"\n              aria-label=\"Billing period\"\n              className=\"flex w-full items-center gap-1 rounded-lg border border-border bg-muted/50 p-1\"\n            >\n              <button\n                type=\"button\"\n                onClick={() => setBilling(\"monthly\")}\n                aria-pressed={billing === \"monthly\"}\n                className={cn(\n                  \"flex-1 px-3 py-1.5 text-sm font-medium transition-colors\",\n                  billing === \"monthly\"\n                    ? \"bg-background text-foreground shadow-sm\"\n                    : \"text-muted-foreground hover:text-foreground\"\n                )}\n              >\n                Monthly\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setBilling(\"annual\")}\n                aria-pressed={billing === \"annual\"}\n                className={cn(\n                  \"flex flex-1 items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium transition-colors\",\n                  billing === \"annual\"\n                    ? \"bg-background text-foreground shadow-sm\"\n                    : \"text-muted-foreground hover:text-foreground\"\n                )}\n              >\n                Annual\n                <Badge className=\"px-1.5 text-[10px] font-semibold\">-20%</Badge>\n              </button>\n            </div>\n\n            <div className=\"flex items-baseline gap-1.5\">\n              <span className=\"text-5xl font-bold tracking-tight text-foreground\">\n                ${price}\n              </span>\n              <span className=\"text-sm text-muted-foreground\">\n                {PLAN.period}\n              </span>\n            </div>\n          </CardHeader>\n\n          <CardContent className=\"flex flex-col gap-5 pt-4\">\n            <Separator />\n\n            <ul className=\"flex flex-col gap-3\">\n              {PLAN.features.map((feature) => (\n                <li key={feature} className=\"flex items-center gap-2.5 text-sm\">\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"size-4 shrink-0 text-primary\"\n                    aria-hidden=\"true\"\n                  />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n\n          <CardFooter className=\"flex-col gap-3 border-t bg-muted/30\">\n            <Button\n              nativeButton={false}\n              size=\"lg\"\n              className=\"w-full\"\n              render={<a href=\"#\" />}\n            >\n              {PLAN.cta}\n              <IconPlaceholder\n                lucide=\"ArrowRight\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"ArrowRight\"\n                remixicon=\"RiArrowRightLine\"\n                data-icon=\"inline-end\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n            <p className=\"text-center text-xs text-muted-foreground\">\n              {PLAN.trialNote}\n            </p>\n          </CardFooter>\n        </Card>\n\n        <p className=\"text-center text-xs text-muted-foreground\">\n          Trusted by <span className=\"font-medium text-foreground\">2,400+</span>{\" \"}\n          teams worldwide. Cancel anytime.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/pricing-3.tsx"
    }
  ],
  "meta": {
    "height": "892px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}