How to Add a Dialog to a React App

Before installing the Dialog, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Dialog composes Drivn's own Button for its trigger and imports the X icon from lucide-react for the close control — the CLI resolves both and adds lucide-react to your package.json during install if it is missing.

Run the CLI from your project root to add the Dialog source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes dialog.tsx, and resolves its component dependency by also writing button.tsx, since the Dialog imports Button directly for its trigger. It adds lucide-react to your package.json if it is not already present. No global config file is created — both files are TypeScript you edit like any other component. Confirm they landed in your editor, then commit them. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the flags for targeting a custom location during install.

Open the page where the Dialog should live and import it from your UI directory. The compound API is three parts — Dialog, Dialog.Trigger, and Dialog.Content. In the simplest uncontrolled form the trigger opens the modal and the built-in close button and Escape key close it, so you write no useState at all. Dialog.Content accepts a title string that renders the heading; anything you nest inside becomes the body. Because the Dialog holds open state with useState and drives the native <dialog> element from an effect, the source begins with 'use client' — in a Next.js App Router project keep this in a small client component and render it as an island. See the Dialog docs for the full prop table.

The uncontrolled form is enough for a confirm button, but when the dialog's open state depends on app logic — opening it after a mutation resolves, or closing it from a keyboard shortcut — pass open and onOpenChange to the root. The source reads const open = controlled ?? uncontrolled, so supplying open switches the component into controlled mode and your useState value becomes the single source of truth. Update it inside onOpenChange to keep the trigger, backdrop, and Escape key in sync. This is the pattern to reach for when a parent owns several dialogs or a server action returns and you want to surface a success modal.

The Content sub-component takes three presentation props. title renders an <h2> heading; omit it for a bare dialog. showClose defaults to true and renders the round close button in the top-right corner — pass showClose={false} for flows where dismissal should be deliberate, like a destructive confirmation. className merges onto the panel via cn, so you can widen it past the default max-w-md per instance. To restyle globally, open src/components/ui/dialog.tsx and edit the styles object near the top — content sets the panel (bg-card border border-border rounded-[20px]) and base sets the backdrop (bg-overlay backdrop-blur-sm). Every class reads from your Tailwind tokens, so editing the colors in globals re-themes every Dialog at once.