Search for a command to run...
A floating panel anchored to a trigger. Holds free-form content (forms, settings, mini-toolbars). Glass surface scales in from the trigger, dismisses on outside click + escape. For menus of actions, prefer `DropdownMenu`; for picker patterns, `Select` or `Combobox`.
Use asChild on the trigger and let your own Button / IconButton carry the visual — the trigger is not a styled wrapper.
For pop-overs with structured copy (title + description above body), compose PopoverHeader, PopoverTitle, and PopoverDescription so the typography stays consistent across the app.
PopoverThe state container. Forwards every Radix Popover.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Fires when the popover opens or closes. |
modal | boolean | false | Trap focus + block outside interaction (rare — usually a Dialog is the right tool then). |
PopoverTriggerThe element that opens the popover. Use asChild to project the behavior onto your own component.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Render the child element directly. Almost always what you want. |
PopoverAnchorOptional. When present, the popover anchors to this element instead of the trigger. Useful for "open a popover next to a different DOM node" patterns (e.g. an inline ? icon that opens a hint anchored to the field above).
PopoverContentThe floating panel. Portaled to the document root. Forwards every Radix Popover.Content prop.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side. Floating-UI flips automatically when the preferred side would clip outside the viewport. |
sideOffset | number | 6 | Gap (px) between trigger and popover. |
align | "start" | "center" | "end" | "center" | Alignment along the cross-axis. |
collisionPadding | number | Padding | 0 | Viewport padding the popover stays inside when colliding with the edge. |
avoidCollisions | boolean | true | Disable to lock to the preferred side even when clipped. |
variant | "default" | "unstyled" | "default" | Use unstyled only when the feature owns the full surface treatment. |
className | string | — | Default is w-72. Override widths for narrow toolbars (w-56) or rich forms (w-96). |
PopoverContent sets origin-(--radix-popover-content-transform-origin) so it scales in from the trigger, not its own center.
PopoverArrowOptional arrow anchored to PopoverContent. It forwards every Radix Popover.Arrow prop; style
its fill to match the content surface.
PopoverHeader / PopoverTitle / PopoverDescriptionOpinionated typography slots for content panels with structured copy.
PopoverHeader — a flex flex-col gap-1 wrapper.PopoverTitle — text-base font-medium text-fg-high.PopoverDescription — text-sm text-fg-mid.Compose them at the top of PopoverContent when the panel needs a name + supporting line; otherwise drop the header entirely.
Use Popover for free-form content — form fields, mini-toolbars, settings clusters. The glass surface gives a sense of layered UI without locking the page like a Dialog.
Pass asChild on PopoverTrigger and let your own Button / IconButton be the trigger. The
trigger should look like a normal control, not a popover wrapper.
Reach for PopoverAnchor when the trigger and the visual anchor diverge — e.g. an inline help
icon (?) inside a label that opens a hint anchored to the input below.
Tune side and sideOffset for tight surfaces. The default (bottom, 6px) is right for most
cases, but a popover near the viewport bottom benefits from side="top".
Use variant="unstyled" only for product-specific teaching surfaces or branded callouts where
the feature supplies the complete background, border, padding, shadow, and text treatment.
Use Popover for a menu of discrete actions. DropdownMenu is the right primitive — it
handles keyboard nav, separators, destructive items, and the same glass treatment.
Use Popover when you actually need a modal. If outside interaction must be blocked (focus trap,
backdrop, "must dismiss to proceed"), use Dialog.
Stuff long-form copy or scrolling content inside a popover. Past ~3 form rows or one paragraph,
switch to Sheet (side panel) or Dialog (centered).