{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-a-plan-1",
  "title": "Tiered Cards",
  "description": "Tiered Cards for Select a Plan.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "switch"
  ],
  "files": [
    {
      "path": "registry/intents/billing/select-a-plan/select-a-plan-1.tsx",
      "content": "'use client'\n\nimport { CheckIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Switch } from '@/components/ui/switch'\nimport { cn } from '@/lib/utils'\n\ntype Plan = {\n  name: string\n  blurb: string\n  monthly: number\n  features: string[]\n  featured?: boolean\n  cta: string\n}\n\nconst plans: Plan[] = [\n  {\n    name: 'Starter',\n    blurb: 'For side projects and trying things out.',\n    monthly: 0,\n    features: ['3 projects', 'Community support', '1 GB storage'],\n    cta: 'Get started',\n  },\n  {\n    name: 'Pro',\n    blurb: 'For professionals shipping real work.',\n    monthly: 29,\n    features: [\n      'Unlimited projects',\n      'Priority support',\n      '100 GB storage',\n      'Advanced analytics',\n    ],\n    featured: true,\n    cta: 'Upgrade to Pro',\n  },\n  {\n    name: 'Team',\n    blurb: 'For organizations that need control.',\n    monthly: 99,\n    features: ['Everything in Pro', 'SSO & SAML', 'Audit logs', 'SLA'],\n    cta: 'Contact sales',\n  },\n]\n\nfunction price(monthly: number, yearly: boolean) {\n  if (monthly === 0) return '$0'\n  return yearly ? `$${Math.round(monthly * 0.8)}` : `$${monthly}`\n}\n\nexport function SelectAPlan1() {\n  const [yearly, setYearly] = useState(true)\n\n  return (\n    <div className=\"flex w-full max-w-3xl flex-col items-center gap-6\">\n      <div className=\"flex items-center gap-3 text-sm\">\n        <span className={cn(!yearly && 'text-foreground font-medium')}>\n          Monthly\n        </span>\n        <Switch\n          checked={yearly}\n          onCheckedChange={setYearly}\n          aria-label=\"Toggle yearly billing\"\n        />\n        <span className={cn(yearly && 'text-foreground font-medium')}>\n          Yearly\n        </span>\n        <span className=\"bg-primary/10 text-primary rounded-full px-2 py-0.5 text-xs font-medium\">\n          Save 20%\n        </span>\n      </div>\n\n      <div className=\"grid w-full gap-4 sm:grid-cols-3\">\n        {plans.map((plan) => (\n          <Card\n            key={plan.name}\n            size=\"sm\"\n            className={cn(\n              'relative overflow-visible p-5',\n              plan.featured && 'border-primary ring-primary/20 ring-2',\n            )}\n          >\n            {plan.featured && (\n              <span className=\"bg-primary text-primary-foreground absolute -top-2.5 left-5 rounded-full px-2 py-0.5 text-[11px] font-medium\">\n                Most popular\n              </span>\n            )}\n            <div className=\"flex flex-col gap-1\">\n              <span className=\"text-sm font-semibold\">{plan.name}</span>\n              <span className=\"text-muted-foreground text-xs leading-snug\">\n                {plan.blurb}\n              </span>\n            </div>\n            <div className=\"flex items-baseline gap-1\">\n              <span className=\"text-2xl font-bold tracking-tight\">\n                {price(plan.monthly, yearly)}\n              </span>\n              {plan.monthly > 0 && (\n                <span className=\"text-muted-foreground text-xs\">/mo</span>\n              )}\n            </div>\n            <Button\n              size=\"sm\"\n              variant={plan.featured ? 'default' : 'outline'}\n              className=\"w-full\"\n            >\n              {plan.cta}\n            </Button>\n            <ul className=\"flex flex-col gap-2\">\n              {plan.features.map((feature) => (\n                <li\n                  key={feature}\n                  className=\"text-muted-foreground flex items-center gap-2 text-xs\"\n                >\n                  <CheckIcon className=\"text-primary size-3.5 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </Card>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/select-a-plan/select-a-plan-1.tsx"
    }
  ],
  "type": "registry:block"
}