shadcn.io is not affiliated with official shadcn/ui
Token Usage Dashboard Block for Radix UI
October spend as fourteen daily columns stacked by three models with a seven-day mean line, a Monthly cap field that gives the day the cap is reached, and a table of tokens in and out, cost and share.
Installation
Overview
Know the day you run out of budget, with this token usage panel for React with Radix UI. A hairline frame with a plus mark on each corner opens with a Monthly cap field, then draws fourteen days of Promptledger spend as columns stacked by three models (Quill Large, Quill Small and Embedder) in foreground weights, with a dashed line at the mean of the last seven days. The sentence under it is the point: at that pace the cap is reached on a given day, or the month ends under it. Typing a new cap in the Input moves the date on each keystroke. A table lists each model's tokens in and out, cost and share of spend. It's built from Input and Guides, with hand-built columns. For AI product teams and usage-based billing reviews.
FAQ
How do I fill it with my usage?
Edit MODELS: each has its daily cost in cents from the first of the month, its prices per million tokens read and written, and the ratio of tokens written to read. Tokens are worked out from cost and prices, so a real metering feed can replace them with measured counts. DEFAULT_CAP is the starting cap in dollars.
How is the date worked out?
The mean of the last seven elapsed days is held flat for every remaining day of the month, which is the dashed line. The date is the first day the running total reaches the cap. If the total has already reached it, the sentence gives the day it happened, and if it never does, it says where the month ends.
What does the Monthly cap field accept?
Whole dollars. Commas, spaces and letters are ignored. A zero or an empty field keeps the default cap in use and says so beside the field.
What stays local, and how do I wire it for real?
Everything: the spend is typed and the cap is a field in this page that enforces nothing. To make it real, load daily cost per model from your provider's usage export, store the cap with the project, and have your gateway alert or stop requests when the projected date comes close.