When to use it

Use Popover when a small, contextual panel should float near its trigger without covering the whole page. It is the right fit for inline filter forms, quick settings, contextual help, and any interaction that should feel anchored to a specific element rather than centered on the screen.

If the content is longer or more complex (multi-step form, cart review, navigation tree), use Dialog or Sheet instead. If the content is just a short text label, Tooltip is simpler.

Slot strategy

Popover has three main pieces:

• Popover is the root. It manages open/close state and accepts open and onOpenChange for controlled usage.
• PopoverTrigger is the element that opens the panel. Use asChild to render your own button.
• PopoverContent is the floating panel. It handles portal rendering and positioning automatically.

PopoverAnchor is available for advanced layouts where the panel should anchor to a different element than the trigger. Most use cases do not need it.

Behavior and theming guidance

The panel slides in from the direction opposite to its side prop and fades in with a subtle zoom. Radix handles collision avoidance automatically, so the panel repositions if it would overflow the viewport.

The default width is w-72 (18rem) from the recipe. Override it with a className on PopoverContent when the content needs more or less space.

For controlled popovers, manage state with open and onOpenChange. This is useful when the panel should close after a form submission or when you need to coordinate it with other UI state.