Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Left-Sided Sheet
A left-side sheet sliding from left edge with SheetHeader, commonly used for mobile navigation menus and hamburger patterns
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Left side means navigation—that's what users expect. This React Sheet slides from left using side equals left prop with shadcn/ui Sheet and Radix UI Dialog primitives. The left-origin pattern follows hamburger menu conventions—perfect for mobile navigation, sidebar menus, app drawers, filter panels, secondary navigation, or any interface where left-aligned slide-in panels match user expectations from native mobile apps.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Mobile Menu
Navigation from left with links
Standard Sheet
Default right-side sheet
Bottom-Sliding Sheet
Slides from bottom edge
Sidebar Navigation
Grouped navigation from left
Sidebar
Persistent sidebar navigation
Drawer
Bottom drawer alternative