{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-comparison",
  "type": "registry:component",
  "title": "Feature comparison",
  "description": "A free versus premium comparison table with check, dash or text cells whose rows fade in on scroll. Pass an array of rows to compare plan features.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/feature-comparison.tsx",
      "type": "registry:ui",
      "target": "components/ui/feature-comparison.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { CheckIcon, MinusIcon } from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\n/** A free versus premium feature table whose rows fade in as they scroll into view, with a pair of plan buttons below. */\ntype Row = { feature: string; free: boolean | string; premium: boolean | string }\n\nconst SAMPLE_ROWS: Row[] = [\n  { feature: \"Invoices per month\", free: \"50\", premium: \"Unlimited\" },\n  { feature: \"Team seats\", free: \"2\", premium: \"Unlimited\" },\n  { feature: \"Multi-currency billing\", free: false, premium: true },\n  { feature: \"Automated payment reminders\", free: true, premium: true },\n  { feature: \"Custom invoice domains\", free: false, premium: true },\n  { feature: \"Audit log and SSO\", free: false, premium: true },\n  { feature: \"API access\", free: false, premium: true },\n  { feature: \"Support\", free: \"Community\", premium: \"Priority, 4h\" },\n]\n\ntype FeatureComparisonProps = {\n  /** One row per feature. A boolean renders a check or a dash, a string renders as text. */\n  rows?: Row[]\n  className?: string\n}\n\nfunction FeatureComparison({\n  rows = SAMPLE_ROWS,\n  className,\n}: FeatureComparisonProps) {\n  const reduce = useReducedMotion()\n  const cell = (v: boolean | string) => {\n    if (typeof v === \"string\") return <span className=\"text-sm text-fg\">{v}</span>\n    return v ? <CheckIcon className=\"size-4 text-success\" aria-label=\"Included\" /> : <MinusIcon className=\"size-4 text-fg-subtle\" aria-label=\"Not included\" />\n  }\n  return (\n    <div data-slot=\"feature-comparison\" data-tier=\"premium\" className={cn(\"overflow-hidden rounded-2xl border border-border\", className)}>\n      <div className=\"overflow-x-auto\">\n        <div className=\"min-w-[28rem]\">\n          <div className=\"grid grid-cols-3 border-b border-border bg-sunken px-3 py-3 text-[10px] font-medium tracking-[0.01em] text-fg-muted uppercase sm:px-4 sm:text-xs\">\n            <span>Feature</span>\n            <span className=\"text-center\">Free</span>\n            <span className=\"text-center text-accent\">Premium</span>\n          </div>\n          {rows.map((r, i) => (\n            <motion.div\n              key={r.feature}\n              initial={reduce ? false : { opacity: 0 }}\n              whileInView={{ opacity: 1 }}\n              viewport={{ once: true }}\n              transition={{ delay: i * 0.03 }}\n              className=\"grid grid-cols-3 items-center border-b border-border px-3 py-3 last:border-b-0 sm:px-4\"\n            >\n              <span className=\"pr-2 text-sm text-fg\">{r.feature}</span>\n              <span className=\"flex justify-center\">{cell(r.free)}</span>\n              <span className=\"flex justify-center\">{cell(r.premium)}</span>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2 bg-surface px-4 py-4 sm:flex-row sm:justify-end\">\n        <Button variant=\"outline\" className=\"w-full sm:w-auto\">Stay free</Button>\n        <Button className=\"w-full sm:w-auto\">Get started</Button>\n      </div>\n    </div>\n  )\n}\nexport { FeatureComparison }\nexport type { FeatureComparisonProps, Row as FeatureComparisonRow }\n"
    }
  ]
}