videorc/uiDialog
A modal on the dialog tier of the float glass in four widths, with a body that scrolls between a header and a footer that stay put, and no backdrop blur.
Installation
$ pnpm dlx shadcn@latest add @videorc/dialogUsage
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";<Dialog>
<DialogTrigger render={<Button variant="secondary" />}>
Rename scene…
</DialogTrigger>
<DialogContent size="sm">
<DialogHeader>
<DialogTitle>Rename scene</DialogTitle>
<DialogDescription>The new name shows in the Studio.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
<Button onClick={save}>Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>Size a dialog with size, never a max-w-* or max-h-* of its own.
Anatomy
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<DialogTitle />
<DialogDescription />
</DialogHeader>
<DialogBody />
<DialogFooter>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>Examples
Sizes
sm (384 px) for a rename or one question, md (448 px, the default) for confirmations and short forms, lg (576 px) for forms, pickers and setup, xl (768 px) for review and media.
Scrolling body
A dialog is never taller than the window less 16 px a side. Put long content in a DialogBody: it takes the height the header and footer leave and scrolls, so they stay in view. A dialog without one scrolls whole.
Theming
| Token or attribute | Meaning |
|---|---|
glass-float-dialog | The dialog tier: a step brighter than the popup tier, with its own drop |
rounded-panel, p-5, gap-5 | 12 px corners and the dialog's spacing |
max-h-[calc(100vh-2rem)] | The height rule |
data-size | sm, md, lg or xl |
bg-black/30 | The overlay, with no backdrop blur: blur wedged the compositor on a vibrancy window |
data-open, data-closed | Fades and scales from 0.98 in 100 ms |
dialogContentVariants({ size }) returns the dialog's classes, DIALOG_SURFACE_CLASS the surface alone (for a card on the dialog tier that isn't a dialog), and DIALOG_SIZE_CLASS the widths.
Keyboard
| Key | Action |
|---|---|
Tab, Shift+Tab | Moves through the dialog's controls; focus stays inside |
Escape | Closes the dialog |
Accessibility
DialogTitle names the dialog and DialogDescription describes it. Focus moves to the first control on open (choose another with initialFocus) and back to the trigger on close. The close button reads "Close".
API reference
Every Base UI Dialog prop, plus:
DialogContent
Prop
Type
DialogFooter
Prop
Type
Select
Choose one value from a list. A 28 px trigger (24 px in dense rows) and a list on the popup tier of the float glass; inside a Field, its label names it.
Alert Dialog
The question before something destructive, on the dialog tier. No close button, Cancel has focus on open, and Escape is the safe answer.