{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-04",
  "title": "Feature 04",
  "description": "Three-column icon card grid for listing product features with icons, titles, and short descriptions. Use it as a lightweight, fast-loading feature showcase section that stays scannable on any screen size.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-04/feature.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  Sparkles,\n  MessageCircle,\n  Copy,\n  LayoutTemplate,\n  SquareDashedMousePointer,\n  Gauge,\n} from \"lucide-react\";\n\ninterface FeatureItem {\n  title: string;\n  description: string;\n  icon: React.ReactNode;\n}\n\ninterface Feature04Props {\n  title?: string;\n  description?: string;\n  features?: FeatureItem[];\n  className?: string;\n}\n\nconst Feature04 = ({\n  title = \"Everything You Need to Build Faster\",\n  description = \"Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.\",\n  features = [\n    {\n      title: \"Copy & Paste Ready\",\n      description:\n        \"Copy any component directly into your project. No dependencies, just pure code you own.\",\n      icon: <Copy />,\n    },\n    {\n      title: \"Pre-built Templates\",\n      description:\n        \"Start with production-ready templates for common layouts and patterns.\",\n      icon: <LayoutTemplate />,\n    },\n    {\n      title: \"Developer Experience\",\n      description:\n        \"Built with TypeScript, fully typed, and optimized for modern frameworks.\",\n      icon: <Sparkles />,\n    },\n    {\n      title: \"Fully Customizable\",\n      description:\n        \"Every component is built with Tailwind CSS. Modify styles easily.\",\n      icon: <SquareDashedMousePointer />,\n    },\n    {\n      title: \"Performance Optimized\",\n      description:\n        \"Lightweight components with zero runtime overhead. Fast load times.\",\n      icon: <Gauge />,\n    },\n    {\n      title: \"Active Community\",\n      description:\n        \"Join thousands of developers sharing components and best practices.\",\n      icon: <MessageCircle />,\n    },\n  ],\n  className,\n}: Feature04Props) => {\n  return (\n    <section className={cn(\"py-12 md:py-24\", className)}>\n      <div className=\"container mx-auto px-8\">\n        <div className=\"mx-auto flex flex-col items-center gap-4 text-center\">\n          <h2 className=\"text-3xl leading-tight font-medium tracking-tight text-pretty md:text-4xl lg:text-5xl\">\n            {title}\n          </h2>\n          <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n        </div>\n\n        <div className=\"mt-8 grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n          {features.map((feature) => (\n            <Card\n              key={feature.title}\n              className=\"flex flex-col gap-4 p-4 shadow-none\"\n            >\n              <div className=\"flex size-12 items-center justify-center rounded-md border text-primary\">\n                {feature.icon}\n              </div>\n              <h3 className=\"text-lg font-medium\">{feature.title}</h3>\n              <p className=\"text-sm text-muted-foreground\">\n                {feature.description}\n              </p>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Feature04;\n",
      "type": "registry:component",
      "target": "components/feature-04.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-04.webp",
    "imageDark": "/r/previews/feature-04-dark.webp",
    "prose": {
      "about": "Feature 04 is a three-column icon card grid similar to Feature 01 but with a lighter visual weight — smaller icons, tighter spacing, and a more compact card structure. Built with shadcn/ui and Tailwind CSS, it is designed for pages that need a fast-loading, text-first feature list without the visual heaviness of screenshots or large illustrations. Cards display a Lucide icon, a title, and a short description.",
      "whenToUse": [
        "Pages that already have a heavy hero section and need a lighter feature list as a follow-up",
        "Feature sections lower on the page where users are scanning, not reading",
        "Products with more than 6 features where a compact layout keeps the section from becoming too long",
        "Mobile-first pages where a compact card grid performs better than full-width feature rows"
      ],
      "notes": "Works well in sets of 6 or 9. Use consistent icon sizes from the same Lucide icon family to maintain visual harmony across all cards."
    }
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}