Dialog

A React component in Beamline's Overlays category, in the free sample.

A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.

Use it for

• Short focused tasks that need attention without leaving the page: create, invite, rename, import.

Not for

• Long editing beside a list (sheet).
• Blocking destructive confirmations (alert-dialog).
• Information that needs no answer (toast).

Anatomy

• Dialog
• DialogTrigger
• DialogContent (scrim, title, description, body, ×)
• DialogFooter
• DialogClose

Variants

• size: sm 380, md 440, lg 560, xl 720

States

• closed
• open (focus to the first field or autoFocus; Tab trapped)
• working (dismissible={false}: Escape, scrim and × off; primary Button loading keeps its size)
• error (Alert at the top of the body, the field marked invalid with its words, drafts kept, focus moved to the field)
• resolved (the caller closes on success; focus returns to the opener)
• long content (header and footer stay; only the body scrolls)
• closing

Keyboard

• Escape closes (unless dismissible is false)
• Tab is trapped inside
• focus returns to the trigger

Motion

The scrim fades in; the dialog scales 0.96 → 1 over --pui-duration-standard on --pui-ease-enter and leaves over --pui-motion-out. Opens out of whatever opened it (_shared/use-open-from.ts): it starts as the opener's box, offset onto it, grows to its place over the considered duration while its content fades in, and closes back into the opener in 180 ms. Without an opener (a shortcut) the ordinary entrance runs. Reduced motion: it appears.

Props

Dependencies

@radix-ui/react-dialog, lucide-react

Import

import { DialogContent, DialogFooter, Dialog, DialogTrigger, DialogClose } from "@/components/dialog/dialog";

Get it

Dialog 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. Dialog is in the free sample, which costs nothing. 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.
• 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.
• Popover: A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
• 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.