Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Profile Dropdown with Status
A React profile dropdown with online status indicator and Pro badge showing enhanced user identity with billing and account options
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Status indicators add real-time context—online dots show availability instantly. This React profile dropdown adds green status badge to Avatar trigger and Pro plan badge in the header using shadcn/ui Badge component with Lucide React icons. Built with Radix UI DropdownMenu featuring larger Avatar in label, user tier display, and Billing option alongside Profile and Settings. The status profile pattern improves communication—perfect for collaboration tools, team dashboards, messaging apps, or anywhere user availability and subscription tier need visibility.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Profile Dropdown
Simple profile menu without status badges
Account Settings
Grouped menu with detailed settings sections
Multi-Account Switcher
Switch between multiple user accounts
Badge Component
Status and tier indicators
Avatar Component
Profile picture with status
Button Component
Avatar trigger button
Questions you might have
React Dropdown Menu - Profile Dropdown with Avatar
A React profile dropdown with circular avatar trigger showing user info, Profile, Settings, Help, and Log out options
React Dropdown Menu - Account Settings Dropdown
A React account settings dropdown with grouped menu sections organizing Profile, Email, Notifications, Privacy, and Billing options