Token Usage Meter
A context window usage meter with a segmented color bar, live count-up, and over-limit warnings.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A segmented color bar presenting what fills an AI context window (system prompt, conversation history, current input, and so on). The numbers roll up smoothly, usage above 80% turns orange and above 95% turns red with a shake warning, and hovering a segment shows a detail tooltip — a good fit for a chat application's token monitoring panel.
npx shadcn@latest add "https://webberui.com/r/ai-token-usage-meter.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<AiTokenUsageMeter />
Installation
npx shadcn@latest add "https://webberui.com/r/ai-token-usage-meter.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/ai-token-usage-meter.
Usage
import { TokenUsageMeter } from "@/components/ui/ai-token-usage-meter";
<TokenUsageMeter
limit={128000}
segments={[
{ label: "System prompt", tokens: 3200 },
{ label: "Conversation history", tokens: 52400 },
{ label: "Current input", tokens: 6800 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
segments | TokenSegment[] | — | Token usage of each segment, rendered into the bar in order |
limit | number | — | Token limit of the context window |
title | string | "Token 用量" ("Token usage") | Meter title, which doubles as the aria-label |
duration | number | 1.1 | Duration of the bar's growth and the number roll-up (seconds) |
warnAt | number | 0.8 | Warning threshold (0–1); the bar turns orange once usage passes it |
dangerAt | number | 0.95 | Danger threshold (0–1); past it the bar turns red and shakes as a warning |
className | string | — | Forwarded to the outermost container |
The TokenSegment type:
| Field | Type | Default | Description |
|---|---|---|---|
label | string | — | Segment name (for example: system prompt, conversation history, current input) |
tokens | number | — | Number of tokens this segment occupies |
color | string | Built-in palette | Segment color (any CSS color value); when omitted, colors rotate by index |
Accessibility
- The meter as a whole exposes the current usage through
role="meter"witharia-valuenowandaria-valuetext, so assistive technology can read out "x / y tokens" directly - The percentage and status text sit in an
aria-live="polite"region and are announced the moment a warning threshold is crossed - When the user has "reduce motion" enabled at the system level, the bar growth, the number roll-up, and the shake warning are all disabled and the final state is shown directly
- Status is never conveyed by color alone: the percentage, the remaining / over-limit token count, and a text label (plenty of headroom, approaching the limit, over the limit) are all provided as well
- Beyond the hover tooltip, a legend at the bottom permanently shows each segment's name and value, so keyboard and touch users get the full information too