Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Token Usage Report Changelog Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A usage report for React with React Aria, 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.

Is the table a real table?

Yes: a native table with a caption, column headers with scope and the endpoint as the row header, in a scrollable region the keyboard can reach. The bars repeat figures that are already in the cells, so they are hidden from assistive technology.

How does it fit on a phone and in a right-to-left layout?

Below the small breakpoint the share column and its bars drop, leaving the endpoint, what it used and its change. Paths, amounts and signed changes keep their left-to-right order in a right-to-left layout, while the text around them mirrors.

All 200 changelog blocks