Shadcn.io is not affiliated with official shadcn/ui
Scrollable Bottom Drawer
A scrollable bottom drawer with max-h-60vh overflow for long content like terms of service without footer buttons
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.
Scrollable Bottom Drawer preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.