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.
Unlock Advanced Popover Features
Get access to powerful pro features that enhance your popover component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
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.