Components
Dialog
Centered modal on the raised surface. Derived from Atlas sheet plus alert-dialog placement.
A centered modal. Atlas does not export a plain Dialog — only sheet (side panel on
@radix-ui/react-dialog) and alert-dialog (centered confirm). This is that dialog
primitive: sheet's Radix wiring, alert-dialog's placement, dry tokens.
The overlay uses bg-contrast/50 (effect ink) instead of Atlas's bg-black/50. Content
sits on bg-surface-raised with shadow-lg. Enter/exit is a fade-plus-scale timed on
--duration-base; reduced motion drops it. Focus moves in on open, restores to the trigger
on close, Esc dismisses. The close control is 44px on coarse pointers.
Usage
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
<Dialog>
<DialogTrigger asChild>
<Button>Open</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Supporting copy.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>Sheet (the side panel) is a sibling: same Radix primitive, edge placement.
Install
shadcn add @gesso/dialog