Cost odometerPro
A run cost that rolls its digits as it spends, with a cap marker and a warning in words near and past the cap.
On this page
ProA run spending against a 50 cent cap: digits roll, the bar warns near the cap.
Installation
Usage
import { CostOdometer } from "@/components/ui/chatcn/pro/cost-odometer"
<CostOdometer value={spent} cap={0.5} status="running" />Four fraction digits by default, so sub-cent spend still moves. The bar is scaled so the cap sits at 80% of the track, which leaves room to show an overrun instead of clipping it. Under the cap the fill is the accent; from warnAt it turns amber with "Near the cap", past it red with how to fix it.
Examples
States
ProNot started, no cap, near and over the cap, compact and another currency.
Props
| Prop | Type | Notes |
|---|---|---|
value | number | Spent so far, in currency units |
cap | number | Spend limit. Without one, no bar |
status | "idle" | "running" | "done" | "stopped" | Default running |
currency | string | ISO code. Default USD |
digits | number | Fraction digits. Default 4 |
warnAt | number | Share of the cap where the warning starts. Default 0.8 |
size | "default" | "compact" | compact is one line for a toolbar |
labels | Partial<CostOdometerLabels> | Every string, for translation |
Accessibility
- The bar is a
meterwhose value text reads "$0.43 of $0.50 spent". - The near and over warnings are words with an icon, in a polite live region, so they are heard once when they appear.
- Digits roll with the Pro
number-flowand never count up from zero on mount.
Motion
Only changed digits roll, over 300 ms, while running; the bar follows with a transform transition. Reduced motion swaps digits with a short crossfade and jumps the bar.