Shadcn.io is not affiliated with official shadcn/ui
Stats Hero Metric Card
A single headline hero metric stats card for React and Next.js with a NumberFlow animated text-4xl value, isAnimated mount guard, min-w-[180px] layout stability, and a trend delta with arrow icon built with shadcn/ui and Tailwind CSS
Anchor your dashboard with a single headline metric using this hero metric card for React and Next.js. Features a NumberFlow animated text-4xl font-semibold tabular-nums value with min-w-[180px] layout stability, an isAnimated requestAnimationFrame mount guard that suppresses the 0 to target flash, an eyebrow label, a subtitle timeframe, and a semantic trend delta with a TrendingUp arrow icon in emerald. Built with TypeScript, NumberFlow for animated values, motion/react parent entrance with useReducedMotion, Lucide React icons, and Tailwind CSS. Perfect for SaaS MAU hero tiles, revenue headline widgets, subscription dashboard anchors, and analytics top-line summaries.
Related Components
React Stats Block Hero Metric Minimal
Minimal hero metric card
React Stats Block Hero Metric With Sparkline
Hero metric with trailing sparkline
React Stats Block Hero Metric With Delta Arrow
Hero metric with delta arrow
React Stats Block Hero Metric Split Subvalues
Hero metric with split subvalues
React Stats Block Hero Metric With Gauge Ring
Hero metric with gauge ring
React Stats Block Hero Metric Tile Row
Hero metric tile row
FAQ
Was this page helpful?
Sign in to leave feedback.
Heatmap With Intensity Legend
A weekly activity heatmap stats card for React and Next.js with a 7-row x N-week cell grid, a 5-level emerald intensity ramp, a prominent Low-to-High legend row below the grid, and a streak summary header built with shadcn/ui and Tailwind CSS
Hero Metric Minimal
An ultra-minimal hero metric stats card for React and Next.js with a tiny uppercase label, a huge NumberFlow value, and a subtle delta row — no chart, no chrome, built with shadcn/ui and Tailwind CSS