Search

Search components and blocks

Sign in

Dialog

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

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