Popover

A small panel beside the button that opened it, for quick changes without leaving the page.

Press Esc or click outside to close.

Fig. 1 Open the share panel. Click outside or press Esc to close it, and the page stays as it was.

When to use it

Use Popover for small changes next to their button: sharing, filters, a quick edit. The page stays usable, so it can close the moment people click away.

If the task needs full attention or has several steps, use a Dialog.

PopoverThis page

The page stays usable.

Press Esc or click outside to close.

Small changes next to their button.

Dialog

The page waits.

Press Esc to close and return to the trigger.

A focused task with a clear end.

Drawer

The page waits, from the edge.

Swipe toward the edge, click outside, or press Esc to close.

Choices on a phone, details beside a list.

Alert Dialog

The page needs an answer.

Clicking outside won’t close it. Choose Cancel or press Esc.

Actions that can’t be undone.

Fig. 2 Four overlays, four jobs. Open each one and notice what stays usable behind it and how it closes.

How it behaves

Use render={<Button />} on PopoverTrigger. Focus moves into the popup and returns to the trigger; Escape and outside presses close it.

PopoverHeader, PopoverTitle, and PopoverDescription name the panel for assistive technology. Content can hold fields and actions, unlike Tooltip.

PopoverContent accepts side, align, and offsets. It scales in from its trigger over 150ms, fits the available height, and opens immediately from the keyboard.

Use Dropdown Menu for a list of actions and Dialog for a task that needs the whole screen.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

popover-example.tsx

The full source is yours to edit once installed:

popover.tsx