Drivn vs shadcn/ui — Dialog Component Compared

shadcn/ui's Dialog is a flat namespace of named exports — you import Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, and DialogDescription separately, and the title row is built by composing <DialogHeader> around <DialogTitle> and <DialogDescription>. Every dialog repeats that scaffold. Drivn collapses the surface into dot notation. Dialog.Trigger opens, Dialog.Content accepts a title string, and the heading row is rendered for you when the prop is set. There is no header subcomponent and no description subcomponent — write your body content as plain JSX inside Dialog.Content.

The call site goes from six imports and three nested wrappers to two imports and a flat children block. For a confirmation dialog, that is the difference between fifteen lines and seven. The full Drivn surface, including the controlled-state hook into Dialog, stays one file you can edit after install.

shadcn's Dialog adds @radix-ui/react-dialog to your package.json plus tailwindcss-animate for the entry and exit keyframes. Radix in turn pulls a tree of focus-scope, dismissable-layer, portal, and presence packages. The component itself is a wrapper file — the actual modal logic lives inside the Radix primitive, which means upgrading Radix can change behavior under your feet.

Drivn ships zero runtime UI dependencies. The Dialog source imports React, lucide-react for the close icon, cn from your local utils, and Drivn's Button for the trigger — no Radix, no animate utility plugin. The native <dialog> element provides modal stacking, focus trap, and Escape via showModal(). The full component is one file you own, and bundle analysis shows the dialog adding under 2 KB of gzipped JS to your route.

shadcn animates with tailwindcss-animate utilities driven by Radix's data-[state=open] and data-[state=closed] attributes. The overlay fades, the content scales and fades on enter, and the closed-state utilities run on exit before Radix unmounts. You configure the timing through the plugin's utility classes.

Drivn uses plain CSS transitions on opacity and scale, swapped by a local visible boolean. When the dialog opens, el.showModal() runs, body overflow locks to hidden, then requestAnimationFrame(() => setVisible(true)) flips the classes from opacity-0 scale-95 to opacity-100 scale-100. Closing reverses the flag and a 150 ms timeout calls el.close(). The transition is the standard Tailwind transition-opacity duration-150 and transition-[scale] duration-150 — copy these lines into other components and the same animation feel applies.

shadcn delegates focus trap and Escape handling to Radix's focus-scope and dismissable-layer packages. They cover edge cases — return focus on close, layered dialogs, pointer-down outside detection — at the cost of a few hundred lines of imported runtime.

Drivn leans on the native <dialog> element for the same behaviors. el.showModal() enters the top-layer, traps focus inside, and dispatches a cancel event when Escape is pressed — the component listens for that event and calls setOpen(false) after preventDefault(). Outside-click is a single click handler on the <dialog> that closes when e.target === e.currentTarget. No portal, no synthetic keydown listener. Browser support is universal in evergreen targets; the Dialog component reference covers the full lifecycle.

Both libraries expose the same controlled API: an open boolean and an onOpenChange callback. With shadcn you pass them to the Dialog root from @radix-ui/react-dialog. With Drivn you pass them to the same Dialog root, and the DialogRoot component reconciles controlled and uncontrolled modes — when open is undefined, internal useState drives state; when it is defined, the prop wins and onOpenChange fires alongside any internal updates.

The shape matches by design, so migrating an existing shadcn-driven dialog state machine to Drivn is a search-and-replace on the imports, not a rewrite. The Dialog props reference lists every prop and matches the Radix names where the semantics overlap.