A vertically stacked set of interactive headings that each reveal associated sections of content.
npx micomponents-cli add accordionimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>
Yes. It comes with default styles that you can customize.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It's animated by default but you can disable it.
</AccordionContent>
</AccordionItem>
</Accordion>Use type="single" to allow only one item to be open at a time. Opening a new item automatically closes the previous one.
Use type="multiple" to allow multiple items to be open at the same time.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | - | Determines if one or multiple items can be open |
| collapsible | boolean | false | When false, one item will always be open |
| disabled | boolean | false | Disables the accordion |