Accordion

Collapsible content sections with animated expand/collapse, supporting single and multiple expand modes.

npx chilli@latest add accordion

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

Chilli is a design system built for modern web applications with a focus on consistency and developer experience.

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

Yes, all colors and tokens are defined as CSS custom properties that you can override in your project.

Only one item can be open at a time. Opening a new item closes the previous one.

Multiple items can be open simultaneously. Each item toggles independently.

An accordion item can also be used standalone without a group, managing its own open state.

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Whether one or multiple items can be open.
`defaultValue`	`string \| string[]`	`—`	Initially open item(s).

Prop	Type	Default	Description
`value`	`string`	`—`	Unique identifier when used inside a group.
`title`	`string`	`—`	The title text displayed in the header.
`defaultOpen`	`boolean`	`false`	Whether the item is open by default (standalone mode).
`children`	`ReactNode`	`—`	The collapsible content.