Shadcn.io is not affiliated with official shadcn/ui
Stats Hero Metric With Delta Arrow
A hero metric stats card for React and Next.js with an oversized semantically-colored trend arrow, NumberFlow animated headline number, tabular-nums delta pill, and a clean vertical layout built with shadcn/ui and Tailwind CSS
Highlight a single headline KPI with this hero metric stats card for React and Next.js. Features an oversized size-12 TrendingUp lucide arrow sitting inside a semantic emerald tinted square, a NumberFlow animated text-4xl tabular-nums headline number, a tabular-nums delta pill with comparison period, and a short vs-previous sub-label. Built with TypeScript, NumberFlow animated headline, motion/react parent entrance with useReducedMotion, Lucide React icons, and Tailwind CSS. Perfect for dashboard hero widgets, monthly revenue cards, signup milestone trackers, and at-a-glance KPI summaries.
Related Components
React Stats Block Hero Metric
Classic hero KPI card
React Stats Block Hero Sparkline
Hero metric with trend
React Stats Block Hero Minimal
Minimal headline metric
React Stats Block Hero Split
Hero with split sub-values
React Stats Block Hero Gauge
Hero with radial progress
React Stats Block Comparison
Period comparison delta
FAQ
Was this page helpful?
Sign in to leave feedback.
Hero Metric Tile Row
A hero metric stats card for React and Next.js with a text-4xl NumberFlow animated headline, a semantic delta indicator, and a connected bar of three supporting KPI tiles below split by gap-px borders built with shadcn/ui and Tailwind CSS
Hero Metric With Gauge Ring
A hero metric stats card for React and Next.js with a radial gauge ring surrounding a large NumberFlow percent value, Recharts PieChart with startAngle/endAngle, chart-1 progress arc, muted background ring, and a goal target subtext built with shadcn/ui and Tailwind CSS