Shadcn Drawer: Touch-Friendly Bottom Sheets for React
The shadcn drawer is a panel that slides in from the edge of the screen, most often the bottom, with the springy, gesture-driven feel of a native mobile sheet. Powered by the Vaul library and styled with Tailwind CSS, it gives React apps a bottom sheet that users can drag, flick, and dismiss exactly like they would in a native app.
Here you will find 6 drawer examples ready to copy and paste, including bottom drawers with forms, scrollable content, nested confirmation steps, and side-anchored variants. All examples ship as TypeScript components and pair naturally with a responsive Next.js layout.
When to use the Shadcn Drawer
Reach for the drawer on mobile whenever a dialog would feel cramped: quick forms, filter panels, share menus, cookie preferences, and cart summaries. The bottom position keeps content within thumb reach, and the drag handle makes dismissal feel physical rather than button-driven.
A common responsive pattern renders a dialog on desktop and this drawer on mobile from one piece of state. For persistent side panels that stay open while users keep working, a sheet is usually the better tool since it does not carry the swipe-to-close gesture.
Design guidelines
- Keep the handle visible: The small bar at the top signals draggability. Removing it hides the primary dismissal gesture.
- Limit height to the task: Let short content produce a short drawer instead of forcing every drawer to near full screen.
- Put actions at the bottom: A footer with the primary button sits closest to the thumb, matching native sheet conventions.
- Scroll inside, not behind: Long content should scroll within the drawer body while the page behind stays locked.
- Avoid deep nesting: One nested drawer for a confirmation step is fine. Stacking more than two levels disorients users.
Why this drawer feels native
- Real drag physics: The panel tracks the finger during a drag and snaps open or closed based on velocity, not just position.
- Background scaling: An optional effect scales the page behind the drawer, mirroring the iOS sheet presentation.
- Snap points: Drawers can rest at multiple heights, letting users peek at content before expanding it fully.
- Dialog-grade accessibility: Focus trapping, Escape handling, and ARIA roles come from the underlying dialog behavior.
Pairing with other components
Drawers commonly open from a button or a mobile toolbar, and hold a short form built from input and select fields with the submit action pinned in the footer. For long option lists inside a drawer, wrap the body in a scroll area so the drag gesture and content scrolling stay separate.
E-commerce screens in our dashboard blocks use the drawer for mobile cart and filter flows, with a nested drawer handling the final confirmation step.
Underlying library support
The drawer is powered by Vaul, Emil Kowalski's drawer library built on top of the Radix Dialog primitive. Vaul contributes the gesture handling, snap points, and background scaling, while the dialog foundation supplies focus management and accessibility semantics.
The shadcn drawer docs cover installation and the direction prop for left, right, and top drawers. Because styling is plain Tailwind CSS in your own component file, adapting radius, handle, and footer layout takes minutes.