Dialog

A glass panel over a dimmed page for the decisions that should stop everything else, centred in a viewport that scrolls when the panel is tall.

Full screen

01Preview

02Installation

npx shadcn@latest add https://aiellie.app/r/dialog.json

03API reference

From the Base UI documentation

Groups all parts of the dialog. Doesn't render its own HTML element.

Props

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
open	boolean	-	Whether the dialog is currently open.
onOpenChange	((open: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => void)	-	Event handler called when the dialog is opened or closed.
actionsRef	React.RefObject<Dialog.Root.Actions \| null>	-	A ref to imperative actions. `unmount`: Manually unmounts the dialog. Call this after any externally controlled closing animation finishes.`close`: Closes the dialog imperatively when called.
defaultTriggerId	string \| null	-	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
disablePointerDismissal	boolean	false	Whether to prevent the dialog from closing on outside presses. For non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it.
handle	Dialog.Handle<Payload>	-	A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method.
modal	boolean \| 'trap-focus'	true	Determines if the dialog enters a modal state when open. `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.`false`: user interaction with the rest of the document is allowed.`'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled. When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so touch screen readers can escape the popup.
onOpenChangeComplete	((open: boolean) => void)	-	Event handler called after any animations complete when the dialog is opened or closed.
triggerId	string \| null	-	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).
children	React.ReactNode \| PayloadChildRenderFunction<Payload>	-	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.