Search

Search components and blocks

Sign in

Center Morph Modal

Pro

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