Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Visualize segment composition with this donut breakdown stats card for React and Next.js. Features a ChartContainer-wrapped Recharts PieChart using var(--chart-1) through var(--chart-5) via ChartConfig, an aspect-square chart body capped at 220px, a centered total overlay, ChartTooltipContent hideLabel tooltip, and a right-aligned legend listing each segment with a color dot, label, percentage, and absolute value. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart, motion/react parent entrance, and Tailwind CSS. Perfect for payment method dashboards, traffic source breakdowns, browser share reports, and plan distribution views.
Related Components
React Stats Block Donut Center Total
Donut with centered total
React Stats Block Donut Callouts
Donut with callout labels
React Stats Block Donut Pill Legend
Donut with pill legend
React Stats Block Half Donut
Half donut gauge card
React Stats Block Stacked Donut
Stacked donut composition
React Stats Block Bar Chart Stacked
Stacked bar breakdown
FAQ
Was this page helpful?
Sign in to leave feedback.
Connected Kpi Bar With Trends
A connected KPI bar stats card for React and Next.js with four unified tiles, per-tile ChartContainer-wrapped inline sparklines, trend-keyed gradient fills, and tabular-nums values built with shadcn/ui and Tailwind CSS
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