Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Scrollable Bottom Drawer
A scrollable bottom drawer with max-h-60vh overflow for long content like terms of service without footer buttons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Long content in fixed-height drawers frustrates mobile users—scrollable drawers adapt to content length naturally. This React bottom drawer uses max-h-60vh with overflow-y-auto creating scrollable terms content using shadcn/ui Drawer and Vaul. Built without DrawerFooter allowing full vertical space for reading featuring space-y-4 paragraph layout. The scrollable pattern improves mobile reading—perfect for privacy policies, legal documents, changelogs, or anywhere mobile users need to read lengthy content in drawer format without awkward fixed heights.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Bottom Drawer
Basic drawer with footer
Scrollable Dialog
Dialog with ScrollArea
Snap Points Drawer
Multi-height positions
ScrollArea Component
Custom scrollbar container
Bottom Drawer Form
Form inputs in drawer
Terms Dialog
Scroll-to-accept pattern
Questions you might have
React Bottom Drawer with Form
A bottom drawer with form inputs for name, email, and phone using shadcn/ui Input and Label for mobile-friendly data entry
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