{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-4",
  "title": "Annual Savings Toggle",
  "description": "Three tier pricing grid whose monthly or annual toggle also shows the yearly billed total under each price, with a Most Popular badge on the featured tier.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing/4/pricing-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst tiers = [\n  {\n    name: \"Starter\",\n    monthly: 0,\n    annual: 0,\n    description: \"For side projects and getting started.\",\n    features: [\"Up to 3 projects\", \"Community support\", \"1 GB storage\"],\n    cta: \"Get Started\",\n    featured: false,\n  },\n  {\n    name: \"Pro\",\n    monthly: 29,\n    annual: 24,\n    description: \"For growing teams that ship every day.\",\n    features: [\n      \"Unlimited projects\",\n      \"Priority support\",\n      \"50 GB storage\",\n      \"Advanced analytics\",\n    ],\n    cta: \"Start Free Trial\",\n    featured: true,\n  },\n  {\n    name: \"Enterprise\",\n    monthly: 99,\n    annual: 82,\n    description: \"For organizations with advanced needs.\",\n    features: [\n      \"Everything In Pro\",\n      \"Dedicated support\",\n      \"Unlimited storage\",\n      \"SSO and audit logs\",\n    ],\n    cta: \"Contact Sales\",\n    featured: false,\n  },\n]\n\nexport default function PricingBlock() {\n  const [annual, setAnnual] = useState(false)\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <Badge variant=\"outline\" className=\"gap-1.5\">\n            <IconPlaceholder\n              lucide=\"Sparkles\"\n              tabler=\"IconSparkles\"\n              hugeicons=\"SparklesIcon\"\n              phosphor=\"Sparkle\"\n              remixicon=\"RiSparklingFill\"\n              data-icon=\"inline-start\"\n              className=\"size-3.5 text-primary\"\n              aria-hidden=\"true\"\n            />\n            Acme plans\n          </Badge>\n          <h2 className=\"mt-4 font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Pricing that scales with you\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            Start for free, then upgrade when you&apos;re ready to grow. Save up\n            to 17% with annual billing.\n          </p>\n        </div>\n\n        <div className=\"mt-8 flex justify-center\">\n          <div\n            role=\"group\"\n            aria-label=\"Billing period\"\n            className=\"inline-flex items-center gap-1 rounded-lg border border-border bg-muted/50 p-1\"\n          >\n            <button\n              type=\"button\"\n              onClick={() => setAnnual(false)}\n              aria-pressed={!annual}\n              className={cn(\n                \"px-4 py-1.5 text-sm font-medium transition-colors\",\n                !annual\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={() => setAnnual(true)}\n              aria-pressed={annual}\n              className={cn(\n                \"flex items-center gap-2 px-4 py-1.5 text-sm font-medium transition-colors\",\n                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\">-17%</Badge>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3\">\n          {tiers.map((tier) => {\n            const price = annual ? tier.annual : tier.monthly\n            return (\n              <Card\n                key={tier.name}\n                className={cn(\n                  \"flex flex-col\",\n                  tier.featured && \"bg-muted/30 ring-2 ring-primary\"\n                )}\n              >\n                <CardHeader>\n                  <CardTitle className=\"text-base font-semibold\">\n                    {tier.name}\n                  </CardTitle>\n                  {tier.featured && (\n                    <CardAction>\n                      <Badge className=\"gap-1.5\">\n                        <IconPlaceholder\n                          lucide=\"Sparkles\"\n                          tabler=\"IconSparkles\"\n                          hugeicons=\"SparklesIcon\"\n                          phosphor=\"Sparkle\"\n                          remixicon=\"RiSparklingFill\"\n                          data-icon=\"inline-start\"\n                          className=\"size-3.5\"\n                          aria-hidden=\"true\"\n                        />\n                        Most popular\n                      </Badge>\n                    </CardAction>\n                  )}\n                  <CardDescription className=\"text-sm sm:min-h-10\">\n                    {tier.description}\n                  </CardDescription>\n                </CardHeader>\n                <CardContent className=\"flex flex-1 flex-col gap-6\">\n                  <div>\n                    <p className=\"flex items-baseline gap-1\">\n                      <span className=\"text-4xl font-bold tracking-tight text-foreground tabular-nums\">\n                        ${price}\n                      </span>\n                      <span className=\"text-sm text-muted-foreground\">\n                        /Month\n                      </span>\n                    </p>\n                    <p className=\"mt-1 h-5 text-xs text-muted-foreground\">\n                      {annual && price > 0\n                        ? `$${price * 12} billed yearly`\n                        : \" \"}\n                    </p>\n                  </div>\n                  <ul className=\"flex flex-1 flex-col gap-3 text-sm text-foreground\">\n                    {tier.features.map((feature) => (\n                      <li key={feature} className=\"flex items-center gap-2\">\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                <CardFooter>\n                  <Button\n                    nativeButton={false}\n                    variant={tier.featured ? \"default\" : \"outline\"}\n                    size=\"lg\"\n                    className=\"w-full\"\n                    render={<a href=\"#\" />}\n                  >\n                    {tier.cta}\n                  </Button>\n                </CardFooter>\n              </Card>\n            )\n          })}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/pricing-4.tsx"
    }
  ],
  "meta": {
    "height": "763px",
    "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"
}