TokenCounter
Displays token usage against a context window limit with a progress bar and formatted counts.
Context window12,400 / 128,000 tokens
import { TokenCounter } from "@aetherstack/ui"
Installation
terminal
npx aether-ui add token-counterImport
import.tsx
import { TokenCounter } from "@aetherstack/ui"Usage
tokencounter.tsx
<TokenCounter used={12400} max={128000} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| used* | number | — | Number of tokens used in the current context. |
| max* | number | — | Maximum token limit of the model context window. |
| className | string | — | Additional CSS classes. |
* Required
Accessibility
- →The progress bar uses role='progressbar' with aria-valuenow, aria-valuemin, and aria-valuemax attributes.
- →Counts are formatted with locale-aware number formatting for readability.