Stop Rebuilding UI
Previous: Donut Pill Legend
Next: Donut With Center Total

Stats Donut With Callouts

A segment breakdown donut stats card for React and Next.js with positioned segment callouts, center total, and ChartContainer-wrapped PieChart built with shadcn/ui and Tailwind CSS

Scroll to load preview

Summarize segment distribution at a glance with this donut stats card for React and Next.js. Features a ChartContainer-wrapped Recharts PieChart with a 60/88 inner/outer radius, four absolutely-positioned callout labels at the 12/3/6/9 o'clock positions with short connector lines, a center total with label, tabular-nums percentages, and chart-token-driven segment colours flowing through ChartConfig. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for payment method breakdowns, traffic source reports, device distribution cards, and budget allocation dashboards.

React Stats Block Donut Breakdown

Segment distribution donut

React Stats Block Donut Pill Legend

Donut with pill legend

React Stats Block Donut Center Total

Donut with center KPI

React Stats Block Half Donut

Half donut gauge

React Stats Block Stacked Donut

Stacked donut card

React Stats Block KPI Tile Quad

Quad KPI tile grid

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

Donut Pill Legend

A donut breakdown stats card for React and Next.js with a Recharts PieChart donut, a center total label, and a full-width row of rounded-full pill legend badges with colored dots, segment labels, and tabular values built with shadcn/ui and Tailwind CSS

Donut With Center Total

A segment breakdown donut stats card for React and Next.js with an absolute-positioned NumberFlow center total, ChartContainer-wrapped Recharts PieChart, per-segment var(--chart-N) tokens, and a pill legend below built with shadcn/ui and Tailwind CSS