Docs/Accordion

Accordion

Collapsible sections with single or multiple open items.

Usage

tsx

1'use client'
2import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@storm-ds/ui'
3
4<Accordion type="single">
5  <AccordionItem value="item-1">
6    <AccordionTrigger>Section 1</AccordionTrigger>
7    <AccordionContent>Content here</AccordionContent>
8  </AccordionItem>
9</Accordion>

Single Mode

Yes. It adheres to the WAI-ARIA design pattern.

tsx

1<Accordion type="single" defaultValue="item-1">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Is it accessible?</AccordionTrigger>
4    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
5  </AccordionItem>
6  <AccordionItem value="item-2">
7    <AccordionTrigger>Is it styled?</AccordionTrigger>
8    <AccordionContent>Yes. It comes with default Storm styling.</AccordionContent>
9  </AccordionItem>
10</Accordion>

Multiple Mode

tsx

1<Accordion type="multiple">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>First</AccordionTrigger>
4    <AccordionContent>First content</AccordionContent>
5  </AccordionItem>
6  <AccordionItem value="item-2">
7    <AccordionTrigger>Second</AccordionTrigger>
8    <AccordionContent>Second content</AccordionContent>
9  </AccordionItem>
10  <AccordionItem value="item-3">
11    <AccordionTrigger>Third</AccordionTrigger>
12    <AccordionContent>Third content</AccordionContent>
13  </AccordionItem>
14</Accordion>

Note

Use type="single" to allow only one open item, or type="multiple" for independent sections. Requires 'use client' for state management.

Props

Prop	Type	Default	Description
type	'single' \| 'multiple'	'single'	Controls whether one or multiple items can be open
defaultValue	string \| string[]	-	Default open item(s)
value	string \| string[]	-	Controlled open state
onValueChange	(value: string \| string[]) => void	-	Called when open state changes
className	string	-	Custom classes

Use with AI

Create a Next.js client component using Storm UI's Accordion. Import: `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@storm-ds/ui'`. Use 'use client' directive. Set type="single" for mutually exclusive sections or type="multiple" for independent items. Use defaultValue (string or array) to control which items open on mount. Use value + onValueChange for controlled state. Each AccordionItem requires a unique value prop. Example: `<Accordion type="single" defaultValue="item-1"><AccordionItem value="item-1"><AccordionTrigger>Title</AccordionTrigger><AccordionContent>Content here</AccordionContent></AccordionItem></Accordion>`

Collapsible

Command