Shadcn.io is not affiliated with official shadcn/ui
Bottom Drawer No Scale Background
A bottom drawer with shouldScaleBackground false preventing default background scaling animation for static backdrop effect
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.
Bottom Drawer No Scale Background preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Nested Bottom Drawers
Nested bottom drawers with parent and child Drawer components allowing multi-level mobile interactions and progressive disclosure
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