Accordion

A compound component using context to share state between Accordion.Item, Accordion.Trigger, and Accordion.Content.

Single Mode

Multiple Mode

FAQ with Icons

A polished FAQ section using Lucide icons alongside each question.

With Colors

Accordions with different accent colors for contextual sections.

Settings Panel

Rich trigger content with gradient icon badges and descriptions.

Borderless

Clean look without the outer border — just dividers between items.

Custom Icons

Replace the default chevron with any element using the icon prop. Pass a function to receive the isOpen state, or pass null to remove it entirely.

Props

Prop	Type	Default	Description
`value`	`string[]`	—	The currently open item values (controlled).
`defaultValue`	`string[]`	`[]`	The initially open item values (uncontrolled).
`onValueChange`	`(value: string[]) => void`	—	Called when open items change.
`multiple`	`boolean`	`false`	Whether multiple items can be open at once.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus rings.
`icon (Trigger)`	`ReactNode \| ((props: { isOpen: boolean }) => ReactNode) \| null`	—	Custom icon on Accordion.Trigger replacing the default chevron. Pass a function to receive isOpen state, or null to remove.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

string[]

The currently open item values (controlled).

defaultValue[]

string[]

The initially open item values (uncontrolled).

onValueChange

(value: string[]) => void

Called when open items change.

multiplefalse

boolean

Whether multiple items can be open at once.

color"blue"

Accent color for focus rings.

icon (Trigger)

ReactNode | ((props: { isOpen: boolean }) => ReactNode) | null

Custom icon on Accordion.Trigger replacing the default chevron. Pass a function to receive isOpen state, or null to remove.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}