Popover
Overlay surfaces carry the elevation; triggers stay calm. Default popovers use the smaller shadow, with an elevated option when the popup must read as the main object.
Basic Popover
Popup Shadow Variants
Use shadow="default" for most popovers, and shadow="elevated" when the popup needs extra separation.
Default (shadow-paper-sm)
Elevated (shadow-paper-md)
Rating Widget
An interactive rating popover with star selection.
Contact Card
A detailed contact popover with multiple actions.
With Framer Motion
Popovers with custom entrance animations using Framer Motion.
API Reference
Popover is built on Radix UI Popover. Use shadow to control the popup surface depth.
PopoverContent
PropTypeDescription
shadow"default" | "elevated"Popup shadow size (default is smaller)sideOffsetnumberDistance from trigger (default: 8)align"start" | "center" | "end"Alignment relative to triggerComposition
Keep triggers flat (no lift) and let the popover carry elevation. Inside the popup, prefer flat/inset controls to respect the elevation budget.