Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Social stats buried in profiles make it hard to gauge influence quickly. This React hover card shows posts, followers, and following counts in centered grid below Separator—immediate context for engagement level. Built with shadcn/ui HoverCard and Separator with grid-cols-3 layout and large number formatting, it's perfect for social networks, creator platforms, or community apps where follower counts inform trust and relevance before clicking through.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Profile with Follow Button
Profile with inline follower stats
Simple Profile Hover Card
Basic profile without stats
Simple Stats Hover Card
Data metrics without profile
Stats Grid Card
Card showing multiple statistics
Separator Component
Horizontal divider line
Avatar Component
Profile picture with fallback
Questions you might have
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
React Hover Card - Simple Stats
A React hover card showing metric with icon and detailed breakdown by time period on hover over stat card trigger built with shadcn/ui