{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-8","type":"registry:block","title":"Nested accordion example with bordered items","description":"Nested accordion example with bordered items","dependencies":[],"registryDependencies":["accordion"],"files":[{"path":"c-accordion-8.tsx","type":"registry:block","content":"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nconst nestedItems = [\n  {\n    value: \"sub-item-1\",\n    trigger: \"Technical Specifications\",\n    content:\n      \"Detailed technical specs including dimensions, weight, and power requirements.\",\n  },\n  {\n    value: \"sub-item-2\",\n    trigger: \"Compatibility\",\n    content:\n      \"List of supported devices and operating systems for this product.\",\n  },\n]\n\nconst mainItems = [\n  {\n    value: \"product-info\",\n    trigger: \"Product Overview\",\n    content:\n      \"This product is designed for high-performance enterprise environments requiring maximum reliability.\",\n  },\n  {\n    value: \"details\",\n    trigger: \"Additional Details\",\n    isNested: true,\n  },\n  {\n    value: \"shipping\",\n    trigger: \"Shipping & Returns\",\n    content:\n      \"Free standard shipping on orders over $500. 30-day return policy applies.\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto mb-auto w-full max-w-lg\">\n      <Accordion\n        multiple={false}\n        defaultValue={[\"details\"]}\n        className=\"space-y-2 border-none\"\n      >\n        {mainItems.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"border-border rounded-lg border bg-transparent px-4\"\n          >\n            <AccordionTrigger className=\"items-center py-3 font-medium hover:no-underline\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground h-auto\">\n              {item.isNested ? (\n                <Accordion\n                  multiple={false}\n                  defaultValue={[\"sub-item-1\"]}\n                  className=\"space-y-2 border-none\"\n                >\n                  {nestedItems.map((subItem) => (\n                    <AccordionItem\n                      key={subItem.value}\n                      value={subItem.value}\n                      className=\"border-border rounded-lg border bg-transparent px-3\"\n                    >\n                      <AccordionTrigger className=\"text-foreground items-center py-3 font-medium hover:no-underline\">\n                        {subItem.trigger}\n                      </AccordionTrigger>\n                      <AccordionContent className=\"text-sm\">\n                        {subItem.content}\n                      </AccordionContent>\n                    </AccordionItem>\n                  ))}\n                </Accordion>\n              ) : (\n                item.content\n              )}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}","target":"components/examples/c-accordion-8.tsx"}],"meta":{"order":8,"label":"Nested"}}