For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: Spend against budget per category on a budget rose, overspend breaking a dashed ring, with a drill into each category's services
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 level split of visitors with a drill into versions: use the Browser Usage block
- Capital inflows from 3 tracked sources plus a hatched rest, switched by period: use the Inflows by Source block
- A single figure measured against a target on an arc gauge: use the Radial Chart blocks
- Shares across more than a handful of categories that need exact comparison: use the Bar Chart blocks
Agent notes
- Replace
HISTORYin data.ts with real monthly cost per service, plusBUDGETSandAS_OF;buildHistoryis demo data only BudgetRosedraws its own SVG with motion: wedge angles come fromBUDGETS, lengths from each category's use, andUSE_CAPcaps how far an overspend is drawn- Wire
CONNECT_COMMANDto your billing export setup; the empty state's Copy Command copies it - chart-13 and chart-27 draw a recharts
Piedonut whoseinnerRadiussets the hole; chart-54 draws its rose as its own SVG in budget-rose.tsx
Third-party API docs
- Motion v12: API reference, docs (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: API reference, docs
https://reui.io/blocks/chart/pie-chart/chart-54.mdget_block("chart-54")npx shadcn@latest add @reui/chart-54Shadcn Components in the Cloud Spend Block
Dependencies
- cn
- motion
- sonner
Shadcn Cloud Spend Block
Budget rose of cloud spend by category with overspend past a budget ring and service drill-in. Part of the ReUI Shadcn Pie Chart blocks collection.
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.
It is composed from Badge, Button, Button Group, Dropdown Menu, Empty, Frame, Item, Select, and more, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Cloud Spend Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Pie Chart blocks to assemble a full screen instead of a single section.
All Shadcn Pie Chart Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Inflows by Source Capital inflows donut card with a period switch, change on the period before and a source breakdown
- Browser Usage Browser usage donut with version drill-down, support line flags and a breakdown table
Related Shadcn Charts Block Categories
- Area Chart (4) Area chart cards with gradient fills, comparisons to a prior period or baseline, hover readouts and CSV export for trends over time.
- Bar Chart (12) Bar and column charts, stacked hourly outcomes, 3D prisms, diverging lanes and lollipop stems for comparing values.
- Composed Chart (5) Composed charts that mix bars, lines and areas on one axis: liquidity flows, sales against a goal, cashflow, margin and a canary rollback.
- Line Chart (6) Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
- Radial Chart (3) Radial cards for a value against a limit or target: concentric error budget rings, API health ring gauges and a day clock of inflows.
- Sankey Chart (3) Sankey flow charts for income statements, trial journeys and sales funnels, with hover tracing, drop-off nodes and leak markers.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Cloud Spend block?
Use it for spend against budget per category on a budget rose, overspend breaking a dashed ring, with a drill into each category's services.
The Pie Chart category fits:
- 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
For a single level split of visitors with a drill into versions, use the Browser Usage block. For capital inflows from 3 tracked sources plus a hatched rest, switched by period, use the Inflows by Source block. For a single figure measured against a target on an arc gauge, use the Radial Chart blocks. For shares across more than a handful of categories that need exact comparison, use the Bar Chart blocks.
What is the Cloud Spend block built with?
Can I restyle the Cloud Spend block?
How should I use Shadcn pie chart blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.