React Dialog Component Examples

The default Dialog renders a Trigger button that opens a centered panel with a heading and your body content. Pass the title prop on Dialog.Content and the component renders an <h2> styled with text-lg font-semibold at the top of the panel. The close button (an X icon in the top-right corner) is rendered automatically — no extra subcomponent to import.

Because the Dialog source lives in your repo after install, swapping the trigger styling, panel max-width, or the close icon is a local edit. The minimum viable integration is a Trigger plus a Content with a title prop, body content as plain JSX, and an action button. Outside-click closes the dialog because the component listens for clicks on the <dialog> backdrop element.

For dialogs that need to open from outside the trigger — a side menu, a keyboard shortcut, or a route parameter — pass open and onOpenChange to the Dialog root. The component reconciles controlled and uncontrolled modes inside DialogRoot: when open is undefined, internal useState runs; when defined, the prop wins and onOpenChange fires alongside any internal updates.

This pattern is also the right one for confirmation flows where the dialog must close only after an async action resolves. Keep the dialog open while the request is in flight, then call setOpen(false) from the action handler. The Dialog props reference lists every prop and the controlled API matches the names you may already use for shadcn or Radix dialogs.

For dialogs that should close only via an explicit action — a one-step confirmation, a tutorial step, a destructive prompt — pass showClose={false} on Dialog.Content and the X button in the corner disappears. Outside-click and Escape still dismiss the dialog by default, so you may also want to gate those by switching to controlled state and ignoring onOpenChange calls until the user picks an action.

When the close button is hidden, render your own action buttons inside the body. Calling setOpen(false) from any of them closes the dialog the same way the built-in icon does. This pattern fits a "Are you sure?" prompt where the only valid exits are Confirm or Cancel.

Dialogs are the natural surface for short, focused forms — invite a teammate, rename a project, edit a single field. Render an Input inside Dialog.Content, hold the value in useState, and close the dialog from your submit handler after the request resolves. Because the dialog uses the native <dialog> element, focus enters the panel automatically and Escape cancels the form.

Keep the form vertical, leave breathing room above the action row, and place the primary action on the right. The Drivn Button variants — default for the primary action, outline for cancel — give the form the styling rhythm you see in the rest of the app. For multi-step forms or wizards, a Stepper inside the dialog body is a good fit.

Because each Dialog.Content mounts its own <dialog> element and opens it with showModal(), the browser's top-layer stack decides the ordering for you — no portal target to mount, no z-index arithmetic, no stacking-context workaround. Each Dialog root creates a fresh context provider, so useDialog inside the inner content resolves to the inner setOpen; calling it closes only the inner panel and leaves the outer one mounted and open. Both panels render through the same styles.content shell, so a nested dialog looks identical to a standalone one — just painted above its parent.

Reach for nesting sparingly. A single dialog with a multi-step body usually reads better than two stacked panels. The case that earns it is an interruption inside a longer task: a discard confirmation raised from an edit dialog, where confirming should dismiss both at once. The example below shows that shape — the outer Dialog wraps the editor, the inner one handles the confirmation, and its destructive action calls both setters in sequence.