KQ-196 · BAR/RACE
Bar Race
A ranked bar chart that races. When the values change the bars grow or shrink and the rows swap places with a FLIP glide, so a lead change reads as one continuous overtake rather than a redraw. Presented as a list for assistive tech.
KQ-196 · BAR/RACE
1
Orion150
2
Atlas120
3
Vela90
4
Lyra60
5
Corvus40
Q1
Frame 1 of 4
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/bar-race
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BarRaceItem[] | — | Current standings — id, label, value, optional color. |
| max | number | — | Fixed scale ceiling; defaults to the current leader. |
| format | (value) => string | — | Formats the trailing readout. |