Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Dashboard stats without context leave users guessing. This React hover card shows total views with TrendingUp icon expanding to daily, weekly, and monthly breakdowns on hover—trend context without cluttering the dashboard. Built with shadcn/ui HoverCard with card-styled button trigger and justify-between stat rows, it's perfect for analytics dashboards, admin panels, or metrics displays where space is limited but users need temporal breakdowns on demand.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Stats with Trend
Metrics with percentage change
Stats with Chart
Visual data representation
Profile with Stats
User stats in profile card
Stats Card
Simple metric display card
Button with Icon
Icon and text button layout
Tooltip
Simple hover information
Questions you might have
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
React Hover Card - Growth Stats
A React hover card showing metric with percentage growth indicator expanding to current previous and change comparison built with shadcn/ui