dialog

in both modes

the sheet sits on the sheet lift over a scrim: the key at 42 percent in light, black at 60 percent in dark. in light a 1-bit screen prints along its contact edge. in dark there is no screen, only the shadow.

each frame below stands in for the window. the sheet centres in it the way it centres on a screen, and its offsets round to whole pixels, so its edges stay crisp at 1x and 2x.

contact edgedraws where a floating layer meets the page, under its soft lift

try it

this one opens for real, in the page’s mode. escape, the close button or a click on the scrim closes it. switch the mode at the foot of the nav to see the other.

parts

the names and props are shadcn’s, from base-nova, on base ui’s dialog. markup written for shadcn’s dialog works unchanged.

Dialog

the root. pass open and onOpenChange to control it.

DialogTrigger

opens it. hand it a button through render.

DialogContent

the sheet, with its scrim and its close button. showCloseButton={false} drops the button.

DialogHeader

holds DialogTitle, in the subtitle step, and DialogDescription, in the muted ink.

DialogFooter

the actions: stacked on a phone, in a row from 640 px. showCloseButton adds a close.

DialogClose

closes it. hand it a button through render.