Shadcn.io is not affiliated with official shadcn/ui
Bottom-Sliding Sheet
A sheet sliding from bottom with SheetHeader containing title and description, mimicking mobile bottom sheets and action menus
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.
Bottom-Sliding Sheet preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Privacy Settings Sheet
A privacy settings sheet with checkbox toggles for Public Profile, Show Email, Search Indexing, Activity Status, and destructive Delete Account button
Sheet with Title and Description
A standard right-side sheet with SheetHeader including SheetTitle and SheetDescription for context and accessibility