{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-01",
  "title": "Feature 01",
  "description": "Three-column feature grid displaying product benefits as icon cards with titles and descriptions. Use it to quickly communicate your product's key capabilities anywhere on a SaaS or marketing landing page.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-01/feature.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface FeatureItem {\n  img?: string;\n  title: string;\n  description: string;\n  link?: { text: string; url: string };\n}\n\ninterface Feature01Props {\n  title: string;\n  description?: string;\n  features?: FeatureItem[];\n  className?: string;\n}\n\nconst Feature01 = ({\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      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp\",\n      title: \"Copy & Paste Ready\",\n      description:\n        \"All components are ready to use. Just copy the code and paste it into your project.\",\n      link: { text: \"View More\", url: \"#\" },\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp\",\n      title: \"Fully Customizable\",\n      description:\n        \"Built with Tailwind CSS, every component is fully customizable to match your brand.\",\n      link: { text: \"View More\", url: \"#\" },\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp\",\n      title: \"TypeScript First\",\n      description:\n        \"Written in TypeScript with full type safety and IntelliSense support for better DX.\",\n      link: { text: \"View More\", url: \"#\" },\n    },\n  ],\n  className,\n}: Feature01Props) => {\n  return (\n    <section className={cn(\"container mx-auto px-4 py-12 md:py-24\", className)}>\n      <div className=\"flex flex-col items-center gap-2 text-center\">\n        <h2 className=\"text-3xl font-medium tracking-tight 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 sm:grid-cols-2 lg:grid-cols-3\">\n        {features.map((feature) => (\n          <Card\n            key={feature.title}\n            className=\"flex flex-col gap-0 rounded-2xl p-2 shadow-none\"\n          >\n            <CardHeader className=\"gap-0 p-0\">\n              {feature.img && (\n                <img\n                  src={feature.img}\n                  alt={feature.title}\n                  className=\"aspect-4/3 h-full w-auto rounded-lg border\"\n                />\n              )}\n            </CardHeader>\n            <CardContent className=\"flex flex-1 flex-col gap-2 p-4\">\n              <h3 className=\"text-lg font-semibold\">{feature.title}</h3>\n              <p className=\"flex-1 text-sm text-muted-foreground\">\n                {feature.description}\n              </p>\n              {feature.link && (\n                <Button variant=\"outline\" className=\"mt-2 w-full\">\n                  <a href={feature.link.url}>{feature.link.text}</a>\n                  <ArrowUpRight />\n                </Button>\n              )}\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </section>\n  );\n};\n\nexport default Feature01;\n",
      "type": "registry:component",
      "target": "components/feature-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-01.webp",
    "imageDark": "/r/previews/feature-01-dark.webp",
    "prose": {
      "about": "Feature 01 is a three-column icon card grid that displays product benefits with a Lucide icon, a short title, and a one-sentence description per card. Built with shadcn/ui Card components and Tailwind CSS grid, it automatically wraps to a single column on mobile and two columns on tablet. The icon, title, and description for each card are passed as data — no need to edit JSX to add or remove features. Dark mode is inherited from the shadcn/ui theme.",
      "whenToUse": [
        "SaaS and marketing landing pages that need to communicate 3, 6, or 9 product benefits at a glance",
        "Sections that follow the hero and expand on the value proposition with supporting detail",
        "Products with distinct, independently valuable features that don't require visual screenshots",
        "Pages where load time matters and you want feature content without heavy images"
      ],
      "notes": "Stick to 3, 6, or 9 cards for a clean grid. Fewer than 3 or non-multiples of 3 will leave orphan cards on desktop — add a placeholder or use a different layout.",
      "faqs": [
        {
          "question": "How many feature cards should I use?",
          "answer": "Stick to 3, 6, or 9 for a clean grid — other counts leave orphan cards on desktop."
        },
        {
          "question": "Do I need to edit JSX to change the features?",
          "answer": "No, the icon, title, and description for each card are passed as data, not hardcoded in JSX."
        },
        {
          "question": "Does it support custom icons?",
          "answer": "Yes, any Lucide icon can be passed per card."
        }
      ]
    }
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}