Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Hover Card - Profile with Location
A React hover card showing detailed user profile with location join date icons and expanded bio in wider card layout built with shadcn/ui and Lucide React
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Profile cards cramped into narrow spaces lose important context. This React hover card uses w-80 width showing full bio, location with MapPin icon, and join year with CalendarDays icon—all the context without navigation. Built with shadcn/ui HoverCard and Lucide React icons with larger avatar and username handle, it's perfect for professional networks, remote team directories, or platforms where location and tenure matter for trust and collaboration.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Profile Hover Card
Basic narrow profile hover
Profile with Badge
Profile with status badge
Profile with Follow Button
Profile with action button
Stats Hover Card
Data metrics in hover card
Avatar Component
Profile picture with fallback
User Profile Card
Full profile card layout
Questions you might have
React Hover Card - Profile with Badge
A React hover card showing user profile with avatar in trigger badge for status and join date information built with shadcn/ui components
React Hover Card - Profile with Stats
A React hover card showing user profile with avatar bio and grid of stats separated by divider built with shadcn/ui HoverCard and Separator components