Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React User Profile Popover
User profile card popover with name, username, and bio using ghost button trigger for social media hover cards built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Profile details shouldn't require navigation—hover cards solve this. This React popover displays user profile with heading name, muted username, and text-xs bio triggered by ghost username button using shadcn/ui. Built with Radix UI primitives and typography hierarchy, profile popovers provide quick context—perfect for social mentions, user lists, comment authors, team directories, or any interface where user information needs visibility without leaving current page or opening full profile.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Popover with Heading
Heading with description structure
Popover with Divider
Sections separated by divider
Card
Profile card component
Avatar
User avatar component
Badge
Status badge
Tooltip
Hover-triggered tooltip