{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-with-plus-icon",
  "type": "registry:component",
  "title": "Accordion",
  "author": "Toby Belhome",
  "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
  "dependencies": [
    "@radix-ui/react-accordion",
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "examples/components/accordion/with-plus-icon/page.tsx",
      "content": "import { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { PlusIcon } from \"lucide-react\";\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"Product Information\",\n    content:\n      \"Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.\"\n  },\n  {\n    id: \"2\",\n    title: \"Shipping Details\",\n    content:\n      \"We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.\"\n  },\n  {\n    id: \"3\",\n    title: \"Return Policy\",\n    content:\n      \"We stand behind our products with a comprehensive 30-day return policy. If you&apos;re not completely satisfied, simply return the item in its original condition.\"\n  }\n];\n\nexport default function AccordionWithPlusIcon() {\n  return (\n    <Accordion type=\"single\" className=\"w-full\" defaultValue=\"1\">\n      {items.map((item) => (\n        <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n          <AccordionPrimitive.Header className=\"flex\">\n            <AccordionPrimitive.Trigger className=\"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n              {item.title}\n              <PlusIcon\n                size={16}\n                className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                aria-hidden=\"true\"\n              />\n            </AccordionPrimitive.Trigger>\n          </AccordionPrimitive.Header>\n          <AccordionContent className=\"text-muted-foreground pb-2\">{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/accordion-with-plus-icon.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}