Shadcn.io is not affiliated with official shadcn/ui
Stats Half Donut Card
A half-circle donut breakdown stats card for React and Next.js with a 180-degree PieChart using startAngle and endAngle, var(--chart-N) segment fills, a centered total label, and legend pills below built with shadcn/ui ChartContainer and Tailwind CSS
Preview a segment breakdown with a speedometer feel using this half donut stats card for React and Next.js. Features a ChartContainer-wrapped Recharts PieChart clamped to startAngle 180 and endAngle 0 for a semicircular silhouette, four var(--chart-N) segments with strokeWidth 2, a total label sitting inside the arc, and a four-column legend pill row below showing color dot, label, share percent, and absolute value. Built with TypeScript, ChartContainer from shadcn/ui, Recharts PieChart, ChartTooltipContent, motion/react parent entrance, and Tailwind CSS. Perfect for payment method breakdowns, browser share summaries, device distribution panels, and budget allocation widgets.
Related Components
React Stats Block Donut Breakdown Card
Full donut breakdown
React Stats Block Donut With Center Total
Donut with centered total
React Stats Block Donut Pill Legend
Donut with pill legend row
React Stats Block Donut With Callouts
Donut with side callouts
React Stats Block Stacked Donut Card
Stacked donut layers
React Stats Block Breakdown
Segment distribution card
FAQ
Was this page helpful?
Sign in to leave feedback.
Goal Target With Status
A goal target stats card grid for React and Next.js with per-tile semantic background tints, matching border accents, within/observe/critical statuses, and linear progress bars built with shadcn/ui and Tailwind CSS
Heatmap With Intensity Legend
A weekly activity heatmap stats card for React and Next.js with a 7-row x N-week cell grid, a 5-level emerald intensity ramp, a prominent Low-to-High legend row below the grid, and a streak summary header built with shadcn/ui and Tailwind CSS