Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Break down a total into segments with this donut stats card with pill legend for React and Next.js. Features a ChartContainer-wrapped Recharts PieChart with innerRadius 60 outerRadius 95 donut ring, chart data colored via var(--chart-1) through var(--chart-5), a centered total label absolutely positioned inside the ring, ChartTooltipContent for segment hover, and a full-width row of rounded-full pill badges below with colored dots, segment names, and tabular values. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for traffic source breakdowns, payment method distributions, device type splits, and budget category allocations.
Related Components
React Stats Block Donut Breakdown Card
Classic donut breakdown card
React Stats Block Donut With Center Total
Donut with center total label
React Stats Block Donut With Callouts
Donut with external callouts
React Stats Block Half Donut Card
Half donut gauge card
React Stats Block Stacked Donut Card
Nested stacked donut rings
React Stats Block Bar Chart Horizontal Card
Horizontal categorical bars
FAQ
Was this page helpful?
Sign in to leave feedback.
Donut Breakdown Card
A donut breakdown stats card for React and Next.js with a ChartContainer-wrapped PieChart, centered total, side legend with dots, percentages, and absolute values built with shadcn/ui and Tailwind CSS
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