{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-grid",
  "type": "registry:ui",
  "title": "Feature grid",
  "description": "A responsive grid of feature cards, one to three columns wide, each with an optional icon, a title and a short description. Built with React and Tailwind.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/feature-grid.tsx",
      "type": "registry:ui",
      "target": "components/ui/feature-grid.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { BellIcon, GlobeIcon, LockIcon, ReceiptIcon, RefreshCwIcon, WebhookIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A responsive grid of feature cards, each with an optional icon, a title and a short description. */\ntype Feature = { title: string; description: string; icon?: React.ReactNode }\n\nconst SAMPLE_FEATURES: Feature[] = [\n  { title: \"Invoices in seconds\", description: \"Draft, send and track invoices from one screen. Lumen fills in customer details and tax rates for you.\", icon: <ReceiptIcon className=\"size-5\" /> },\n  { title: \"Automatic reminders\", description: \"Polite nudges go out before and after the due date, and stop the moment a payment lands.\", icon: <BellIcon className=\"size-5\" /> },\n  { title: \"Multi-currency\", description: \"Bill in 135 currencies with daily rates, and settle to your base currency without spreadsheets.\", icon: <GlobeIcon className=\"size-5\" /> },\n  { title: \"Bank reconciliation\", description: \"Transactions match to invoices as they clear, so your books stay closed every day, not every quarter.\", icon: <RefreshCwIcon className=\"size-5\" /> },\n  { title: \"Webhooks and API\", description: \"Every invoice, payment and refund fires an event. Build on the same API Lumen's own apps use.\", icon: <WebhookIcon className=\"size-5\" /> },\n  { title: \"Audit-ready by default\", description: \"Every change is logged with who, when and what. Export the trail for your auditors in one click.\", icon: <LockIcon className=\"size-5\" /> },\n]\n\ntype FeatureGridProps = {\n  /** Cards to show. Defaults to six Lumen features with icons. */\n  features?: Feature[]\n  className?: string\n}\n\nfunction FeatureGrid({\n  features = SAMPLE_FEATURES,\n  className,\n}: FeatureGridProps) {\n  return (\n    <div data-slot=\"feature-grid\" className={cn(\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\", className)}>\n      {features.map((f) => (\n        <div key={f.title} className=\"rounded-xl border border-border bg-surface p-5 shadow-highlight\">\n          {f.icon ? <div className=\"mb-3 text-accent\">{f.icon}</div> : null}\n          <h3 className=\"text-sm font-medium text-fg\">{f.title}</h3>\n          <p className=\"mt-1.5 text-sm leading-[1.55] text-fg-muted\">{f.description}</p>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { FeatureGrid }\nexport type { FeatureGridProps, Feature }\n"
    }
  ]
}