{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-01",
  "title": "Pricing 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-01/Pricing01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, Sparkles } from 'lucide-vue-next'\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'\nconst cycle = ref<Cycle>('monthly')\n</script>\n\n<template>\n  <section class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-24\">\n      <div class=\"mb-10 text-center\">\n        <p class=\"text-primary text-sm font-medium tracking-widest uppercase\">Pricing</p>\n        <h2 class=\"mt-2 text-3xl font-semibold tracking-tight sm:text-4xl\">Plans for teams of every size</h2>\n        <p class=\"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 class=\"mt-6 inline-flex\">\n          <ToggleGroup type=\"single\" :model-value=\"cycle\" @update:model-value=\"(v) => v && (cycle = v as Cycle)\">\n            <ToggleGroupItem value=\"monthly\">Monthly</ToggleGroupItem>\n            <ToggleGroupItem value=\"yearly\">\n              Yearly\n              <Badge variant=\"secondary\" class=\"ml-2\">−20%</Badge>\n            </ToggleGroupItem>\n          </ToggleGroup>\n        </div>\n      </div>\n\n      <div class=\"grid gap-6 lg:grid-cols-3\">\n        <Card>\n          <CardHeader>\n            <CardTitle class=\"text-xl\">Starter</CardTitle>\n            <CardDescription>For small teams trying things out.</CardDescription>\n            <div class=\"mt-4 flex items-baseline gap-1\">\n              <span class=\"text-4xl font-semibold tracking-tight\"> ${{ cycle === 'monthly' ? 9 : 7 }} </span>\n              <span class=\"text-muted-foreground text-sm\">/ user / month</span>\n            </div>\n          </CardHeader>\n          <CardContent>\n            <ul class=\"space-y-3 text-sm\">\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Up to 10 employees</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Core HR + directory</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Time off + holidays</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Email support</span>\n              </li>\n            </ul>\n          </CardContent>\n          <CardFooter>\n            <Button class=\"w-full\" variant=\"outline\">Start free</Button>\n          </CardFooter>\n        </Card>\n\n        <div class=\"relative\">\n          <Badge class=\"absolute -top-3 left-1/2 z-10 -translate-x-1/2 gap-1 shadow-sm\">\n            <Sparkles class=\"size-3\" /> Most popular\n          </Badge>\n          <Card class=\"border-primary ring-primary/10 shadow-lg ring-1\">\n            <CardHeader>\n              <CardTitle class=\"text-xl\">Team</CardTitle>\n              <CardDescription>For growing companies scaling people ops.</CardDescription>\n              <div class=\"mt-4 flex items-baseline gap-1\">\n                <span class=\"text-4xl font-semibold tracking-tight\"> ${{ cycle === 'monthly' ? 29 : 24 }} </span>\n                <span class=\"text-muted-foreground text-sm\">/ user / month</span>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <ul class=\"space-y-3 text-sm\">\n                <li class=\"flex items-start gap-2\">\n                  <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Unlimited employees</span>\n                </li>\n                <li class=\"flex items-start gap-2\">\n                  <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Payroll + tax filing</span>\n                </li>\n                <li class=\"flex items-start gap-2\">\n                  <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Onboarding workflows</span>\n                </li>\n                <li class=\"flex items-start gap-2\">\n                  <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span>Performance reviews</span>\n                </li>\n                <li class=\"flex items-start gap-2\">\n                  <Check class=\"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 class=\"w-full\">Start 14-day trial</Button>\n            </CardFooter>\n          </Card>\n        </div>\n\n        <Card>\n          <CardHeader>\n            <CardTitle class=\"text-xl\">Enterprise</CardTitle>\n            <CardDescription>Custom controls for regulated industries.</CardDescription>\n            <div class=\"mt-4 flex items-baseline gap-1\">\n              <span class=\"text-3xl font-semibold tracking-tight\">Custom</span>\n            </div>\n          </CardHeader>\n          <CardContent>\n            <ul class=\"space-y-3 text-sm\">\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Everything in Team</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>SSO + SCIM provisioning</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Audit logs + role policies</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>Dedicated success manager</span>\n              </li>\n              <li class=\"flex items-start gap-2\">\n                <Check class=\"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 class=\"w-full\" variant=\"outline\">Talk to sales</Button>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Pricing01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}