Popover
Popover Primitive
Headless, unstyled popover primitive with full positioning control.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
PopoverTriggerPrimitive renders its own button element.
With AsChild
Button receives click behavior via TriggerContext.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
Controlled State
Control the popover's open state from your component code.
State: Closed
Positioning Options
Position the popover on different sides of the trigger.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Included by default
Proper ARIA attributes, Escape key behavior, outside-click close behavior, and focus management.
Keyboard Shortcuts
Navigate and interact with popovers using keyboard.
Open popover
Click / Enter
Close popover
Escape
Navigate to trigger
Tab
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool? | — | Controls whether the popover is open (controlled mode). |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| Side | PopoverSide | Bottom | Which side of the trigger to position the content. |
| Align | PopoverAlign | Center | How to align the content relative to the trigger. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Popover Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration