Popover
Floating, transient content that stays anchored to a trigger, mirroring Radix Popover’s API while exposing data attributes for animation control.
Anatomy
Import the parts you need and compose them inside
Popover.Root.API Reference
Root
Manages the open state (controlled or uncontrolled) and wires up ids for
aria-labelledby/aria-controls.| Prop | Type | Default |
|---|---|---|
| open | boolean | - |
| defaultOpen | boolean | false |
| onOpenChange | (open: boolean) => void | - |
Anchor
Optional reference element for Floating UI. Use it when the trigger should not be the positioning anchor.
| Prop | Type | Default |
|---|---|---|
| children / element props | HTMLAttributes<HTMLElement> | - |
Trigger
Button that toggles the popover. Receives
aria-haspopup, aria-expanded, and data attributes automatically.| Prop | Type | Default |
|---|---|---|
| type | "button" | "submit" | "reset" | button |
| disabled | boolean | - |
| onClick | React.MouseEventHandler<HTMLButtonElement> | - |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | "" |
Portal
Portals the floating content to
document.body (or a custom container) so that z-index and overflow never get in the way.| Prop | Type | Default |
|---|---|---|
| container | HTMLElement | null | document.body |
| forceMount | boolean | false |
Content
The floating surface. It exposes
data-state for enter/exit animations, wires up role="dialog", exposes all of Radix’s outside-interaction callbacks, and accepts the same positioning knobs (side, align, offsets, collision padding, sticky, etc.).| Prop | Type | Default |
|---|---|---|
| onOpenAutoFocus | function | - |
| onCloseAutoFocus | function | - |
| onEscapeKeyDown | function | - |
| onPointerDownOutside | function | - |
| onFocusOutside | function | - |
| onInteractOutside | function | - |
| forceMount | boolean | false |
| side | "top" | "right" | "bottom" | "left" | "bottom" |
| align | "start" | "center" | "end" | "center" |
| sideOffset | number | 8 |
| alignOffset | number | 0 |
| collisionPadding | number | Partial<{ top: number; right: number; bottom: number; left: number }> | 8 |
| collisionBoundary | Element | Element[] | null | - |
| avoidCollisions | boolean | true |
| sticky | "partial" | "always" | "partial" |
| hideWhenDetached | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
Close
Convenience button that dispatches
setOpen(false) when clicked.| Prop | Type | Default |
|---|---|---|
| type | "button" | "submit" | "reset" | button |
| onClick | React.MouseEventHandler<HTMLButtonElement> | - |