Overlays / Dialog

Dialog

<Dialog />Stable

A modal overlay that interrupts the page until dismissed. Use for focused tasks (edit, confirm, share). The header is a TextBlock heading+description pair, the overlay is the shared 20%-black scrim, and actions are real Buttons. Extensible by composition: drop a Table or form into the body slot, split into a rail + main via the sidebar layout, or omit DialogFooter to hide the action bar. For a blocking destructive confirm, use AlertDialog. Built on Radix Dialog.

import { Dialog, DialogTrigger, DialogContent, DialogBody, DialogSidebar, DialogMain, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from "@/components/upnext";

Variants

Every shadcn Dialog pattern on our primitives: a default form, the size scale (now through 4xl), a sidebar layout (the app Sidebar as the rail + DialogMain), an action-bar-free modal, a Table dropped into the content slot, two scroll strategies (sticky header/footer via DialogBody, or whole-panel overflow), a custom-close dialog with no corner ✕, and an icon-header confirmation. DialogTitle/DialogDescription compose TextBlock; footers use ghost + primary Buttons; the scrim is bg-overlay (20% black, no blur).

1{/* Header (TextBlock pair) → body → footer. Footer = ghost Cancel + primary Save. */}
2<Dialog>
3  <DialogTrigger asChild><Button variant="outline">Edit profile</Button></DialogTrigger>
4  <DialogContent>
5    <DialogHeader>
6      <DialogTitle>Edit recruit profile</DialogTitle>
7      <DialogDescription>Update Marcus Reed's position and class year.</DialogDescription>
8    </DialogHeader>
9    {/* …form fields… */}
10    <DialogFooter>
11      <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
12      <Button>Save changes</Button>
13    </DialogFooter>
14  </DialogContent>
15</Dialog>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.