Token Usage Meter: Context Window UI for React

A context window usage meter with a segmented color bar, live count-up, and over-limit warnings.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/ai-token-usage-meter.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Token limitlimit

128000

Titletitle

Warning thresholdwarnAt

0.8

Danger thresholddangerAt

0.95

Duration (s)duration

1.1

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TokenUsageMeter/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/ai-token-usage-meter.en.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 Usage"` ("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" with aria-valuenow and aria-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

Token Usage Meter