Accordion
v1.0.0Expandable sections for showing and hiding content.
Default Classic Layout
Click any item to expand its content.
Carded Variant with Multi-Open
Multiple items can be open at the same time.
Dynamic Motion Presets
Toggle between different animation styles.
Preset: Grow + Carded
Preset: Fade + Classic
API Reference
All available props for this component.
Property | Type | Default | Description |
|---|---|---|---|
| allowMultiple | boolean | false | Enables multiple item disclosure blocks to remain structurally expanded at the same time. |
| animation | 'slide' | 'fade' | 'grow' | 'none' | 'slide' | Dictates the framer-motion layout preset applied during height transition cycles. |
| variant | 'default' | 'carded' | 'default' | Defines container aesthetics, switching between standard border rows or isolated container blocks. |
| openItems | string[] | undefined | Pass an array of active string IDs to transform the accordion assembly into a controlled component environment. |
| onOpenChange | (openItems: string[]) => void | undefined | Callback hook executed instantly when any header selection mutates the global layout array. |
| id | string | useId() | Unique tracking indicator mapped to individual item nodes. Overrides automated fallback hashes. |
| defaultOpen | boolean | false | Sets the initial unmounted state of individual accordion rows to expanded during cold page boots. |