Accordion

Vertically stacked content panels with expandable sections. By default, the accordion renders as a lightly tinted surface on a white canvas.

Basic Accordion

Default appearance on the white canvas.

Multiple Sections Open

Allow multiple accordion items to be expanded simultaneously.

Default Expanded

Accordion with a pre-expanded section using the defaultValue prop.

Use the defaultValue prop to control which section starts expanded. This is useful for highlighting important content or providing immediate context to users.

Inverted Canvas

Tinted canvas block with a white accordion surface.