Accordion Layered Content

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.

Auto Collapse

<:item id="accordion-design" title="Design strategy" open={true}>

Focus on progressive disclosure to keep your surfaces calm. Use accordions to tuck away secondary controls while keeping essential actions visible.

<:item id="accordion-content" title="Content patterns" open={false}>

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.

<:item id="accordion-motion" title="Micro-interactions" open={false}>

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.

Guidelines

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`.