Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Break down spend by channel with this donut stats card for React and Next.js. Features a ChartContainer-wrapped Recharts PieChart at aspect-square with innerRadius 62 and outerRadius 92, an absolute-positioned NumberFlow center total in USD with layout-stable min-width, per-segment var(--chart-1..4) tokens wired through ChartConfig, and a four-row legend pill list below showing color dot, label, percentage, and absolute value. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart, NumberFlow from @number-flow/react, motion/react parent entrance, and Tailwind CSS. Perfect for marketing budget allocations, traffic source breakdowns, payment method distributions, and infrastructure cost reports.
Related Components
React Stats Block Donut Breakdown
Segment distribution donut
React Stats Block Donut Pill Legend
Donut with pill legend
React Stats Block Donut Callouts
Donut with label callouts
React Stats Block Half Donut
Half donut gauge card
React Stats Block Stacked Donut
Multi-ring donut card
React Stats Block Breakdown
Segment breakdown card
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Dumbbell Chart Card
A dumbbell chart stats card for React and Next.js with horizontal rows showing two connected dots per category representing start and end values, a connecting line between dots, delta labels, and semantic direction colors built with shadcn/ui and Tailwind CSS