Token Usage
How much of a context window is spoken for. The colour crosses to amber at 75% and destructive at 90%, because the number only matters once it is close.
src/components/ui/token-usage.tsxAbout
From the component's own source, where it was written.
How much of a context window is spoken for.
The colour crosses to amber at 75% and destructive at 90%, because the number only matters once it is close — a green bar at 12% is noise, an amber one at 80% is a warning you can act on before the conversation truncates.
Install
npx astralyx-ui add token-usage
Usage
import { TokenUsage } from '@/components/ui/token-usage'
<TokenUsage used={18400} limit={200000} />Composer
Change the props and the source below follows.
Context used18k / 200k
Props
tsx
<TokenUsage used={18400} limit={200000} />Examples
Across the thresholds
tsx
<TokenUsage used={18400} limit={200000} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TokenUsage
How much of a context window is spoken for.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| used | number | required | Token counts. The share is clamped at 100%. |
| limit | number | required | Token counts. The share is clamped at 100%. |
| label | string | 'Context used' | Text on the left. |
| size | 'sm' | 'default' | 'lg' | 'sm' | — |
| showNumbers | boolean | true | The compact "18.4k / 200k" readout. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| thresholds | 75% / 90% | Where the bar turns amber, then destructive. |