Accordion

Expandable sections with CSS height panel animation and a rotating chevron, backed by Base UI Accordion.

Installation

npx smoothui-cli add accordion

Features

Compound Accordion (Root, Item, Header, Trigger, Panel) with chevron rotation and panel height driven by Base CSS variable --accordion-panel-height plus opacity. Pass multiple on the root to allow several open items.

Radix twin

Base UI always stores an array (value / defaultValue / onValueChange are string[]). The Radix twin matches that in multiple mode (multiple or type="multiple"). In single mode, Radix uses a string: value and defaultValue are typed string, and onValueChange emits string rather than [string].

States

Features

Single-open FAQ-style accordion with springy chevron and height animation.

Multiple

Several panels can stay expanded at once.

Accessibility

Keyboard Interactions

Reduced Motion

When reduced motion is preferred, height and opacity transitions are disabled (instant open/close). Documented via useReducedMotion gating on panel and chevron classes.

Props