Shadcn.io is not affiliated with official shadcn/ui
Financial Stats
A React hover card showing financial metrics with income and expense breakdown calculating net profit with arrow indicators built with shadcn/ui
Revenue numbers without income-expense breakdown hide the real story. This React hover card shows 45.2k monthly revenue expanding to Income with green ArrowUp and Expenses with red ArrowDown revealing net profit calculation on hover. Built with shadcn/ui HoverCard and DollarSign icon with bg-muted row highlighting, it's perfect for financial dashboards, accounting apps, or business analytics where understanding profit margins requires seeing both sides of the equation.
Financial Stats preview
Installation
Related Components
Growth Stats Hover Card
Metrics with percentage change
Simple Stats Hover Card
Basic metric with time breakdown
User Stats Hover Card
Metrics with grid layout
Stats Card
Simple metric display card
Badge Variants
Status indicators with colors
Separator Component
Horizontal divider line
FAQ
Was this page helpful?
Sign in to leave feedback.
Simple Profile Hover Card
A React hover card showing user profile with avatar name and bio on username link hover built with shadcn/ui HoverCard and Avatar components
Growth Stats
A React hover card showing metric with percentage growth indicator expanding to current previous and change comparison built with shadcn/ui