Search

Search components and blocks

Sign in

Fluid Dialog

Pro

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—

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