Shadcn.io is not affiliated with official shadcn/ui
Stats Stacked Donut Card
A concentric dual-ring donut stats card for React and Next.js with two stacked Pie components at different radii, outer subcategory ring, inner high-level grouping ring, and a pill legend built with shadcn/ui and Tailwind CSS
Visualize a two-level distribution at a glance with this stacked donut stats card for React and Next.js. Features a ChartContainer-wrapped Recharts PieChart with two concentric Pie components - an inner ring for high-level grouping via var(--chart-1) and var(--chart-2) and an outer ring for subcategory breakdown via var(--chart-3) through var(--chart-5), an aspect-square max-h-[220px] container, ChartTooltipContent with hideLabel, and a two-column pill legend below showing colored dots, labels, and tabular-nums absolute values. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart with two Pie components, motion/react parent entrance with useReducedMotion, Lucide React icons, and Tailwind CSS. Perfect for spend by category + vendor dashboards, traffic by region + country widgets, and inventory by warehouse + SKU breakdowns.
Related Components
React Stats Block Donut Breakdown Card
Single-ring donut breakdown
React Stats Block Donut With Center Total
Donut with center total
React Stats Block Donut With Callouts
Donut with callout labels
React Stats Block Donut Pill Legend
Donut with pill legend
React Stats Block Half Donut Card
Half-donut gauge card
React Stats Block Hero Metric With Gauge Ring
Radial gauge around hero metric
FAQ
Was this page helpful?
Sign in to leave feedback.
Stacked Area Chart Breakdown
A stacked area chart stats card for React and Next.js with three cumulative series layered via ChartContainer, var(--chart-1 through 3) gradient fills, a CartesianGrid with horizontal-only dashed lines, and a pill legend below the chart built with shadcn/ui and Tailwind CSS
Stacked Percentage Bar Card
A 100% stacked horizontal bar stats card for React and Next.js with a single thick segmented bar showing proportional distribution, chart-token colored flex segments, a legend with percentages, and a dominant-segment header callout built with shadcn/ui and Tailwind CSS