Shadcn.io is not affiliated with official shadcn/ui
Bottom Drawer with Snap Points
A bottom drawer with snap points at 148px, 355px, and full height allowing users to drag between preset positions
Fixed drawer heights frustrate users—snap points let them choose viewing level intuitively. This React bottom drawer uses Vaul's snapPoints prop with array values 148px for quick preview, 355px for half-screen, and 1 for full height. Built with shadcn/ui Drawer providing magnetic snapping as users drag creating iOS-style sheet behavior. The snap points pattern improves mobile flexibility—perfect for music players, map overlays, product details, or anywhere users need variable content visibility without committing to full-screen or minimal views.
Bottom Drawer with Snap Points preview
Installation
Related Components
Simple Bottom Drawer
Basic drawer without snap points
Scrollable Drawer
Overflow content scrolling
Bottom Drawer Form
Form inputs in drawer
Sheet Component
Side panel alternative
Left Drawer
Drawer from left side
Resizable Panels
User-adjustable layouts
FAQ
Was this page helpful?
Sign in to leave feedback.