Popover

A floating panel anchored to a trigger. Use for forms, filters, or any inline UI that needs to be contextual but non-blocking.

Anatomy

<Popover>
  <PopoverTrigger asChild>
    <Button>Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    {/* anything */}
  </PopoverContent>
</Popover>

Examples

With form

Filter panel

PopoverContent props

children*

ReactNode

Content rendered inside the popover.

side= 'bottom'

'top' | 'right' | 'bottom' | 'left'

Preferred side to render.

align= 'start'

'start' | 'center' | 'end'

Alignment along the side.

sideOffset= 6

number

Distance in pixels from the trigger.

className

string

Additional classes on the panel.

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the popover.
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Preferred side to render.
align	'start' \| 'center' \| 'end'	'start'	Alignment along the side.
sideOffset	number	6	Distance in pixels from the trigger.
className	string	—	Additional classes on the panel.

PreviousDropdown NextTooltip