Accordion
v1.0.7Updated 27 Aug 2026Vertically stacked collapsible sections built on Radix Accordion. Use for FAQs, settings groups, or progressive disclosure of long content. Also ships richer variants (card / flush / bordered / separated) plus declarativ
Preview
Live · 11 stories▸Why this is recommendedcollapseexpanddisclosurefaq+2
Accordion — single.
- ✓FAQ lists
- ✓Settings groups
- ✓Hiding long content under headers
- ✓Help docs with badges per topic
- Single or multiple open items
- Keyboard navigation
- Animated content reveal
- Variants: card / flush / bordered / separated
- Declarative items array
- Icon + badge per item
- Expand all / collapse all controls
- Nested content
- i18n: labels prop overrides the expand/collapse-all controls and the loading screen-reader announcement (DEFAULT_ACCORDION_LABELS)
- ✕Navigation menus (use a Sidebar)
- ✕Tabbed content (use Tabs)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
typeSingle or multi-open mode
yescollapsibleAllow all items closed (single mode)
—defaultValueInitially open item(s)
—variantVisual style
—itemsDeclarative accordion items (alternative to children)
—labelsOverride built-in UI strings (Expand all / Collapse all controls, loading announcement) for i18n; English defaults exported as DEFAULT_ACCORDION_LABELS
—