shadcn.io is not affiliated with official shadcn/ui
Cost Tracker AI Block for React
Four AI features with spend so far, an editable budget in a number field, a month-end projection with a status word, an Alert at 80% switch that names the day it would fire, totals in a hairline grid, and Save and Discard.
Installation
Overview
Track what each AI feature costs against what you planned, with this budget table for React with Base UI. Spendbrook, a budget tracker, opens with four totals in a hairline grid (spent, budgets, projected month end, features over budget) over a table of Search answers, Support drafts, Summaries and Embeddings. Each row shows the spend with a bar and a tick for how much of the month has gone, a budget in a Number Input, the month-end projection with a status word (On track, Close to budget or Will exceed by an amount), and an Alert at 80% Switch whose row names the day of the month the alert would fire. The Shine Button Save budgets keeps the edits and Discard puts the saved ones back. For billing consoles, FinOps views and any product that meters AI use.
FAQ
What stays in the page, and how do I make it real?
The spend, the budgets and the date are typed in the file. The projection, the status words, the alert day and the totals are worked out from them, and editing a budget redraws them at once. Save only keeps the edits on this page and nothing is sent or charged. To wire it for real, load the spend and budgets from your billing data and send the saved values from the save handler.
How is the month-end figure worked out?
It is a straight line: the spend so far divided by the 12 days gone, times the 31 days in October. A feature is Close to budget when its projection is within 10% under the budget, and Will exceed by an amount when the projection is above it.
What does Alert at 80% mean here?
The alert level is 80% of the row's budget. With the switch on, the row says which day of the month the spend would reach it at today's pace, or that it will not this month. With it off the row says No alert. The switches and budgets are part of what Save keeps.
What happens if I clear a budget?
A budget has to be above zero, so the status line says so and the last valid budget stays in use for the projection. Discard puts the field back to the saved value.
How does it work from the keyboard?
Every budget and switch is a named control in the tab order. Save budgets and Discard stay in the page even when nothing has changed, and answer with a line instead of doing nothing. React Aria commits a typed budget when you leave the field, so Tab out of it to see the projection change; the other bases update as you type.