Popover Primitive
Headless, unstyled popover primitive with full positioning control.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
PopoverTrigger 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.
Positioning Options
Position the popover on different sides of the trigger.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Keyboard Shortcuts
Navigate and interact with popovers using keyboard.
API Reference
Component properties and parameters.
Popover
Open
Type: bool?
Controls whether the popover is open (controlled mode).
OpenChanged
Type: EventCallback<bool>
Callback invoked when the open state changes.
PopoverContent
Side
Type: "top" | "right" | "bottom" | "left"
Default: "bottom"
Which side of the trigger to position the content.
Align
Type: "start" | "center" | "end"
Default: "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