How to Add a Drawer to a React App

Before installing the Drawer, 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 Drawer 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 Drawer source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes drawer.tsx, and resolves its component dependency by also writing button.tsx, since the Drawer 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 Drawer should live and import it from your UI directory. The compound API is Drawer, Drawer.Trigger, Drawer.Content, Drawer.Close, Drawer.Header, and Drawer.Footer. In the simplest uncontrolled form the trigger opens the panel and the built-in close button, Escape key, and backdrop click all close it, so you write no useState at all. Drawer.Header takes title and description as string props instead of nested components, and anything you nest between the header and footer becomes the scrollable body. Because the Drawer 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 Drawer docs for the full prop table.

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 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 drawers or a server action returns and you want to surface a details panel. Bind open to your state and update it in the callback.

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, and the starting: variant sets where the animation begins. Top and bottom drawers are full-width and h-[400px], translating on the Y axis instead. To restyle globally, open src/components/ui/drawer.tsx and edit the styles object — header, title, description, footer, and close each read from your Tailwind tokens, so changing the colors in theming re-themes every Drawer at once. The styles.sides slice below is copied verbatim from drawer.ts.