Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Bottom-Sliding Sheet
A sheet sliding from bottom with SheetHeader containing title and description, mimicking mobile bottom sheets and action menus
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Bottom sheets feel native on mobile—that familiar swipe-up gesture. This React Sheet slides from bottom using side equals bottom prop with shadcn/ui Sheet and Radix UI Dialog primitives. The bottom-origin pattern matches mobile conventions—perfect for mobile-first apps, action menus, filter panels, quick settings, share sheets, or any interface where bottom-anchored overlays feel more natural than side panels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Left-Sided Sheet
Slides from left edge
Top-Sliding Sheet
Slides from top edge
Standard Sheet
Default right-side sheet
Mobile Menu
Navigation from left
Drawer
Alternative bottom panel
Dialog
Centered modal overlay
Questions you might have
React Privacy Settings Sheet
A privacy settings sheet with checkbox toggles for Public Profile, Show Email, Search Indexing, Activity Status, and destructive Delete Account button
React Sheet with Title and Description
A standard right-side sheet with SheetHeader including SheetTitle and SheetDescription for context and accessibility