Accordion
Collapsible sections for content that's worth offering but not worth showing all at once.
Every component and block in the library, plus the Figma file.
Yes — MIT licensed, no attribution required.
Yes. Components use CSS Modules bound to custom properties, so they don't collide with utility classes around them.
Items are independent
Each AccordionItem owns its own open state, so several can be open at once. For the classic one-at-a-time behaviour, drive each item's open prop from a single piece of state in your own component.
Opening one by default
Useful for the first item, so the panel doesn't start fully collapsed.
Everything else stays tucked away until asked for.
Rich panel content
Orders ship within two business days.
- Free returns for 30 days
- Exchanges processed within a week
Accordion props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | AccordionItem elements. The wrapper supplies the shared top and bottom border. |
AccordionItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | The row you click to expand. | |
| children | ReactNode | Panel content. Any markup, not just text. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false | Uncontrolled initial state. |