KQ-012 · READOUT
Readout
Numbers with momentum — per-digit vertical rolls with real carry propagation, so 199 → 200 visibly carries right to left.
KQ-012 · READOUT
p95 latency · ms
42.642.6
requests / sec12,41812,418
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/readout
Props
- value
- number
- default —
- The numeric value to display.
- format
- (value: number) => string
- default toLocaleString
- Formats the value; non-digit characters render as static cells.
- size
- "sm" | "md" | "lg" | "xl"
- default "md"
- Type scale.
- rollOn
- "any" | "increase"
- default "any"
- With "increase", decreases swap instantly — right for latency-style metrics.
- delta
- { value: string; direction: "up" | "down" }
- default —
- Change badge that flips up when the value moves.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The numeric value to display. |
| format | (value: number) => string | toLocaleString | Formats the value; non-digit characters render as static cells. |
| size | "sm" | "md" | "lg" | "xl" | "md" | Type scale. |
| rollOn | "any" | "increase" | "any" | With "increase", decreases swap instantly — right for latency-style metrics. |
| delta | { value: string; direction: "up" | "down" } | — | Change badge that flips up when the value moves. |