Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Preview

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days.

We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.

Installation

$npx maddex add Accordion

Usage



1<!-- @import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from ../../lib/components -->
2
3<Accordion type="single" collapsible="true" class="w-full">
4  <AccordionItem value="item-1">
5    <AccordionTrigger>Product Information</AccordionTrigger>
6    <AccordionContent>
7      Our flagship product combines cutting-edge technology with sleek design.
8    </AccordionContent>
9  </AccordionItem>
10  <AccordionItem value="item-2">
11    <AccordionTrigger>Shipping Details</AccordionTrigger>
12    <AccordionContent>
13      We offer worldwide shipping through trusted courier partners.
14    </AccordionContent>
15  </AccordionItem>
16  <AccordionItem value="item-3">
17    <AccordionTrigger>Return Policy</AccordionTrigger>
18    <AccordionContent>
19      We stand behind our products with a comprehensive 30-day return policy.
20    </AccordionContent>
21  </AccordionItem>
22</Accordion>