Dialog

A window over the page, for something that needs answering.

Default

A title, a sentence, and two buttons. The smallest dialog worth having.

The page behind is frozen and hidden from screen readers, focus is trapped inside and returns to whatever opened the dialog, Escape closes, and a dialog taller than the window scrolls inside itself instead of running off the bottom.

Installation

npx philcn@latest add dialog

The file is written into your project. It is yours from then on — change it as you like.

Examples

With a form

Focus lands on the field, and Tab cycles inside the dialog while it is open.

Without the corner cross

For a decision that should be answered rather than dismissed.

Props

Prop	Type	What it does
Dialog.open	boolean	Controlled: you hold whether it is open.
Dialog.defaultOpen	boolean	Uncontrolled: the dialog holds its own state and starts like this.
Dialog.onOpenChange	((open: boolean) => void)	Called whenever it opens or closes.
Dialog.modal	boolean	A modal dialog freezes the page behind it. Turn it off and the page stays usable.
DialogContent.showCloseButton	boolean	The cross in the corner. Escape closes the dialog either way.

Types are read from the library itself, so this table cannot describe an option the code no longer has.

Worth knowing

Give every dialog a DialogTitle: it is what a screen reader announces when the dialog opens.
When a dialog opens over another, the one underneath stays open but is made inert — invisible to screen readers and out of the way of the keyboard.