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.

shadcn's Drawer adds vaul to your package.json. Vaul is a focused library — about 30 KB minified — and it handles the parts that make bottom sheets feel native: drag-to-dismiss, snap points, momentum, and body scaling on iOS. The shadcn wrapper file mostly re-exports Vaul's primitives and styles the content with the same bg-background and rounded-top utilities you see across the shadcn recipes.

Drivn ships zero runtime UI dependencies. The Drawer source imports React, lucide-react for the close icon, cn from your local utils, and Drivn's Button for the trigger — no Vaul, 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 drawer adding under 2 KB of gzipped JS to your route. The tradeoff is real: no drag gesture, no snap points. If those are critical to your UX, Vaul is the right pick.

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.