KQ-678 · GOAL/THERMOMETER
Goal Thermometer
A vertical thermometer for a spend cap whose mercury is the sum of the entries, so the fill rises with each expense: the column's height animates on glide and the total counts up on the same spring through a motion value. Every expense leaves a tick on the rail at its cumulative height, the newest carrying a chip that lands with a snap and then rides upward with the meniscus; past warnAt the tube turns warn and the bulb glows on a mirrored tween that stops when the tab is hidden, and past the cap it turns danger without bouncing. It is a meter whose aria-valuenow stays inside the cap while aria-valuetext names the overage, with a hidden list of every expense.
- Ferngate Market, $86.20
- Halyard Coffee, $42.35
- Marrow & Vine, $128.90
- Lantern Books, $24.60
- Ferngate Market, $96.50
Groceries · $378.55 of $600.00 · 63% · 5 expenses · under cap
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/goal-thermometer
Props
- entries
- GoalEntry[]
- default —
- Expenses in the order they landed; their sum is the fill and each leaves a tick.
- cap
- number
- default —
- The cap the tube tops out at.
- warnAt
- number
- default 0.85
- Fraction of the cap where the tube warns and the bulb glows.
- label
- string
- default —
- Names the goal, printed above the tube and read as the meter's label.
- marks
- number
- default 4
- Tick labels printed up the scale.
- onStateChange
- (state: "under" | "near" | "over") => void
- default —
- Fires from the effect that sees a threshold cross, never during render.
- format
- (value: number) => string
- default USD Intl.NumberFormat
- Formats the total, the cap, the scale and every chip.
| Prop | Type | Default | Description |
|---|---|---|---|
| entries | GoalEntry[] | — | Expenses in the order they landed; their sum is the fill and each leaves a tick. |
| cap | number | — | The cap the tube tops out at. |
| warnAt | number | 0.85 | Fraction of the cap where the tube warns and the bulb glows. |
| label | string | — | Names the goal, printed above the tube and read as the meter's label. |
| marks | number | 4 | Tick labels printed up the scale. |
| onStateChange | (state: "under" | "near" | "over") => void | — | Fires from the effect that sees a threshold cross, never during render. |
| format | (value: number) => string | USD Intl.NumberFormat | Formats the total, the cap, the scale and every chip. |