Docs/Popover

Popover

Floating content panel anchored to a trigger element. Building block for select, date picker, etc.

Usage

tsx

1import { Popover, PopoverTrigger, PopoverContent } from '@storm-ds/ui'
2
3<Popover>
4  <PopoverTrigger>
5    <Button variant="outline">Open</Button>
6  </PopoverTrigger>
7  <PopoverContent>
8    <p>Popover content</p>
9  </PopoverContent>
10</Popover>

Default

Alignment

Props

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'center'	Horizontal alignment (PopoverContent)
side	'top' \| 'bottom'	'bottom'	Vertical position (PopoverContent)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Popover. Import: `import { Popover, PopoverTrigger, PopoverContent } from '@storm-ds/ui'`. Wrap trigger and content. PopoverContent props: align (start/center/end), side (top/bottom). Default width is w-72, override with className. Server component compatible for structure, client for open/close state. Example: `<Popover><PopoverTrigger><Button>Open</Button></PopoverTrigger><PopoverContent>Content</PopoverContent></Popover>`

Drawer

Collapsible