Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Nested Bottom Drawers
Nested bottom drawers with parent and child Drawer components allowing multi-level mobile interactions and progressive disclosure
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Complex mobile workflows need layering—nested drawers provide progressive disclosure without losing context. This React pattern uses shadcn/ui Drawer components nested within each other featuring controlled open state with useState and separate DrawerTrigger for child. Built with Vaul handling stacked z-index and backdrop layering automatically. The nested drawers pattern improves mobile navigation—perfect for drill-down details, multi-step processes, related actions, or anywhere mobile users need deeper context without fullpage transitions preserving parent state.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Bottom Drawer
Single-level drawer
Standard Dialog
Nested dialogs pattern
Snap Points Drawer
Variable height positions
Nested Left Drawer
Nested navigation menu
Bottom Drawer Form
Form in drawer
Popover Component
Nested popovers
Questions you might have
React Bottom Drawer with Snap Points
A bottom drawer with snap points at 148px, 355px, and full height allowing users to drag between preset positions
React Bottom Drawer No Scale Background
A bottom drawer with shouldScaleBackground false preventing default background scaling animation for static backdrop effect