Popover

Floating surface for compact context and secondary actions.

Installation

Props

Popover

Thin wrapper around `PopoverPrimitive.Root` that mirrors the resolved open state into local context so `PopoverContent` can infer presence automatically.

openboolean

Controlled open state on the Radix root when you want React state to own visibility.

defaultOpenboolean

Uncontrolled initial state forwarded to the underlying Radix popover root.

onOpenChange(open: boolean) => void

Called whenever Radix requests a state change through the trigger, outside interaction, or escape handling.

childrenReactNode

Required

Composition surface for the trigger, optional anchor, and content primitives.

Wraps Radix Popover.Root and keeps the resolved open state in local context so PopoverContent can infer presence automatically.

Controlled and uncontrolled usage are both supported.

PopoverTrigger

Light wrapper around the Radix trigger with a larger default hit area when not using asChild.

asChildboolean

Lets you render your own button, link, or wrapper element without adding an extra DOM node.

childrenReactNode

Required

Interactive content rendered by the trigger primitive.

PopoverTrigger is a light wrapper around the Radix trigger with a larger default hit area when not using asChild, while PopoverAnchor remains the Radix positioning anchor.

Both exports still accept the remaining interactive props for event handling and accessibility wiring.

PopoverAnchor

Radix positioning anchor used when the popover should attach to a non-trigger element.

asChildboolean

Lets you render your own anchor element without adding an extra DOM node.

childrenReactNode

Required

Layout content rendered by the anchor primitive.

PopoverAnchor still accepts the remaining primitive props for event handling and accessibility wiring.

PopoverContent

Animated content wrapper built on Radix Popover.Content and AnimatePresence.

openboolean

Accepted for backwards compatibility, but no longer required. The nearest `Popover` root state now drives content presence automatically.

childrenReactNode

Required

Content rendered inside the animated panel.

classNamestring

Merged onto the motion.div panel for local width, spacing, or surface overrides.

align"start" | "center" | "end"

Default center

Forwarded to Radix Popover.Content to control horizontal alignment relative to the trigger or anchor.

sideOffsetnumber

Default 8

Forwarded to Radix Popover.Content to control the gap between the anchor and the floating panel.

collisionPaddingnumber | Partial<Record<Side, number>>

Default 12

Adds a little default breathing room from the viewport edge before collision handling nudges the popover inward.

Remaining Radix content props are forwarded through to PopoverPrimitive.Content, including side, collisionPadding, onEscapeKeyDown, and accessibility props.

The component always renders inside a Radix portal, reads the resolved placement for direction-aware motion, and uses the Radix transform-origin CSS variable so scaling stays anchored to the trigger.

The panel ships without drop shadow so the surface stays flat against the page.

Content size changes animate while the popover is open, so progressive disclosure and copy swaps do not snap abruptly.

Entry and exit animation are owned internally, so Motion-specific props such as initial, animate, exit, and transition are not part of the public prop surface.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-popover, motion.

Uses the dedicated Radix Popover primitive for root, trigger, anchor, content, and portal ownership.

Preserves the same side-aware panel motion and size-aware content animation as the core popover.

The generated registry file is /r/r-popover.json.