Popover
Accessible popover component with intelligent positioning and full theme integration. Pro version adds style variants, sizing, corner radius, shadow depth, backdrop effects, and structured Header/Footer/Separator sub-components.
Pro features
What the Pro version adds to this component.
Style Variants
Default, destructive, outline, and subtle surface variants for any context
Sizing & Radius
Small, default, and large sizes with five corner-radius options
Backdrop & Overlay
Optional backdrop blur and a dimmed overlay behind the content
Structured Layout
PopoverHeader, PopoverFooter, and PopoverSeparator sub-components
Smart Positioning
Built-in collision padding and PopoverAnchor for custom anchoring
Interaction Control
closeOnInteractOutside and six shadow depths for fine-tuned behavior
Installation
Install via CLI
npx @moontra/moonui-cli add popoverUsage
Basic Usage
Pro Usage
Examples
Placement (side)
The `side` prop determines which edge the content opens on relative to the trigger. Radix stamps a `data-side` attribute for every direction, and the entry animation depends on it.