Reasoning budget barPro
A thin bar of reasoning tokens against the effort budget, filling with the accent as the model thinks.
On this page
ProReasoning tokens filling the High effort budget.
Installation
Usage
import { ReasoningBudgetBar } from "@/components/ui/chatcn/pro/reasoning-budget-bar"
<ReasoningBudgetBar used={usage.reasoningTokens} budget={8000} effort="High" />Pair it with the free reasoning and reasoning-effort components: the bar sits under the reasoning header while the model thinks, then steps down to gray when it is done.
Examples
States
ProEarly, budget spent, done and bare under a header.
Props
| Prop | Type | Notes |
|---|---|---|
used, budget | number | Reasoning tokens so far and the effort's budget |
effort | string | Shown beside the title: "High" |
status | "streaming" | "done" | Default streaming |
bare | boolean | Hides the text row |
Accessibility
- The bar is a named meter with value text, so the share is read as tokens, not a color.
Motion
The fill follows with a 300 ms transform transition; reduced motion jumps it.