Next.js Drawer 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 drawer. Because the Drawer 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 drawer'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 drawer's open state. The Drawer is marked 'use client' at the top of its source because it tracks open with React state and toggles the native element from an effect. The clean pattern is to keep the Drawer and its trigger inside a small client component, then render that island in an otherwise server-rendered page. The compound API is Drawer, Drawer.Trigger, Drawer.Content, Drawer.Close, Drawer.Header, and Drawer.Footer; 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.

The Content sub-component takes a side prop — 'left', 'right', 'top', or 'bottom', defaulting to 'right'. The value indexes into a styles.sides map that sets the panel's position, size, and starting transform. A right drawer is max-w-[400px] pinned to the right edge with translate-x-[100%]; when the dialog opens, group-open:translate-x-[0%] slides it home. Top and bottom drawers are full-width and h-[400px], translating on the Y axis instead. Because each side is just a class string in the file you own, you can change the width, height, or which edge a drawer uses per instance without touching the component logic. The styles.sides slice below is copied verbatim from drawer.ts.

The Content sub-component renders a real <dialog> element and drives it through one effect: when open becomes true it calls el.showModal() and sets document.body.style.overflow to hidden for scroll lock; when it becomes false it calls el.close() and restores overflow. 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 slide itself needs no JavaScript timers: the overlay class list combines transition-discrete with starting: variants, so the browser animates the translate transform through @starting-style when the <dialog> enters the top layer. The overlay slice below is verbatim from drawer.ts.

The uncontrolled form is enough for a trigger button, but when the drawer'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 details drawer, or where a parent island owns several drawers. Bind open to your useState value and update it inside onOpenChange. For live patterns see the Drawer examples.