KQ-653 · GAS/TRACKER

Gas Tracker

A fee readout with its own recent past. The headline rolls on snap so only the digit columns that changed move, while the history strip extends: each reading arrives at the right of a fixed grid and its bar scales up from its base on glide. A dashed ceiling crosses the strip, bars at or above it draw in warn, and a crossing tints the headline. The strip is a real slider: pointing reads the nearest column, Left and Right step through the run, Home and End jump, and Escape releases the cursor back to live.

KQ-653 · GAS/TRACKER

Basin relay fee30.0 gu ceiling

gu−0.5

Under the 30.0 gu ceiling

Fee 20.1 gu · ceiling 30 · under · live

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/gas-tracker

Props

value: number; default —; The current reading, in unit.
history: number[]; default []; Earlier readings oldest first; the current one is appended for the strip.
threshold: number; default —; The ceiling: crossing it colours the readout and the bars above it.
capacity: number; default 28; Columns in the strip; the grid is fixed, so a long run cannot overflow.
unit: string; default "gu"; Unit printed after every figure and spoken in labels.
format: (value: number) => string; default Intl.NumberFormat, 1 decimal; Formats every figure on the card.
label: string; default "Network fee"; Names the tracker for assistive technology.
selectedIndex / defaultSelectedIndex: number | null; default null; Cursor position as an index into the drawn window; null is live.
onSelectedIndexChange: (index: number | null) => void; default —; Fires from the pointer, key, or Escape that moved the cursor.

Prop	Type	Default	Description
value	number	—	The current reading, in unit.
history	number[]	[]	Earlier readings oldest first; the current one is appended for the strip.
threshold	number	—	The ceiling: crossing it colours the readout and the bars above it.
capacity	number	28	Columns in the strip; the grid is fixed, so a long run cannot overflow.
unit	string	"gu"	Unit printed after every figure and spoken in labels.
format	(value: number) => string	Intl.NumberFormat, 1 decimal	Formats every figure on the card.
label	string	"Network fee"	Names the tracker for assistive technology.
selectedIndex / defaultSelectedIndex	number \| null	null	Cursor position as an index into the drawn window; null is live.
onSelectedIndexChange	(index: number \| null) => void	—	Fires from the pointer, key, or Escape that moved the cursor.