Popover

uistable

Popover — extracted 1:1 from WEM-App.

npx shadcn add @krawma/popover

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

openclosed

Keyboard

EscapeTab

Depends on

utils

Purpose

A non-modal floating panel anchored to a trigger, holding interactive content (small forms, filters, pickers). For a list of actions use dropdown-menu; for a blocking task use dialog; for hover previews use hover-card.

Anatomy

Popover › PopoverTrigger › PopoverContent. Plus PopoverAnchor, PopoverHeader/PopoverTitle/PopoverDescription (WEM-App additions).

Style

No variants — portalled token-backed surface positioned relative to the trigger (width/side/align via props).

Behavior & functionality

Opens on trigger click (controlled or uncontrolled). Non-modal: the page stays interactive; closes on outside click and Escape.

Accessibility

Focus moves into the panel on open and returns to the trigger on close; Escape closes; Tab cycles within.
Give the trigger an accessible name; title the panel if it's a mini-form.

Do / Don't

✅ Use for compact contextual forms/filters.
❌ Don't use for critical, must-acknowledge flows — use dialog/alert-dialog.