Modal Dialog
Modal built on native <dialog> with enter / exit animation, focus handling and backdrop dismiss.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
ModalDialogProps
Also accepts all props of Omit<React.ComponentProps<"dialog">, "open" | "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| open* required | boolean | — | — |
| onOpenChange* required | (open: boolean) => void | — | — |
| title* required | React.ReactNode | — | — |
| description | React.ReactNode | — | — |
| footer | React.ReactNode | — | Buttons along the bottom edge |
| size | "sm" | "md" | "lg" | "md" | — |
| dismissible | boolean | true | Clicking the dimmed backdrop closes the dialog |
| showClose | boolean | true | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/modal-dialog.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.