Popover
A floating surface anchored to a trigger — a dense menu, a padded box, or a full header/body/footer form.
An anchored floating surface with three shapes: the default dense menu shell, a padded box for a small form, and a full header/body/footer composition for something closer to an inline dialog. If the contents are purely a list of actions, use a DropdownMenu — it brings the menu keyboard semantics with it.
Padded box
padded gives the content room to breathe — the right shape for two or three fields.
Placement
side and align set the preferred position; avoidCollisions lets it flip when there is not room. Prefer align="start" for a trigger at the left of its row, so the surface does not drift away from what opened it.
Props
Popover
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | — | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Called whenever it opens or closes. |
PopoverContent
| Prop | Type | Default | Description |
|---|---|---|---|
padded | boolean | false | Switches from the dense menu shell to a padded box. |
side | FloatingSide | — | Preferred side: top, right, bottom or left. |
align | FloatingAlign | — | start, center or end. |
sideOffset | number | — | Gap between trigger and surface. |
avoidCollisions | boolean | — | Allows flipping when there is not room on the preferred side. |
closeOnInteractOutside | boolean | — | Whether a click outside dismisses it. |