Accordion
Collapsible sections with buttery-smooth transitions that keep dense information organised. Perfect for FAQs, advanced settings, or progressive disclosure flows.
Interactive Example
Compose rich content within each item and decide which panels open by default for a guided story.
Design strategy
Focus on progressive disclosure to keep your surfaces calm. Use accordions to tuck away secondary controls while keeping essential actions visible.
Content patterns
- Pair concise titles with short supporting copy.
- Ensure interactive elements sit inside the panel, not in the summary.
- Use icons or badges sparingly for additional hierarchy.
Micro-interactions
The component ships with subtle easing to avoid jarring jumps. Extend with Tailwind transitions for deeper motion stories.
<.accordion class="space-y-3">
<:item id="accordion-design" title="Design strategy" open={true}>
...
</:item>
<:item id="accordion-content" title="Content patterns" open={false}>
...
</:item>
</.accordion>
Usage Notes
Small heuristics to keep accordion experiences intuitive and accessible.
- Keep summary rows concise. Long titles wrap to two lines max for ideal readability.
- Default one key panel to open when the section loads so users see a preview of the content style.
- Wrap complex layouts inside the panel body using flex/grid utilities to maintain rhythm.
Props
Drive the accordion with expressive slot attributes while inheriting accessible semantics out of the box.
| Prop | Type | Default | Description |
|---|---|---|---|
| item (slot) | slot | required |
Accordion rows with id, title, and optional open.
|