Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

#Installation

npx @dinachi/cli@latest add accordion

tsx

import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@/components/ui/accordion'

A basic accordion with single item open

Yes. It adheres to the WAI-ARIA design pattern and uses semantic HTML elements.

Accordion allowing multiple items to be open

Prop	Type	Default	Description
multiple	boolean	false	Whether multiple items can be open at the same time
defaultValue	(any \| null)[]	—	The value of the item(s) to expand by default (array)
value	(any \| null)[]	—	The controlled value of the item(s) to expand (array)
onValueChange	(value: (any \| null)[], eventDetails) => void	—	Callback fired when the expanded state changes
disabled	boolean	false	When true, prevents the user from interacting with the accordion