Stop Rebuilding UI
Previous: Hero Metric Minimal
Next: Hero Metric Tile Row

Stats Hero Metric Split Subvalues

A hero metric stats card for React and Next.js with a NumberFlow animated headline, delta arrow, and a three-column grid of sub-value breakdowns built with shadcn/ui and Tailwind CSS

Scroll to load preview

Surface a single headline metric with supporting dimensions using this hero metric split stats card for React and Next.js. Features a NumberFlow-animated currency value inside a min-w-[160px] layout-stable container, a semantic delta arrow pill, a three-column grid of smaller sub-value tiles separated by thin divide-x lines, and a subtle eyebrow label. Built with TypeScript, NumberFlow from @number-flow/react, motion/react parent entrance, Lucide React TrendingUp icon, and Tailwind CSS. Perfect for MRR dashboards, ARR overview pages, campaign performance hero tiles, and fundraising totals.

React Stats Block Hero Metric Card

Classic single hero metric

React Stats Block Hero Metric Minimal

Minimal hero metric

React Stats Block Hero Metric Delta

Hero with delta arrow

React Stats Block Hero Metric Sparkline

Hero with sparkline

React Stats Block Hero Metric Gauge

Hero with gauge ring

React Stats Block Hero Metric Tile Row

Hero tile row grid

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

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

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