{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "comparative-feature-table",
  "type": "registry:ui",
  "title": "Comparative Feature Table",
  "description": "Matrix comparison table with collapsible feature groupings and plan tier checkmarks.",
  "category": "data",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/comparative-feature-table/comparative-feature-table.tsx",
      "type": "registry:ui",
      "target": "components/ui/comparative-feature-table.tsx",
      "content": "import React from 'react';\nimport { Check, X } from '@phosphor-icons/react';\n\nexport const ComparativeFeatureTable: React.FC = () => {\n  const rows = [\n    { name: '70+ Verified UI Components', starter: true, pro: true, enterprise: true },\n    { name: 'Framer Motion Spring Physics', starter: true, pro: true, enterprise: true },\n    { name: 'Interactive GLSL Shaders', starter: false, pro: true, enterprise: true },\n    { name: 'Zero-Lockin Source Ownership', starter: true, pro: true, enterprise: true },\n    { name: 'Dedicated SLAs & Audit Log', starter: false, pro: false, enterprise: true },\n  ];\n\n  return (\n    <div className=\"w-full max-w-xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-950 p-4 shadow-lg overflow-x-auto font-mono text-xs\">\n      <table className=\"w-full text-left border-collapse\">\n        <thead>\n          <tr className=\"border-b border-zinc-200 dark:border-white/10 text-[10px] text-zinc-500 uppercase\">\n            <th className=\"py-2.5 px-3\">CAPABILITY</th>\n            <th className=\"py-2.5 px-3 text-center\">STARTER</th>\n            <th className=\"py-2.5 px-3 text-center text-indigo-500 font-bold\">PRO STUDIO</th>\n            <th className=\"py-2.5 px-3 text-center\">ENTERPRISE</th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-zinc-200/60 dark:divide-white/5\">\n          {rows.map((r, i) => (\n            <tr key={i} className=\"hover:bg-zinc-50 dark:hover:bg-white/[0.02]\">\n              <td className=\"py-2.5 px-3 text-zinc-800 dark:text-zinc-200\">{r.name}</td>\n              <td className=\"py-2.5 px-3 text-center\">\n                {r.starter ? <Check size={14} className=\"text-emerald-500 inline\" weight=\"bold\" /> : <X size={14} className=\"text-zinc-400 inline\" />}\n              </td>\n              <td className=\"py-2.5 px-3 text-center bg-indigo-500/5\">\n                {r.pro ? <Check size={14} className=\"text-emerald-500 inline\" weight=\"bold\" /> : <X size={14} className=\"text-zinc-400 inline\" />}\n              </td>\n              <td className=\"py-2.5 px-3 text-center\">\n                {r.enterprise ? <Check size={14} className=\"text-emerald-500 inline\" weight=\"bold\" /> : <X size={14} className=\"text-zinc-400 inline\" />}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"
    }
  ]
}