KQ-647 · GAS/DIAL
Gas Dial
Three speeds, a needle, and what each one costs. The needle rides a motion value animated on glide — a needle crossing an arc eases into position rather than overshooting — and the same value drives the filled arc's pathLength, so the sweep and the needle are one movement; the fee rolls its digit columns on snap and the estimated time counts, a second motion value read straight into the readout so the clock counts without re-rendering a frame of it. The three stops are a radio group with a roving tabindex — Left and Right step, Home and End jump, Space selects — and the dial face is a pointer shortcut that picks the nearest detent by angle, capturing only after 4px of travel.
Speed Normal · Fee $1.84 · Eta 0:45
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/gas-dial
Props
- stops
- [GasStop, GasStop, GasStop]
- default slow / normal / fast
- Exactly three stops, slowest first: id, label, fee in major units, estimated seconds and an optional network rate.
- value / defaultValue
- string
- default —
- Controlled or initial stop id; defaults to the middle stop.
- onValueChange
- (id: string) => void
- default —
- Fires from the press, key or dial gesture that changed the stop.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Prints the fee. The default pins an explicit locale so server and client agree.
- rateUnit
- string
- default "u"
- Unit printed after a stop's rate in the mono chip.
- label
- React.ReactNode
- default —
- Visible group label; omit it and pass aria-label to label the group invisibly.
| Prop | Type | Default | Description |
|---|---|---|---|
| stops | [GasStop, GasStop, GasStop] | slow / normal / fast | Exactly three stops, slowest first: id, label, fee in major units, estimated seconds and an optional network rate. |
| value / defaultValue | string | — | Controlled or initial stop id; defaults to the middle stop. |
| onValueChange | (id: string) => void | — | Fires from the press, key or dial gesture that changed the stop. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Prints the fee. The default pins an explicit locale so server and client agree. |
| rateUnit | string | "u" | Unit printed after a stop's rate in the mono chip. |
| label | React.ReactNode | — | Visible group label; omit it and pass aria-label to label the group invisibly. |