Docs/Collapsible

Collapsible

A section that can be expanded/collapsed. Building block for accordions.

Usage

tsx

1import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@storm-ds/ui'
2
3<Collapsible>
4  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
5  <CollapsibleContent open={isOpen}>
6    <p>Collapsible content</p>
7  </CollapsibleContent>
8</Collapsible>

Default

Props

Prop	Type	Default	Description
open	boolean	-	Controls visibility (CollapsibleContent)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Collapsible. Import: `import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@storm-ds/ui'`. Use `open` prop on CollapsibleContent to control visibility. Client component needed for state. Example: `<Collapsible><CollapsibleTrigger onClick={() => setOpen(!open)}>Toggle</CollapsibleTrigger><CollapsibleContent open={open}>Content</CollapsibleContent></Collapsible>`

Popover

Accordion