Search

Search components and blocks

Sign in

Dialog

Open page

Big soft corners, a heavy backdrop blur that pulls focus onto the card, and a divider that separates the footer's actions from the body instead of shadcn's boxed, muted-background footer. The card springs in with a gentle overshoot; closing is a fast, spring-free fade so dismissal never lingers.

pnpm dlx shadcn@latest add @ditherui/dialog

Install

$ pnpm dlx shadcn@latest add @ditherui/dialog

Props

openboolean—
defaultOpenbooleanfalse
onOpenChange(open: boolean) => void—
showCloseButtonbooleantrue

Fluid Dialog

ProOpen page

A large-format dialog for content-heavy flows — fixed to 4/5 of the viewport, with a sticky header and footer flanking a scrollable body, so the title and actions stay put while the middle scrolls.

pnpm dlx shadcn@latest add @ditherui/fluid-dialog

Props

FluidDialogContent sizew-4/5 h-4/5 (fixed to viewport)—
FluidDialogHeadershrink-0, border-b — stays put—
FluidDialogBodyflex-1, overflow-y-auto — the scroll region—
FluidDialogFootershrink-0, border-t — stays put—

Center Morph Modal

ProOpen page

A composable modal whose full-size surface unfolds from its exact center toward every edge on open, then folds back the same way on close — via a clip-path inset instead of a scale/translate entrance.

pnpm dlx shadcn@latest add @ditherui/center-morph-dialog

Props

showCloseButtonbooleantrue
classNamestring—

When to use the dialog

Use a dialog when someone must confirm, choose or fill something without leaving the page. This page has a standard dialog, a large fluid dialog with a sticky header and footer, and a center-morph modal that unfolds from its middle.

  • Run the shadcn CLI with the DitherUI dialog name. The component is built on Radix, so focus handling and keyboard dismissal come with it.

Suggested components