KQ-724 · INDEX/DIAL

Index Dial

A half-dial for a market index, zeroed on the previous close: the needle stands straight up when the index is flat and swings left for a fall or right for a rise. Each print swings it on snap — one crisp overshoot, the way a real needle overshoots a new reading — and the arc from the zero mark to the needle is drawn from the same motion value, success on the up side and danger on the down side, so the sign is the reading. The level rolls its digit columns on the same spring and a chip carries the percent; it is a role=meter whose valuetext reads the move in words, and nothing takes focus.

KQ-724 · INDEX/DIAL

Basin 40Basinworks Exchange

Basin 40 4,182.35 · +0.61% · swinging

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/index-dial

Props

value: number; default —; The index level. Changing it swings the needle and rolls the figure.
previousClose: number; default —; The basis; the dial's zero.
range: number; default 3; Percent each side of zero the dial spans; larger moves pin the needle at the rim.
format: (value: number) => string; default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); Prints the index level. The default pins an explicit locale so server and client agree.
label: string; default —; The index name; labels the meter.
caption: string; default —; A quiet mono line beside the label — the venue.
swingOnMount: boolean; default true; Start the needle at zero and swing it to the value on first paint.
onSettle: (value: number, changePercent: number) => void; default —; Fires from the spring's completion when the needle comes to rest.

Prop	Type	Default	Description
value	number	—	The index level. Changing it swings the needle and rolls the figure.
previousClose	number	—	The basis; the dial's zero.
range	number	3	Percent each side of zero the dial spans; larger moves pin the needle at the rim.
format	(value: number) => string	Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })	Prints the index level. The default pins an explicit locale so server and client agree.
label	string	—	The index name; labels the meter.
caption	string	—	A quiet mono line beside the label — the venue.
swingOnMount	boolean	true	Start the needle at zero and swing it to the value on first paint.
onSettle	(value: number, changePercent: number) => void	—	Fires from the spring's completion when the needle comes to rest.