Accordion & Collapsible

Collapsible wraps one trigger and one panel; Accordion composes several items with shared keyboard navigation (single / multiple, optional collapsible). Triggers show an animated chevron on the right by default — override with the chevron prop; panel height and chevron share motionDurationMs. Use variant and size on Accordion.Root for chrome and density. Reference — header Documentation → Accordion.

Single-row previews include collapsible (Accordion.Root collapsible). Click the open header again to collapse — that shows the height/chevron animation so you can compare motion speed below.

Examples: Collapsible

Examples: Accordion — single

Examples: Accordion — collapsible single

Examples: Accordion — multiple

Examples: chevron — default, hidden, custom

Examples: list inside accordion

Examples: nested accordion

Examples: variants (bordered, flush, soft, elevated)

Examples: sizes (sm, md, lg)

Examples: motion speed (motionDurationMs)

Examples: on tinted / dark background

Markdown reference — header Documentation → Accordion.