{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-01",
  "title": "Pricing 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pricing-01/Pricing01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, Sparkles } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\ntype Cycle = 'monthly' | 'yearly'\n\nexport function Pricing01() {\n  const [cycle, setCycle] = React.useState<Cycle>('monthly')\n\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24\">\n        <div className=\"mb-10 text-center\">\n          <p className=\"text-primary text-sm font-medium tracking-widest uppercase\">Pricing</p>\n          <h2 className=\"mt-2 text-3xl font-semibold tracking-tight sm:text-4xl\">Plans for teams of every size</h2>\n          <p className=\"text-muted-foreground mx-auto mt-3 max-w-xl text-lg\">\n            No hidden fees. Cancel anytime. Save 20% with annual billing.\n          </p>\n\n          <div className=\"mt-6 inline-flex\">\n            <ToggleGroup\n              type=\"single\"\n              value={cycle}\n              onValueChange={(v) => v && setCycle(v as Cycle)}\n            >\n              <ToggleGroupItem value=\"monthly\">Monthly</ToggleGroupItem>\n              <ToggleGroupItem value=\"yearly\">\n                Yearly\n                <Badge variant=\"secondary\" className=\"ml-2\">−20%</Badge>\n              </ToggleGroupItem>\n            </ToggleGroup>\n          </div>\n        </div>\n\n        <div className=\"grid gap-6 lg:grid-cols-3\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-xl\">Starter</CardTitle>\n              <CardDescription>For small teams trying things out.</CardDescription>\n              <div className=\"mt-4 flex items-baseline gap-1\">\n                <span className=\"text-4xl font-semibold tracking-tight\">${cycle === 'monthly' ? 9 : 7}</span>\n                <span className=\"text-muted-foreground text-sm\">/ user / month</span>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <ul className=\"space-y-3 text-sm\">\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Up to 10 employees</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Core HR + directory</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Time off + holidays</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Email support</span>\n                </li>\n              </ul>\n            </CardContent>\n            <CardFooter>\n              <Button className=\"w-full\" variant=\"outline\">Start free</Button>\n            </CardFooter>\n          </Card>\n\n          <div className=\"relative\">\n            <Badge className=\"absolute -top-3 left-1/2 z-10 -translate-x-1/2 gap-1 shadow-sm\">\n              <Sparkles className=\"size-3\" /> Most popular\n            </Badge>\n            <Card className=\"border-primary ring-primary/10 shadow-lg ring-1\">\n              <CardHeader>\n                <CardTitle className=\"text-xl\">Team</CardTitle>\n                <CardDescription>For growing companies scaling people ops.</CardDescription>\n                <div className=\"mt-4 flex items-baseline gap-1\">\n                  <span className=\"text-4xl font-semibold tracking-tight\">${cycle === 'monthly' ? 29 : 24}</span>\n                  <span className=\"text-muted-foreground text-sm\">/ user / month</span>\n                </div>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-3 text-sm\">\n                  <li className=\"flex items-start gap-2\">\n                    <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Unlimited employees</span>\n                  </li>\n                  <li className=\"flex items-start gap-2\">\n                    <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Payroll + tax filing</span>\n                  </li>\n                  <li className=\"flex items-start gap-2\">\n                    <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Onboarding workflows</span>\n                  </li>\n                  <li className=\"flex items-start gap-2\">\n                    <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Performance reviews</span>\n                  </li>\n                  <li className=\"flex items-start gap-2\">\n                    <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Slack + priority support</span>\n                  </li>\n                </ul>\n              </CardContent>\n              <CardFooter>\n                <Button className=\"w-full\">Start 14-day trial</Button>\n              </CardFooter>\n            </Card>\n          </div>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-xl\">Enterprise</CardTitle>\n              <CardDescription>Custom controls for regulated industries.</CardDescription>\n              <div className=\"mt-4 flex items-baseline gap-1\">\n                <span className=\"text-3xl font-semibold tracking-tight\">Custom</span>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <ul className=\"space-y-3 text-sm\">\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Everything in Team</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>SSO + SCIM provisioning</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Audit logs + role policies</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Dedicated success manager</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <Check className=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>99.99% SLA</span>\n                </li>\n              </ul>\n            </CardContent>\n            <CardFooter>\n              <Button className=\"w-full\" variant=\"outline\">Talk to sales</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Pricing01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/toggle-group.json"
  ],
  "description": "Three-tier pricing table (Starter / Team / Enterprise) with a monthly/yearly ToggleGroup that flips prices live. Middle tier is highlighted with a ring + \"Most popular\" badge. Each tier spells out its bullet list inline so consumers can edit any line directly.",
  "categories": [
    "marketing"
  ]
}