{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "plan-comparison",
  "type": "registry:ui",
  "title": "Plan comparison",
  "description": "A Free versus Pro comparison table with a row per feature and check or dash icons in each plan column. Shows what an upgrade unlocks on Tailwind pricing pages.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/plan-comparison.tsx",
      "type": "registry:ui",
      "target": "components/ui/plan-comparison.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon, MinusIcon } from \"lucide-react\"\n\nconst ROWS = [\n  { feature: \"Free UI primitives\", free: true, pro: true },\n  { feature: \"Gallery + docs\", free: true, pro: true },\n  { feature: \"Premium kinetic kits\", free: false, pro: true },\n  { feature: \"Client showcase\", free: false, pro: true },\n  { feature: \"Priority craft updates\", free: false, pro: true },\n]\n\nfunction PlanComparison({ className }: { className?: string }) {\n  return (\n    <div data-slot=\"plan-comparison\" className={cn(\"overflow-hidden rounded-2xl border border-border bg-surface shadow-highlight\", className)}>\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-border text-left\">\n            <th className=\"px-4 py-3 font-medium text-fg\">Feature</th>\n            <th className=\"px-4 py-3 font-medium text-fg\">Free</th>\n            <th className=\"px-4 py-3 font-medium text-fg\">Pro</th>\n          </tr>\n        </thead>\n        <tbody>\n          {ROWS.map((r) => (\n            <tr key={r.feature} className=\"border-b border-border last:border-b-0\">\n              <td className=\"px-4 py-2.5 text-fg-muted\">{r.feature}</td>\n              <td className=\"px-4 py-2.5\">{r.free ? <CheckIcon className=\"size-4 text-accent\" /> : <MinusIcon className=\"size-4 text-fg-subtle\" />}</td>\n              <td className=\"px-4 py-2.5\">{r.pro ? <CheckIcon className=\"size-4 text-accent\" /> : <MinusIcon className=\"size-4 text-fg-subtle\" />}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\nexport { PlanComparison }\n"
    }
  ]
}