{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-05",
  "title": "Feature 05",
  "description": "Interactive accordion feature section where clicking each item reveals a corresponding product screenshot. Use it to keep the section compact while letting users explore features at their own pace.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-05/feature.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport {\n  LucideIcon,\n  Copy,\n  SquareDashedMousePointer,\n  TypeOutline,\n  Info,\n} from \"lucide-react\";\n\ninterface FeatureItem {\n  title: string;\n  description: string;\n  icon?: LucideIcon;\n  img?: string;\n}\n\ninterface Feature05Props {\n  title?: string;\n  description?: string;\n  features?: FeatureItem[];\n  className?: string;\n}\n\nconst Feature05 = ({\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        \"Every component is ready to use. Just copy the code and paste it into your project.\",\n      icon: Copy,\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp\",\n    },\n    {\n      title: \"Fully Customizable\",\n      description:\n        \"Built with Tailwind CSS, every component can be easily modified to match your brand.\",\n      icon: SquareDashedMousePointer,\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp\",\n    },\n    {\n      title: \"TypeScript First\",\n      description:\n        \"All components are fully typed with TypeScript for better developer experience.\",\n      icon: TypeOutline,\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp\",\n    },\n    {\n      title: \"Accessible by Default\",\n      description:\n        \"Built on Radix UI primitives, all components follow WAI-ARIA guidelines.\",\n      icon: Info,\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-4.webp\",\n    },\n  ],\n  className,\n}: Feature05Props) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const activeImg = features[activeIndex]?.img || features[0]?.img;\n\n  return (\n    <section className={cn(\"py-12 md:py-24\", className)}>\n      <div className=\"mx-auto max-w-7xl px-8\">\n        <div className=\"grid gap-16 lg:grid-cols-2\">\n          <div className=\"flex flex-col gap-4\">\n            <h2 className=\"text-3xl leading-tight font-medium tracking-tight md:text-4xl lg:text-5xl\">\n              {title}\n            </h2>\n            {description && (\n              <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n            )}\n            <Accordion\n              type=\"single\"\n              collapsible\n              defaultValue=\"item-0\"\n              className=\"mt-4\"\n              onValueChange={(value) => {\n                const index = parseInt(value.replace(\"item-\", \"\"), 10);\n                if (!isNaN(index)) setActiveIndex(index);\n              }}\n            >\n              {features.map((feature, index) => (\n                <AccordionItem key={index} value={`item-${index}`}>\n                  <AccordionTrigger className=\"gap-4 text-left hover:no-underline\">\n                    <div className=\"flex items-center gap-4\">\n                      {feature.icon && (\n                        <feature.icon\n                          className=\"size-5 shrink-0 text-muted-foreground\"\n                          strokeWidth={1.5}\n                        />\n                      )}\n                      <span className=\"font-medium\">{feature.title}</span>\n                    </div>\n                  </AccordionTrigger>\n                  <AccordionContent className=\"text-muted-foreground\">\n                    <p className={feature.icon ? \"pl-8\" : \"\"}>\n                      {feature.description}\n                    </p>\n                    <div className=\"mt-4 aspect-video overflow-hidden rounded-md bg-muted/30 lg:hidden\">\n                      {feature.img && (\n                        <img\n                          src={feature.img}\n                          alt={feature.title}\n                          className=\"size-full object-cover\"\n                        />\n                      )}\n                    </div>\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n          </div>\n\n          <div className=\"relative hidden lg:block\">\n            <div className=\"sticky top-24 aspect-square overflow-hidden rounded-md border bg-muted/30\">\n              {activeImg && (\n                <img\n                  src={activeImg}\n                  alt=\"Feature illustration\"\n                  className=\"size-full object-cover\"\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Feature05;\n",
      "type": "registry:component",
      "target": "components/feature-05.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-05.webp",
    "imageDark": "/r/previews/feature-05-dark.webp",
    "prose": {
      "about": "Feature 05 is an interactive accordion feature section where each item in the list reveals a corresponding product screenshot when selected. The left column holds a vertical list of clickable feature titles with descriptions; clicking any item updates the screenshot displayed on the right. Built with shadcn/ui Accordion and Tailwind CSS, it keeps the section height controlled while allowing users to explore multiple features at their own pace.",
      "whenToUse": [
        "Products with 4–8 distinct features that each have a unique UI screen to show",
        "Landing pages where vertical space is limited and a traditional image-per-row layout would be too long",
        "Interactive demos where letting users click through features increases engagement time",
        "SaaS products with a rich dashboard where showing the full UI for each feature is important"
      ],
      "notes": "Prepare one screenshot per feature item at a consistent aspect ratio. Mismatched image dimensions will cause the right column to jump in height as users click between items."
    }
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}