Next.js Dialog for the App Router

Drivn installs through a small CLI that writes the component source directly into your repository — there is no runtime npm package to version-lock. From the root of your Next.js 16 project run npx drivn add dialog. Because the Dialog imports Drivn's Button for its trigger, the CLI pulls that file in too, and adds lucide-react to your package.json if it is missing — that is the dialog's only third-party dependency, used for the close icon. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own both files; future Drivn releases will not overwrite them. Commit the change for a clean baseline before customizing.

An App Router page is a server component by default, so it cannot hold the dialog's open state. The Dialog is marked 'use client' at the top of its source because it tracks open with React state and toggles the native element with hooks. The clean pattern is to keep the Dialog and its trigger inside a small client component, then render that island in an otherwise server-rendered page. The compound API is three parts — Dialog, Dialog.Trigger, and Dialog.Content — and in the simplest uncontrolled form the trigger manages open state for you, so you write no useState at all. No dynamic() import and no SSR-disable flag are needed — Next.js inserts the client boundary at the import. See the installation guide for project setup.

Unlike most React modals, the Drivn Dialog does not portal into document.body. The Content sub-component renders a real <dialog> element and drives it through one effect: when open becomes true it calls el.showModal(), sets document.body.style.overflow to hidden for scroll lock, and flips a visible flag inside requestAnimationFrame so the panel transitions in. Escape is wired through the native cancel event — the effect calls e.preventDefault() and setOpen(false) so React stays the source of truth. A backdrop click closes too, because the outer onClick checks e.target === e.currentTarget. The relevant styles slice below is copied verbatim from dialog.ts — edit these classes to restyle the overlay or panel.

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 state becomes the single source of truth. This is the pattern to reach for in App Router projects where a server action returns and you want to surface a success dialog, or where a parent island owns several dialogs. Bind open to your useState value and update it inside onOpenChange.

The Content sub-component takes three presentation props. title renders an <h2> heading at the top of the panel; 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 or change its padding per instance without editing the source. For a global restyle, edit the styles.content line in dialog.tsx — every class reads from your Tailwind tokens, so changing the colors in globals re-themes every Dialog at once. See Drivn vs shadcn/ui Dialog for how this compares.