iconiq
—Open GitHub

Popover

Controlled popover built on Radix with portal-based positioning and a spring-driven content panel.

Open in

Open the popover to inspect the controlled open state, portal-based panel, and origin-aware spring animation.

Installation

npx shadcn@latest add @iconiq/popover

Props

Popover

4 props

Standard shadcn-style export: `Popover` is `PopoverPrimitive.Root`, matching what the CLI installs into `components/ui/popover`.
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

Any remaining root props continue to work because the export is the Radix primitive itself.

PopoverTrigger and PopoverAnchor

2 props

These exports are direct aliases of the matching Radix primitives and are used to open the popover or redefine its 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

Because both exports come directly from Radix, they also accept the remaining primitive props for event handling and accessibility wiring.

PopoverContent

5 props

Animated content wrapper built on Radix Popover.Content and AnimatePresence.
openboolean
Required
Controls whether the animated portal branch renders at all. In practice this must mirror the root open state for entry and exit motion to run correctly.
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.

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 and uses the Radix transform-origin CSS variable so the motion scales from the resolved placement.
Entry and exit animation are owned internally, so initial, animate, exit, and transition are not part of the public prop surface.