build69
build69  /  Components  /  Data Display  /  Accordion

Accordion

v1.0.14Updated 19 Oct 2026

Vertically 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

View source← Back to catalog

Preview

Live · 12 stories
SingleOpen ↗
▸Why this is recommendedcollapseexpanddisclosurefaq+2

Accordion — single.

Recommended for+14
  • ✓FAQ lists
  • ✓Settings groups
  • ✓Hiding long content under headers
  • ✓Help docs with badges per topic
Tags+6
collapseexpanddisclosurefaqradixsingle
Features+4
  • 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
  • Content that grows after the panel opened is not clipped (no height pinned outside the open/close animation)
  • Per-item className and contentClassName in the items config, so one panel can be restyled without switching to composition
  • i18n: labels prop overrides the expand/collapse-all controls and the loading screen-reader announcement (DEFAULT_ACCORDION_LABELS)
Not recommended for−2
  • ✕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.

get_registry_item({ name: "Accordion" })

Usage

import { Accordion } from '@/components/data-display/accordion';

<Accordion variant="card" items={faqItems} type="multiple" />

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

PropTypeRequired
type

Single or multi-open mode

'single' | 'multiple'yes
collapsible

Allow all items closed (single mode)

boolean—
defaultValue

Initially open item(s)

string | string[]—
variant

Visual style

'card' | 'flush' | 'bordered' | 'separated'—
items

Declarative accordion items (alternative to children). Each item: id, title, content, plus optional description / icon / badge / count / tone / disabled / loading and className / contentClassName for per-item styling

AccordionItemConfig[]—
labels

Override built-in UI strings (Expand all / Collapse all controls, loading announcement) for i18n; English defaults exported as DEFAULT_ACCORDION_LABELS

Partial<AccordionLabels>—

Related

Platform docsAll componentsSource files