Accordion

Vertically stacked collapsible panels for FAQs, settings sections, and progressive disclosure.

All components use semantic CSS variables that adapt to light and dark mode automatically.

Installation

You can add this accordion component using our CLI or manually:

Dark mode ready - this component follows Ethereal UI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx @etherealui/cli@latest add accordion

Default expanded state

Pass defaultOpenId to control which item starts expanded on mount.

All components use semantic CSS variables that adapt to light and dark mode automatically.