← All components
Interaction / component
Context Meter
An accurate context-capacity ring with an accessible usage breakdown and honest overage reporting.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Occupancy is caller-provided usedTokens/maxTokens, both safe integers; used is nonnegative and capacity positive. Invalid counts show unavailable. Percent text remains truthful above 100%; ring/progress saturate at 100% and exact overage remains visible.
- Complete Demo supplies illustrative independent counters explicitly, with no model connected. They may overlap and are not summed into context occupancy. Missing cost says Not reported; costUSD is supplied by the caller, never looked up.
- Native click/keyboard disclosure and Escape closure replace hover-only access. defaultOpen is initial primitive state; the complete Demo remounts its meter when that configuration changes. Pause/Replay and count changes preserve disclosure; Reset example restores the selected preset.
- Portable AI Elements derivative retaining the small ring trigger, mono counts and divided panel; no AI SDK, tokenlens or network dependency.
React 19.2Modern browsersNative HTML and SVG
AI Elements — Vercel, Inc. · Apache-2.0. Portable derivative; original notice and full license retained.
Geist and Geist Mono — Vercel, Inc. · SIL Open Font License 1.1; full notice and required self-hosted assets included.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
usedTokens | number | 40000 | Used tokens. Validated live scalar configuration. |
maxTokens | number | 128000 | Capacity. Validated live scalar configuration. |
defaultOpen | boolean | true | Initially show details. Initial state; use open for live controlled disclosure. |
usage | ContextUsage | undefined | Optional own-data input/output/reasoning/cache safe-integer counters. Independent reported categories may overlap; no automatic summation. |
costUSD | number | undefined | Optional nonnegative finite caller-reported cost. Missing is unreported, not zero; no model pricing lookup. |
open | boolean | undefined | Controlled detail disclosure. Omit for internal open state. |
onOpenChange | (open: boolean) => void | undefined | Receives native disclosure requests; controlled open remains authoritative. |
paused | boolean | false | Static design; preserves useful interaction and existing local state. |
replayToken | number | 0 | Static design; replay preserves useful interaction and existing local state. |
className | string | '' | Additional host class. |
style | CSSProperties | undefined | Caller-owned inline styling. |