# Cloud Spend block

> Budget rose of cloud spend by category with overspend past a budget ring and service drill-in

FinOps budget rose of amortized cloud cost: each wedge is as wide as its category's budget and as long as its use, breaking a dashed budget ring once over, with a drill into its services. ReUI Frame, Item, Select.

- Type: Pro block
- Category: [Pie Chart](https://reui.io/blocks/chart/pie-chart.md)
- Page: https://reui.io/blocks/chart/pie-chart/chart-54
- MCP: `get_block("chart-54")`
- Built with: Badge, Button, Button Group, Dropdown Menu, Empty, Frame, Item, Select, Skeleton, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Spend against budget per category on a budget rose, overspend breaking a dashed ring, with a drill into each category's services

## Agent notes

- Replace `HISTORY` in data.ts with real monthly cost per service, plus `BUDGETS` and `AS_OF`; `buildHistory` is demo data only
- `BudgetRose` draws its own SVG with motion: wedge angles come from `BUDGETS`, lengths from each category's use, and `USE_CAP` caps how far an overspend is drawn
- Wire `CONNECT_COMMAND` to your billing export setup; the empty state's Copy Command copies it

## When not to use

- A single level split of visitors with a drill into versions: use [Browser Usage](https://reui.io/blocks/chart/pie-chart/chart-27.md) (`get_block("chart-27")`)
- Capital inflows from 3 tracked sources plus a hatched rest, switched by period: use [Inflows by Source](https://reui.io/blocks/chart/pie-chart/chart-13.md) (`get_block("chart-13")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/chart-54
```

## About Pie Chart blocks

### 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://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://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

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