Pit Lanestable
Tyre Badge
A broadcast tyre marker that shows the compound and the laps on the current set, and rotates when the compound changes.
Preview
Playground
Tyre compound: soft, medium, hard, intermediate, or wet.
12
Laps completed on this set.
Show NEW instead of the lap count.
Draw the wear arc. Off is the plain badge, as when `wear` is left out.
35
Percentage of tyre life used. The arc fills clockwise from 12 o’clock.
70
Wear percentage at which the arc turns to the destructive colour.
Badge size.
Installation
Package manager
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/tyre-badge
Props
| Name | Type | Default | Description |
|---|---|---|---|
| compound | 'S' | 'M' | 'H' | 'I' | 'W' | S | Tyre compound: soft, medium, hard, intermediate, or wet. |
| age | number | 12 | Laps completed on this set. |
| isNew | boolean | false | Show NEW instead of the lap count. |
| showWear | boolean | true | Draw the wear arc. Off is the plain badge, as when `wear` is left out. |
| wear | number | 35 | Percentage of tyre life used. The arc fills clockwise from 12 o’clock. |
| wearWarning | number | 70 | Wear percentage at which the arc turns to the destructive colour. |
| size | 'sm' | 'md' | 'lg' | md | Badge size. |
Dependencies
- motion