{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-table",
  "type": "registry:ui",
  "title": "Comparison table",
  "description": "Plan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/comparison-table.tsx",
      "type": "registry:ui",
      "target": "components/ui/comparison-table.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon, MinusIcon } from \"lucide-react\"\n\n/** A feature-by-plan matrix: one row per feature, a check, a dash or a value per plan. */\ntype Plan = { name: string; values: (boolean | string)[] }\n\nconst SAMPLE_FEATURES: string[] = [\n  \"Invoices per month\",\n  \"Team seats\",\n  \"Multi-currency billing\",\n  \"Automated reminders\",\n  \"Custom domains\",\n  \"Audit log\",\n  \"API access\",\n  \"Priority support\",\n]\n\nconst SAMPLE_PLANS: Plan[] = [\n  { name: \"Starter\", values: [\"50\", \"2\", false, true, false, false, false, false] },\n  { name: \"Growth\", values: [\"500\", \"10\", true, true, true, false, true, false] },\n  { name: \"Scale\", values: [\"Unlimited\", \"Unlimited\", true, true, true, true, true, true] },\n]\n\ntype ComparisonTableProps = {\n  /** Row labels, in order. Each plan's `values` line up with them by index. */\n  features?: string[]\n  /** Columns. A boolean renders a check or a dash, a string renders as text. */\n  plans?: Plan[]\n  className?: string\n}\n\nfunction ComparisonTable({ features = SAMPLE_FEATURES, plans = SAMPLE_PLANS, className }: ComparisonTableProps) {\n  return (\n    <div data-slot=\"comparison-table\" className={cn(\"overflow-x-auto rounded-xl border border-border\", className)}>\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-border bg-sunken text-left\">\n            <th className=\"px-3 py-2 text-xs font-medium text-fg-muted\">Feature</th>\n            {plans.map((p) => <th key={p.name} className=\"px-3 py-2 text-xs font-medium text-fg\">{p.name}</th>)}\n          </tr>\n        </thead>\n        <tbody>\n          {features.map((f, i) => (\n            <tr key={f} className=\"border-b border-border last:border-b-0\">\n              <td className=\"px-3 py-2 text-fg-muted\">{f}</td>\n              {plans.map((p) => {\n                const v = p.values[i]\n                return <td key={p.name} className=\"px-3 py-2\">{typeof v === \"boolean\" ? (v ? <CheckIcon className=\"size-4 text-success\" aria-label=\"Included\" /> : <MinusIcon className=\"size-4 text-fg-subtle\" aria-label=\"Not included\" />) : v}</td>\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\nexport { ComparisonTable }\nexport type { ComparisonTableProps, Plan as ComparisonTablePlan }\n"
    }
  ]
}