Popover
Floating content anchored to a trigger.
Usage
Use the child snippet on Popover.Trigger to
render any element as the anchor. The content portals to <body> and closes on outside click or Esc. Use Popover.Close for an explicit dismiss action inside the panel.
Placement
The side prop sets the preferred placement. The popover
auto-flips when there is not enough space near a viewport edge.
Props
Built on bits-ui — all underlying Bits UI Popover props are forwarded
transparently.
| Prop | Type | Default |
|---|---|---|
Popover.Root — open Controlled open state. | boolean | false |
Popover.Root — onOpenChange Callback fired when open state changes. | (open: boolean) => void | — |
Popover.Trigger — child Render prop that spreads trigger props onto a real element. | Snippet<[{ props: object }]> | — |
Popover.Content — class Extra classes merged onto the content panel. | string | — |
Popover.Content — side Preferred side to render the popover. | 'top' | 'right' | 'bottom' | 'left' | 'bottom' |
Popover.Content — sideOffset Gap in px between trigger and content. | number | 4 |
Popover.Content — align Alignment of the content relative to the trigger. | 'start' | 'center' | 'end' | 'start' |
Popover.Close — child Render prop that spreads close props onto a real element. | Snippet<[{ props: object }]> | — |