iconiq
—Open GitHub

Popover

Floating surface for compact context and secondary actions.

Open the popover to compare the same surface, state model, and motion on different headless primitives.

Installation

npx shadcn@latest add @iconiq/r-popover

Props

Popover

4 props

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.

Notes

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 and PopoverAnchor

2 props

`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.
asChildboolean
Lets you render your own button, link, or wrapper element without adding an extra DOM node.
childrenReactNode
Required
Interactive or layout content rendered by the trigger or anchor primitive.

Notes

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.

PopoverContent

6 props

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"
Defaultcenter
Forwarded to Radix Popover.Content to control horizontal alignment relative to the trigger or anchor.
sideOffsetnumber
Default8
Forwarded to Radix Popover.Content to control the gap between the anchor and the floating panel.
collisionPaddingnumber | Partial<Record<Side, number>>
Default12
Adds a little default breathing room from the viewport edge before collision handling nudges the popover inward.

Notes

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.