Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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