Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Navigation with User Profile Sheet
A navigation sheet with user profile card showing avatar, name, and email at top, followed by Dashboard, Projects, Settings, and Sign Out links
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
User context matters in navigation. This React Sheet puts user profile front and center—avatar with initials, name, email in a muted card—before navigation links. Built with shadcn/ui Sheet, Avatar, and Radix UI Dialog primitives, the profile-first pattern keeps users oriented—perfect for authenticated apps, dashboards, SaaS products, user portals, or any interface where knowing who you're signed in as matters for context.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Mobile Menu
Simple navigation without profile
Sidebar Navigation
Grouped navigation sections
User Dropdown
Desktop user menu dropdown
Avatar
User avatar component
Navigation with Search
Menu with search input
Sidebar
Persistent sidebar with profile
Questions you might have
React Nested Navigation Menu Sheet
A multi-level nested navigation sheet with parent categories and indented child links for Products and Resources sections
React Navigation with Search Sheet
A navigation sheet with search input at top for filtering menu items, followed by Home, Products, Services, Blog, and Contact links