Accordion

Collapsible sections with animated expand/collapse and proximity hover in grouped mode.

Installation

Installs the Base UI flavor. Switch in the right panel.

A single collapsible item with its own hover state.

Inspect

A collapsible accordion with animated expand/collapse and spring-animated chevron.

Multiple items with proximity hover — only one can be expanded at a time.

Inspect

Install the component and import it into your project. The accordion supports both single and multiple expand modes.

Multiple items with proximity hover — several can be expanded at once.

Inspect

Multiple items can be expanded at the same time.

Each item operates independently in multiple mode.

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	Whether one or multiple items can be expanded.
collapsible	boolean	true	Allow collapsing all items when type is single.
defaultValue	string \| string[]	—	Initially expanded item value(s).
value	string \| string[]	—	Controlled expanded value(s).
onValueChange	(value) => void	—	Callback when expanded state changes.

Prop	Type	Default	Description
value	string	—	Unique identifier for this item.
index	number	—	Position index for proximity hover. Required inside AccordionGroup, omit for standalone.
disabled	boolean	false	Whether this item is disabled.

Prop	Type	Default	Description
children	ReactNode	—	Trigger label content.

Prop	Type	Default	Description
children	ReactNode	—	Collapsible content.