Accordion

Collapsible content panels supporting single/multiple expand modes, with default, bordered, and separated visual variants.

Accordion

Collapsible content panels built on Radix UI Accordion. Supports single (one open at a time) and multiple (multiple open simultaneously) modes, with three visual variants.

Variants

variant	Description
`default`	Bottom divider line, no outer border
`bordered`	Full outer border + inner dividers
`separated`	Each item is an independent card with spacing

Accordion Props

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Expand mode
`variant`	`"default" \| "bordered" \| "separated"`	`"default"`	Visual variant
`defaultValue`	`string`	—	Default expanded item
`collapsible`	`boolean`	`true`	Whether all items can be collapsed in single mode

Accessibility

Radix UI natively implements role="button", aria-expanded, aria-controls
Keyboard: Enter/Space to toggle, Tab to navigate between triggers