Shadcn AI Usage Blocks: Spend Planner and Spend Map

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

A self-serve planner where an admin sets next month's token volume, model and add-ons against a budget
A month to date breakdown of AI spend by model, team, agent and API key, with the caps at risk
A budget, run rate or volume discount readout inside an AI product's own account area

When not to use

Staff back office for invoices, subscriptions, dunning and metered charges: use the Billing blocks
Public plan tiers or an upgrade paywall shown before anyone has usage: use the Pricing blocks
An operator console for provider health, routing and quotas across an org: use the AI Ops blocks

Agent notes

AiUsage takes no props and calls no API; every figure comes from typed constants in components/data.tsx, so swap them for your data
Money prints through en-US USD helpers such as formatDollars in formatters.ts, so another currency starts there

Third-party API docs

Motion v12: API reference, docs, used by 2 of 2 blocks (the docs follow the latest Motion, with no React API break since v12)
Recharts v3: API reference, docs, used by 1 of 2 blocks
Sonner v2: API reference, docs, used by 1 of 2 blocks

Markdownhttps://reui.io/blocks/ai-agents/ai-usage.md

MCPsearch({ query: "ai usage", type: "block", category: "ai-usage" })

Full index for agents:llms.txtReUI MCP setup

AI Usage Blocks for Planning and Tracking Spend

AI products bill by tokens, models and add-ons, and the people paying want to see the bill before it lands. The Usage Planner prices next month on a stepped token ruler from 1M to 10B with graduated volume discounts, 4 model cards, 5 add-on chips and an annual commit, and draws a budget runway that names the day a $1,500 cap would be reached. The Spend Map shows month to date spend from a budget dial that fans out by model, team, agent and API key, flags the caps at risk, and opens one item's daily spend, run rate and projection.

Both blocks compute every figure from typed constants on the client, so they work as a front end over your own metering data. They are built from ReUI Frame and Badge with shadcn Slider, RadioGroup, ToggleGroup, Chart, Progress and DropdownMenu, and animate with Motion.

All AI Usage Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Usage Planner Usage planner with a stepped token ruler, model cards and a live spend estimate
Spend Map Spend map that fans monthly AI spend out by model, team, agent and API key

What the AI Usage Blocks Cover

Token ruler and volume bands Drag or arrow through 81 steps from 1M to 10B tokens while a band row shows which graduated discount, from list price to 30 percent off, the volume reaches.
Models, add-ons and annual commit Pick a default model by rate and latency, toggle add-ons such as web search or zero retention, and see a 12 percent annual discount applied.
Budget runway Projected spend through the month against the monthly cap, red past it, with the day the cap is reached and the share of the budget used.
Spend fan map A budget dial fans out to models, teams, agents and API keys, each ranked by cost or by tokens, with caps that are near or over called out.
Inspector and Ask Nimbus One item's month to date spend, a 30 day bar chart with the run rate, its cap meter and usage stats, plus an Ask box with canned answers to wire to your model.

Related Shadcn Block Categories

Billing Subscription, invoice, metering, plan, upgrade, and failed payment pages.
AI Ops AI startup control plane pages for model providers, prompts, token cost, routing, and quotas.
Pricing Pricing sections with plan tier columns, a monthly or yearly billing toggle, a featured plan, and per-seat team pricing.
Agent Activity Agent run views, from live step feeds and approvals to research traces, MCP call tables, and run reports.
Dashboard Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.

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 (44) Browse 44 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (51) Browse 51 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (20) Browse 20 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

Do these blocks connect to my billing or metering API?

Not on their own. Every figure is computed on the client from typed constants: the bands, the model rates, the add-ons, the budget and each split's spend. Replace those with your own metering data, or lift them into props, and the totals, the runway, the shares and the projections follow. Save Plan and Contact Sales only show a toast, and Ask Nimbus answers from canned text, so wire those to your own API.

Can the planner price per message or per run instead of per token?

Not as shipped. Its units, rates, ruler and copy are all per token, with rates per 1M tokens. Another unit means new steps for the ruler, new rates on the model cards and new labels, while the band, budget and runway logic can stay.

What changes when I switch the Spend Map from Cost to Tokens?

The split bars, the captions, the leaf values and their order, and the footer's top 2 line switch to tokens. The budget dial and the inspector, with its spend, chart, cap and stats, stay in dollars, because budgets and caps are set in money.

What do the blocks install?

The shadcn CLI adds each block with Motion, plus Sonner for the planner's toasts and Recharts through the shadcn Chart for the spend map, along with ReUI Frame and Badge and the shadcn components they use. The planner's toasts show only where your app already mounts a Sonner toaster.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.