Stop Rebuilding UI
Previous: Hero Metric With Delta Arrow
Next: Hero Metric With Sparkline

Stats 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

Scroll to load preview

Visualize goal attainment with this hero metric stats card for React and Next.js that wraps a radial gauge ring around a large NumberFlow percent value. Features a ChartContainer-wrapped Recharts PieChart rendering two Pie components - a full muted background ring and a var(--chart-1) progress arc using startAngle 90 and endAngle based on the percent, an aspect-square max-h-[180px] container, a layout-stable min-w-[120px] NumberFlow with isAnimated guard, and subtext showing the target value plus a semantic delta. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart with two Pie components, NumberFlow, motion/react parent entrance with useReducedMotion, Lucide React TrendingUp icons, and Tailwind CSS. Perfect for OKR dashboards, goal trackers, sales quota widgets, and onboarding completion cards.

React Stats Block Hero Metric Card

Single hero metric card

React Stats Block Hero Metric With Sparkline

Hero metric with sparkline

React Stats Block Hero Metric With Delta Arrow

Hero metric with delta arrow

React Stats Block Goal Ring Tiles

Goal ring tile grid

React Stats Block Half Donut Card

Half-donut gauge

React Stats Block Comparison Dual Gauge

Dual gauge comparison

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

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

Hero Metric With Sparkline

A compact hero metric stats card for React and Next.js with a NumberFlow animated text-4xl headline value, a semantic delta row, and a full-width ChartContainer sparkline AreaChart at the bottom built with shadcn/ui and Tailwind CSS