Popover
A React component in Beamline's Overlays category.
A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
Use it for
- Editing one value in place, quick filters, a share link, explaining a number.
Not for
- Plain hints (tooltip).
- A list of actions (dropdown-menu).
- Large or multi-step forms (dialog or sheet).
Anatomy
- Popover
- PopoverTrigger
- PopoverAnchor
- PopoverContent
- PopoverClose
Variants
- flush: false (padded), true (lists and footers reach the edges)
- side: top, right, bottom, left
- align: start, center, end
States
- closed
- open
- closing
Keyboard
- Enter / Space on the trigger opens
- Tab moves inside
- Escape closes and returns focus to the trigger
Motion
Grows from the trigger (scale 0.97 → 1, fade) over --pui-motion-in; leaves over --pui-motion-out. Opens out of its trigger (_shared/overlay.module.css, source morph): the layer starts as the trigger's own box, offset onto it, and grows; the side next to the trigger is there at once so the nearest rows read within the ruled 90 ms, the far side settles by ~200 ms, content fades in over 90 ms; it closes back into the trigger in 180 ms. Until it has grown the press that opened it cannot land on a row. Reduced motion: it appears.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open / defaultOpen / onOpenChange | boolean | — | |
flush | boolean | false | |
side / align / sideOffset | string / number | "bottom" / "center" / 6 | |
style / ref | native props | — | native content div; trigger/anchor/close native refs |
Dependencies
@radix-ui/react-popover
Import
import { PopoverContent, Popover, PopoverTrigger, PopoverAnchor, PopoverClose } from "@/components/popover/popover";Get it
Popover is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Overlays
- Alert Dialog: A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
- Bottom sheet: A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
- Command menu: Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
- Context menu: Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- Dialog: A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- Dropdown menu: A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
- Hover card: A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- Sheet: A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- Toast: Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
- Tooltip: Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.