Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Simple Bottom Drawer
A React bottom drawer sliding up from screen bottom with header, content area, and footer buttons using shadcn/ui Drawer
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Mobile-first overlays feel native—bottom drawers slide up naturally on touch devices. This React bottom drawer uses shadcn/ui's Drawer component built on Vaul featuring slide-up animation, swipe-to-dismiss gestures, and proper focus trapping. Built with DrawerTrigger, DrawerContent, and DrawerFooter from Radix primitives creating iOS-style sheet behavior. The bottom drawer pattern improves mobile UX—perfect for action sheets, filter panels, quick forms, or anywhere mobile interfaces need modal content without full-screen takeover maintaining context visibility.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Left Drawer
Drawer sliding from left side
Standard Dialog
Centered modal dialog
Sheet Component
Side panel alternative
Bottom Drawer Form
Form inputs in bottom drawer
Snap Points Drawer
Multi-height snap positions
Popover Component
Non-modal floating content