UsageMeter

Markdown

How much context or money has been used, with what the number means. A percentage shows only when there’s a known limit.

Used in Settings and billing.

Use it for
Context or cost usage with what the number means.
Not for
Calibration scores. Try ConfidenceNote.

UsageMeter preview

Context: 12,400 of 32,000 tokens (39%) · Measured · Oct 16, 2026, 9:30 AM

Installation

npm install @stackunseen/ui
import { UsageMeter } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Measured, estimated and unknown numbers look different. Without a limit there’s no percentage, and an unknown amount shows the reason instead of zero.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

label · value: Measurement<{ used, limit? }> · unit? · currency? · warnAt? · locale?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
label · value: Measurement<{ used, limit? }> · unit? · currency? · warnAt? · locale?
Keeps honest
Measured, estimated and unknown numbers look different. Without a limit there’s no percentage, and an unknown amount shows the reason instead of zero.
MCP
read_component "UsageMeter" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Tab reaches controls; Enter or Space activates buttons. Accordions use arrow keys, Home and End. Select menus support arrows and typeahead; Escape closes menus and dialogs and restores focus.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio