Accordion
Create collapsible content sections with the Accordion and AccordionItem components
The Accordion component creates collapsible content sections, perfect for FAQs, expandable menus, or organizing large amounts of content.
Usage
mdx
1<Accordion>2 <AccordionItem title="First Question" defaultOpen>3 This content is visible by default because of `defaultOpen`.4 </AccordionItem>5 6 <AccordionItem title="Second Question">7 This content is collapsed by default.8 </AccordionItem>9</Accordion>Live Example
An accordion is a UI pattern that allows users to expand and collapse sections of content. It's useful for organizing information in a compact, scannable format.
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | AccordionItem components to render |
type | "single" | "multiple" | "multiple" | Whether one or multiple items can be open |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | The clickable header text |
children | ReactNode | required | Content shown when expanded |
defaultOpen | boolean | false | Whether the item starts expanded |
Tips
Tip
Use the `defaultOpen` prop on the first AccordionItem to give users a preview of the content format.