Back to components
ComponentAI & ChatFree
Token Budget Bar React component
A compact context budget island with used and reserved tokens, expandable breakdown and near-limit or exceeded states.
About the Token Budget Bar component
A compact context budget island with used and reserved tokens, expandable breakdown and near-limit or exceeded states.
When to use it
Show context consumption alongside an AI conversation.
Reserve room for output before the context window fills.
Installation
Add the Token Budget Bar component to your project with the shadcn CLI. It lands in components/token-budget-bar.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/token-budget-barOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<TokenBudgetBar /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| used | number | 18420 |
| limit | number | 32000 |
| reserved | number | 4000 |
| model | string | "Workspace model" |
| defaultExpanded | boolean | false |
| onManage | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- usednumberDefault: 18420
- limitnumberDefault: 32000
- reservednumberDefault: 4000
- modelstringDefault: "Workspace model"
- defaultExpandedbooleanDefault: false
- onManage() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Token Budget Bar FAQ
- Does it count tokens automatically?
- No. Supply used, reserved and limit from your application or model usage data. The meter includes the reserved output budget, and the expanded breakdown shows all three values.
- What happens when the budget is exceeded?
- The visual meter is capped at its limit while the real counts remain visible. A warning distinguishes near-full and exceeded budgets; invalid or negative counts are sanitized.
