{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-table",
  "title": "Comparison Table",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/comparison-table/ComparisonTable.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, Minus } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\ntype Cycle = 'monthly' | 'yearly'\ntype Cell = boolean | string | number\n\ninterface Plan {\n  name: string\n  monthly: number\n  yearly: number\n  cta: string\n  popular?: boolean\n}\n\ninterface Feature {\n  label: string\n  cells: [Cell, Cell, Cell]\n}\n\ninterface Group {\n  label: string\n  features: Feature[]\n}\n\nconst plans: Plan[] = [\n  { name: 'Starter', monthly: 9, yearly: 7, cta: 'Start free' },\n  { name: 'Pro', monthly: 29, yearly: 24, cta: 'Start 14-day trial', popular: true },\n  { name: 'Enterprise', monthly: 79, yearly: 65, cta: 'Talk to sales' },\n]\n\nconst groups: Group[] = [\n  {\n    label: 'Core',\n    features: [\n      { label: 'Projects', cells: [3, 'Unlimited', 'Unlimited'] },\n      { label: 'Team seats', cells: ['5 seats', '20 seats', 'Custom'] },\n      { label: 'API access', cells: [false, true, true] },\n    ],\n  },\n  {\n    label: 'Collaboration',\n    features: [\n      { label: 'Shared workspaces', cells: [false, true, true] },\n      { label: 'Guest reviewers', cells: [false, '5 guests', 'Unlimited'] },\n      { label: 'Roles & permissions', cells: [true, true, true] },\n      { label: 'Audit log', cells: [false, false, true] },\n    ],\n  },\n  {\n    label: 'Support',\n    features: [\n      { label: 'Support channel', cells: ['Email', 'Priority email', 'Dedicated CSM'] },\n      { label: 'Guided onboarding', cells: [false, true, true] },\n      { label: 'Uptime SLA', cells: [false, false, '99.9%'] },\n    ],\n  },\n]\n\nexport function ComparisonTable() {\n  const [cycle, setCycle] = React.useState<Cycle>('monthly')\n\n  return (\n    <section data-slot=\"comparison-table\" className=\"bg-background w-full\">\n      <div className=\"mx-auto max-w-5xl px-6 py-16\">\n        <div className=\"mb-8 flex flex-col items-center gap-4 text-center\">\n          <h2 className=\"text-2xl font-semibold tracking-tight sm:text-3xl\">Compare plans</h2>\n          <ToggleGroup type=\"single\" value={cycle} onValueChange={(v) => v && setCycle(v as Cycle)}>\n            <ToggleGroupItem value=\"monthly\">Monthly</ToggleGroupItem>\n            <ToggleGroupItem value=\"yearly\">\n              Yearly\n              <Badge variant=\"secondary\" className=\"ml-2\">\n                −20%\n              </Badge>\n            </ToggleGroupItem>\n          </ToggleGroup>\n        </div>\n\n        <div className=\"overflow-x-auto rounded-lg border\">\n          <table className=\"w-full max-w-[640px] min-w-full border-separate border-spacing-0 text-sm\">\n            <caption className=\"sr-only\">Feature comparison across Starter, Pro, and Enterprise plans</caption>\n\n            <thead>\n              <tr>\n                <th\n                  scope=\"col\"\n                  className=\"bg-background/95 supports-[backdrop-filter]:bg-background/80 text-muted-foreground sticky top-0 left-0 z-10 w-1/4 border-b p-4 text-left font-medium backdrop-blur\"\n                >\n                  <span className=\"sr-only\">Feature</span>\n                </th>\n                {plans.map((plan) => (\n                  <th\n                    key={plan.name}\n                    scope=\"col\"\n                    className={`sticky top-0 z-10 border-b p-4 text-center align-bottom ${\n                      plan.popular\n                        ? 'bg-primary/10 supports-[backdrop-filter]:bg-primary/10 backdrop-blur'\n                        : 'bg-background/95 supports-[backdrop-filter]:bg-background/80 backdrop-blur'\n                    }`}\n                  >\n                    <div className=\"flex flex-col items-center gap-1.5\">\n                      {plan.popular && <Badge>Popular</Badge>}\n                      <span className=\"text-base font-semibold tracking-tight\">{plan.name}</span>\n                      <span className=\"tabular-nums\">\n                        <span className=\"text-2xl font-semibold\">\n                          ${cycle === 'monthly' ? plan.monthly : plan.yearly}\n                        </span>\n                        <span className=\"text-muted-foreground text-xs\"> /mo</span>\n                      </span>\n                      <Button size=\"sm\" variant={plan.popular ? 'default' : 'outline'} className=\"mt-1 w-full\">\n                        {plan.cta}\n                      </Button>\n                    </div>\n                  </th>\n                ))}\n              </tr>\n            </thead>\n\n            {groups.map((group) => (\n              <tbody key={group.label}>\n                <tr>\n                  <th\n                    colSpan={4}\n                    scope=\"colgroup\"\n                    className=\"bg-muted/50 text-muted-foreground border-b p-3 text-left text-xs font-semibold tracking-widest uppercase\"\n                  >\n                    {group.label}\n                  </th>\n                </tr>\n                {group.features.map((feature) => (\n                  <tr key={feature.label} className=\"hover:bg-muted/30\">\n                    <th scope=\"row\" className=\"border-b p-4 text-left align-middle font-normal\">\n                      {feature.label}\n                    </th>\n                    {feature.cells.map((cell, i) => (\n                      <td\n                        key={i}\n                        className={`border-b p-4 text-center align-middle ${plans[i].popular ? 'bg-primary/5' : ''}`}\n                      >\n                        {cell === true ? (\n                          <Check className=\"text-foreground mx-auto size-4\" aria-label=\"Included\" />\n                        ) : cell === false ? (\n                          <Minus className=\"text-muted-foreground/50 mx-auto size-4\" aria-label=\"Not included\" />\n                        ) : (\n                          <span className=\"text-xs font-medium\">{cell}</span>\n                        )}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            ))}\n          </table>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ComparisonTable.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/toggle-group.json"
  ],
  "description": "Plan comparison feature matrix (Starter / Pro / Enterprise) with a sticky header row, monthly/yearly ToggleGroup that flips prices live, grouped feature rows (Core / Collaboration / Support), and check / minus / short-value cells. The Pro column is highlighted with a \"Popular\" badge and a bg-primary/5 tint down the whole column.",
  "categories": [
    "marketing",
    "pricing"
  ]
}