# Shadcn Pie Chart blocks

> Donut cards for share of a whole, with source rows, version drill-down and period switches, plus a budget rose for spend against budget.

- Type: Pro blocks (Charts)
- Page: https://web.dev.reui.io/blocks/chart/pie-chart
- Blocks: 3
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A share of a total split across a few sources or browsers around a donut
- A donut with the total in its center and a row per segment under a period switch
- Spend per category against its budget on a rose, where an overspend breaks a dashed ring

## When not to use

- A single figure measured against a target on an arc gauge: use the [Radial Chart blocks](https://web.dev.reui.io/blocks/chart/radial-chart.md)
- Shares across more than a handful of categories that need exact comparison: use the [Bar Chart blocks](https://web.dev.reui.io/blocks/chart/bar-chart.md)

## Agent notes

- chart-13 and chart-27 draw a recharts `Pie` donut whose `innerRadius` sets the hole; chart-54 draws its rose as its own SVG in budget-rose.tsx

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 3 of 3 blocks
- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 2 of 3 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 2 of 3 blocks (the docs follow the latest Motion, with no React API break since v12)

## Blocks

- [Inflows by Source](https://web.dev.reui.io/blocks/chart/pie-chart/chart-13.md): Capital inflows donut card with a period switch, change on the period before and a source breakdown. Best for one capital inflows card: total and change on the period before over a ring of tracked sources, with per source change.
- [Browser Usage](https://web.dev.reui.io/blocks/chart/pie-chart/chart-27.md): Browser usage donut with version drill-down, support line flags and a breakdown table. Best for browser share on a donut beside its breakdown table, opening any browser into its versions and flagging those under a support line.
- [Cloud Spend](https://web.dev.reui.io/blocks/chart/pie-chart/chart-54.md): Budget rose of cloud spend by category with overspend past a budget ring and service drill-in. Best for spend against budget per category on a budget rose, overspend breaking a dashed ring, with a drill into each category's services.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.