Standings
A championship table of drivers or teams: points, what the race gained, and the change of place, with rows that move when the order does.
The table is data only and does not score a race. Pass the entries ranked, with `position`, `points`, and optionally `gained` (points scored in the race on screen, shown as `+18`) and `positionChange` (places up or down against the standings before the race, shown as ▲2 / ▼1). A driver row names the driver by code, a team row by team name.
Feed it projected standings while a race runs — the standings before the race plus the points each place is worth now — and the rows move to their new places with a spring while the points roll. The demo on this page projects them on the fictional grid; the Replay page does the same for real races and swaps in the official standings at the chequered flag.
Half points print with one decimal. Under reduced motion the rows and the figures change in place.
It is an ordered list with one sentence of real text per row; the columns are painted and hidden behind it. It is not a live region: projected standings can change every few seconds.
Preview
- P1 EVO, 193 points, 25 in this race.
- P2 NVA, 173 points, 12 in this race.
- P3 ONY, 156 points, 6 in this race.
- P4 RKE, 150 points, 1 in this race.
- P5 CAN, 131 points.
- P6 FOR, 122 points.
- P7 MSO, 122 points, 18 in this race, up 1 place.
- P8 KME, 118 points, down 1 place.
- P9 AQU, 107 points, 10 in this race.
- P10 LCO, 94 points, 4 in this race.
Playground
Drivers, or teams scoring what their cars do.
How many rows to show from the top.
How big the rows are.
Simulator tick in ms
Installation
Register the boxbox namespace once per project:
bunx shadcn@latest registry add @boxbox=https://react-boxbox.vercel.app/r/{name}.jsonThen add the component:
bunx shadcn@latest add @boxbox/standings
Props
| Name | Type | Default | Description |
|---|---|---|---|
| table | 'drivers' | 'teams' | drivers | Drivers, or teams scoring what their cars do. |
| maxRows | number | 10 | How many rows to show from the top. |
| size | 'md' | 'sm' | md | How big the rows are. |
| speed | number | 1500 | Simulator tick in ms |
Dependencies
- motion