{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-grid",
  "title": "Feature grid",
  "description": "3–6 short blocks · `columns` 2/3",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/feature-grid.tsx",
      "content": "import type { LucideIcon } from 'lucide-react';\nimport { cn } from 'cn';\n\nexport type Feature = { icon: LucideIcon; title: string; description: string };\n\ntype Props = {\n  features: Feature[];\n  /** 2 for detail, 3 for a scan (default). */\n  columns?: 2 | 3;\n  className?: string;\n};\n\n/**\n * What the product does, in 3–6 short blocks. Vary the copy: identical icon-title-body cards repeated\n * twelve times is the anti-pattern this replaces, not the goal.\n */\nexport function FeatureGrid({ features, columns = 3, className }: Props) {\n  return (\n    <ul className={cn('grid gap-8 sm:grid-cols-2', columns === 3 && 'lg:grid-cols-3', className)}>\n      {features.map(({ icon: Icon, title, description }) => (\n        <li key={title} className=\"flex flex-col gap-3\">\n          {/* kit-tokens-ignore tint-text: holds only an icon, which needs 3:1 (the token gate checks it) */}\n          <span className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon className=\"size-5\" aria-hidden />\n          </span>\n          <h3 className=\"font-semibold\">{title}</h3>\n          <p className=\"text-muted-foreground leading-7\">{description}</p>\n        </li>\n      ))}\n    </ul>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/feature-grid.tsx"
    }
  ],
  "meta": {
    "exports": [
      "FeatureGrid"
    ],
    "api": "<FeatureGrid features={[{icon,title,description}]} columns? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "marketing"
  ],
  "type": "registry:component"
}