shadcn.io is not affiliated with official shadcn/ui
Token Usage Report Changelog Block for React
A framed usage report with a quota bar and a tick at the 80% alert line, a table of endpoints with share bars and the change since the last release, and a switch between tokens and requests.
Installation
Overview
A usage report for React with Base UI, written for Tokenmeter, a fictional usage-based billing service for an AI API. A start-aligned header with a two-way switch at its end (Tokens, Requests), then one framed figure with + marks on its corners. Its top is the quota band: the share of the quota spent, rolling to the new value, a bar with a tick at the 80% alert line and what is left. Under it a table of six endpoints: the path in mono, its share of the total as a bar and a percentage, what it used and the change since the release before as an arrow, a sign and a percentage. It's built from Segment Group, Progress, Sliding Number and Guides, with your theme's tokens for every colour. For billing pages and usage reviews. The figures are example data.
FAQ
How do I change the endpoints and the quota?
Edit ENDPOINTS and MEASURES. An endpoint has two readings for each measure: the release before and this one. A measure has its quota and its unit. The totals, the percentage of the quota, the shares (by largest remainder, so they add to 100), the changes and the amount left are all worked out from those numbers. ALERT sets the percentage the tick marks.
What does the switch do?
It swaps every figure between tokens and requests: the quota percentage rolls to its new value, the bar, the share bars, the amounts and the changes follow, and a polite line says what is showing. The rows keep their order and the block's height never changes. The choice stays local to the page.
What does the tick mean?
It is the alert line, 80% of the quota. Under it the band says how much is left; over it, it says Over the 80% alert line. The line is drawn and written, never a colour alone.
Related
- Pro
Plan Cells Rate Limit Dashboard Changelog
APIs and integrationsThree plan cells showing usage against a new hourly limit: a rolling count of requests, a progress bar with a tick at 80%, the remaining requests, the share used, the new limit with the old one struck through and the pace, with a toggle between the current hour and the peak hour.
- Pro
API Usage Metrics Changelog
APIs and integrationsSix weeks of requests as stacked columns by API version, the legend and title reading the latest week's shares from the data, a Requests or Share toggle, and a three-cell band of requests, error rate and p95 latency with their changes.
- Pro
Cost Optimization Changelog
Metrics and chartsNine cost savings grouped by category in one accordion: each row shows the category's dollars saved a month and a share bar, and opens to the wins and the release that shipped each.
- Pro
Paired Bars Queue Metrics
Metrics and chartsFive message queues as rows of paired bars, the release before as an outline and the current release solid, with a three-way switch between throughput, lag and dead letters, and a header that counts the lagging queues.
- Pro
API Response Time Changelog
Metrics and chartsPaired bars for five endpoints on a shared 0 to 400 ms axis, the previous release pale and this one solid, with the change in rolling percent digits, the optimisation behind it and a p50, p95 or p99 toggle that redraws the bars.
- Pro
Capacity Planning Changelog
Incidents and uptimeFour resource cells on shared hairlines, each with a ring for how full it is, what it was a release ago and how long until it is full at this rate, with a toggle that picks the release.