Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Bottom Drawer No Scale Background
A bottom drawer with shouldScaleBackground false preventing default background scaling animation for static backdrop effect
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Background scaling feels distracting when users want focus—static backdrops keep context clear. This React bottom drawer uses Vaul's shouldScaleBackground equals false prop disabling default background shrink animation using shadcn/ui Drawer. Built with same components but different visual behavior featuring normal backdrop without scale transform. The no-scale pattern improves clarity—perfect for detail views, content readers, media viewers, or anywhere background scaling feels unnecessary preferring clean transition without transform effects.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Bottom Drawer
Default with background scaling
Snap Points Drawer
Variable height positions
Standard Dialog
Centered modal
Left Drawer
Drawer from left side
Scrollable Drawer
Overflow content
Sheet Component
Side panel overlay
Questions you might have
React Nested Bottom Drawers
Nested bottom drawers with parent and child Drawer components allowing multi-level mobile interactions and progressive disclosure
React Bottom Drawer Event Details
A bottom drawer displaying rich event details with Badge tags, Lucide icons for date, location, and attendees in mobile sheet format