Race graphics for React
Every second
on screen.
Broadcast-inspired components for timing, race control, and the pit lane. Built for React and distributed through the shadcn registry.
One registry item brings the tokens, the fonts, and dark mode.
20 broadcast pieces, each with a playground and its source.
Own the code: semantic tokens, render slots, and named parts.
Replay
The whole library in one race
The library
All components →- Pit Lane
Tyre Badge
A broadcast tyre marker that shows the compound and the laps on the current set, and rotates when the compound changes.
- Timing
Sector Times
Three sector bars with broadcast colour coding, optional mini sectors, and a counting lap time.
- Broadcast
Driver Name Plate
A broadcast lower third that wipes in with the driver position, team colour, name, car number, and race status.
- Race Control
Start Lights
A five-column race-start gantry that arms light by light, holds, and then goes out — or flashes yellow when the start is aborted.
- Timing
Timing Tower
The running order of the whole field, with rows that slide as positions change and a value column that switches between gap, interval, and last lap time.
- Broadcast
Replay Bumper
A broadcast transition that sweeps over a panel so its content can change behind it.
- Race Control
Lap Counter
A broadcast lap counter that rolls the lap as the race runs and calls the last lap the final lap.
- Race Control
Race Clock
A broadcast race clock that reads time remaining or elapsed as H:MM:SS. The parent owns the time.
- Race Control
Flag Banner
A full-width race control banner that wipes in with the track status, the sector it applies to, and an optional message.
- Timing
Overtake Indicator
The badge that says a car can attack: DRS as it ran from 2011 to 2025, or Overtake Mode as the 2026 rules name it.
- Broadcast
Podium
The top three at the end of the race, laid out second, first, third, with the steps rising last place first.
- Race Control
Track Map
A geometry-agnostic circuit map: you give it an SVG path, it colours the sectors with the flag in force and slides a marker per car round the lap.
- Pit Lane
Stint Bar
A car's tyre strategy as one bar: a segment per stint in its compound colour, filling up to the lap the car is on.
- Timing
Gap Chart
Gap to the leader across the race: laps along the bottom, seconds behind down the side, and the leader pinned to zero along the top the way a broadcast draws it.
- Broadcast
Speed Trap
One car's speed trap reading in big figures, with the best of the session under it and a flash on the lap the record changes hands.
- Broadcast
Gauge
The engine widget: revolutions as an arc round the gear the car is in, turning red past the redline.
- Broadcast
Team Radio
A radio message from the pit wall: who is talking to whom, a live trace of the audio and the transcript arriving word by word.
- Pit Lane
Pit Stop Card
One pit stop on a broadcast card: which stop, the tyres off and on, the pit lane time and the position in and out.
- Broadcast
Battle Card
Two cars one place apart on a broadcast card: the interval between them, which way it is going, and a tag when one gets past.
- Timing
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.