Shadcn.io is not affiliated with official shadcn/ui
Stats Concentric Rings Card
A concentric activity rings stats card for React and Next.js with three SVG progress rings inspired by Apple Watch, stroke-dasharray animated arcs, NumberFlow animated center value, and semantic ring colors built with shadcn/ui and Tailwind CSS
Track multi-metric progress with this concentric rings stats card for React and Next.js. Features three SVG circle progress arcs rendered concentrically with stroke-dasharray for the filled portion and stroke-dashoffset for the gap, outer ring in var(--chart-1), middle ring in var(--chart-2), inner ring in var(--chart-5), a NumberFlow animated best metric in the center, and three metric detail rows below with matching color dots. Built with TypeScript, pure SVG circles, NumberFlow, motion/react parent entrance with useReducedMotion, and Tailwind CSS. Perfect for fitness activity dashboards, multi-goal tracking widgets, OKR completion overviews, and project milestone rings.
Related Components
React Stats Block Goal Ring Tiles
Radial goal tile grid
React Stats Block Hero Gauge Ring
Radial gauge ring percent
React Stats Block Half Donut
Semicircle gauge card
React Stats Block Donut Center Total
Donut with center total
React Stats Block Progress List
Linear goal progress bars
React Stats Block Hero Metric
Single headline KPI card
FAQ
Was this page helpful?
Sign in to leave feedback.
Comparison With Sparklines
A period comparison stats card for React and Next.js with two side-by-side columns, each showing a NumberFlow animated value and a 48px ChartContainer sparkline, separated by a vertical divider and a delta callout built with shadcn/ui and Tailwind CSS
Connected Kpi Bar
A single-row connected KPI bar stats card for React and Next.js with four unified tiles sharing a border, tabular-nums values, and semantic delta pills built with shadcn/ui and Tailwind CSS