Shadcn.io is not affiliated with official shadcn/ui
Simple Bottom Drawer
A React bottom drawer sliding up from screen bottom with header, content area, and footer buttons using shadcn/ui Drawer
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.
Simple Bottom Drawer preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.