Drivn vs shadcn/ui — Drawer Component Compared

shadcn/ui's Drawer is a flat namespace of ten named exports — Drawer, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose — and the title row is built by composing <DrawerHeader> around <DrawerTitle> and <DrawerDescription>. Every drawer repeats that scaffold. Drivn collapses the surface into dot notation. Drawer.Trigger opens, Drawer.Content accepts a side prop, and Drawer.Header takes title and description as string props instead of nested components.

The call site goes from ten imports and four nested wrappers to two imports and a flat children block. The full Drivn surface, including the controlled-state hook into Drawer, stays one file you can edit after install. Need a chromeless drawer? Drop Drawer.Header and Drawer.Footer and render plain children inside Drawer.Content.

npx shadcn add drawer writes a wrapper file and adds vaul to your package.json. Vaul is a focused, well-built library — around 30 KB minified — and it earns the line: drag-to-dismiss, snap points, momentum, and iOS body scaling are hard problems solved once. The shadcn file mostly re-exports Vaul's primitives and paints them with the same bg-background and rounded-top utilities you see across the other recipes, with tailwindcss-animate covering the keyframes.

npx drivn add drawer adds nothing to package.json. The Drivn source imports four things — React, the X icon from lucide-react, your local cn helper, and Drivn's Button for the trigger — and the shipped file runs a little over two hundred lines. Everything the panel needs to behave like a modal comes from <dialog> itself, so no portal package, no presence layer, and no animation plugin land in the tree. The tradeoff is honest: no drag gesture, no snap points. When those define the interaction, Vaul is the right tool for that one surface.

shadcn's Drawer animates through Vaul. The library reads pointer events, runs transform math during the drag, and snaps to a closed or open position with a spring-style easing when the gesture ends. The visual result is a bottom sheet that follows your finger, and the timing is tuned for mobile.

Drivn animates with plain CSS transitions on translate, using Tailwind 4's starting: and group-open: variants. Each side gets its own translate utility: translate-x-[100%] group-open:translate-x-[0%] for the right side, mirrored for left, and the equivalent on the y axis for top and bottom. The overlay fades via open:bg-overlay open:backdrop-blur-sm on the same <dialog> element. The transition is 300 ms, ease-out, and CSS-only — no JavaScript timer drives the animation. Copy the styles.sides block from drawer.ts into another component and the same slide-in pattern applies.

shadcn delegates focus trap, Escape, and outside-click handling to Vaul. Vaul covers the edge cases — return focus on close, layered drawers, pointer-down outside detection, body inert on open — at the cost of a runtime dependency tuned for mobile gesture handling.

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. Body overflow is locked to hidden while the drawer is open and restored on close. No portal, no synthetic keydown listener. The behavior is identical to the Dialog component because they share the same primitive.

Pick shadcn's Vaul-backed Drawer when the drawer is a mobile bottom sheet and the drag-to-dismiss gesture is part of the experience. iOS-style sheets that snap to half-height or full-height, photo viewers, and contextual menus on touch devices all benefit from the gesture model Vaul provides. The runtime cost is the price of admission for that feel.

Pick Drivn's Drawer when you want a side-anchored slide-in for desktop or mobile that behaves like a Dialog — settings panels, edit forms, navigation drawers, a notifications tray. Drivn gives you all four sides in one component with one side prop, the API matches every other Drivn compound, and the bundle stays under 2 KB. If you later add a mobile bottom sheet that needs drag gestures, drop in Vaul for that specific surface — the two patterns can coexist without conflict.