Accordion

Expandable sections with animated height transition. Supports single and multiple open modes, full keyboard navigation, and ARIA.

Anatomy

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Label</AccordionTrigger>
    <AccordionContent>Content</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Single

DAVE is a React component library built on Tailwind CSS and CSS custom properties.

Yes. Accordion follows the ARIA Accordion pattern with full keyboard navigation.

Override CSS custom properties in your globals.css to change colours across the entire system.

Multiple

Open by default. Multiple items can be expanded simultaneously.

Also open by default.

Closed by default.

Accordion props

type*

'single' | 'multiple'

Single allows one open item at a time. Multiple allows any number.

collapsible= false

boolean

When type is 'single', allows closing the active item by clicking it again.

value

string | string[]

Controlled open value(s).

defaultValue

string | string[]

Initial open value(s) for uncontrolled usage.

onValueChange

(value) => void

Called when open values change.

Prop	Type	Default	Description
type*	'single' \| 'multiple'	—	Single allows one open item at a time. Multiple allows any number.
collapsible	boolean	false	When type is 'single', allows closing the active item by clicking it again.
value	string \| string[]	—	Controlled open value(s).
defaultValue	string \| string[]	—	Initial open value(s) for uncontrolled usage.
onValueChange	(value) => void	—	Called when open values change.

AccordionItem props

value*

string

Unique identifier for this item.

children*

ReactNode

Should contain AccordionTrigger and AccordionContent.

Prop	Type	Default	Description
value*	string	—	Unique identifier for this item.
children*	ReactNode	—	Should contain AccordionTrigger and AccordionContent.

PreviousTokens NextCard