Popover
Floating content anchored to a trigger element. Non-modal by default — clicks outside dismiss it. Use for inline forms, info, or quick actions.
Inline form
Info card
Right-anchored
Installation
pnpm
pnpm dlx @hex-core/cli add popoverAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state |
onOpenChange | function | — | Callback on open state change: (open: boolean) => void |
modal | boolean | false | When true, content outside the popover is inert |
AI Guidance
When to use
Use for inline forms, quick settings, info panels, or color pickers. Anchored to a trigger, non-modal, dismisses on outside click.
When not to use
Don't use for critical tasks that interrupt (use Dialog). Don't use for hover-only info (use Tooltip or HoverCard). Don't use for menu actions (use DropdownMenu).
Common mistakes
- Using Popover when the user must address the content (should be Dialog)
- Missing asChild on PopoverTrigger when using a styled Button
- Popover content too wide — keep it focused and compact
Accessibility
Radix manages focus, aria-expanded on the trigger, and closes on Escape. Content is portalled to body so stacking contexts don't clip it.
Related components
Token budget: 400