Timingstable
Sector Times
Three sector bars with broadcast colour coding, optional mini sectors, and a counting lap time.
Preview
S1—, not set
S2—, not set
S3—, not set
Lap—, not set
Playground
Bars side by side, or one row per sector.
1
Segments per sector bar.
Animate the lap time to its new value.
Drive the sectors from the race simulator
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/sector-times
Props
| Name | Type | Default | Description |
|---|---|---|---|
| layout | 'row' | 'stack' | row | Bars side by side, or one row per sector. |
| miniSectors | number | 1 | Segments per sector bar. |
| countUp | boolean | true | Animate the lap time to its new value. |
| live | boolean | true | Drive the sectors from the race simulator |
| s1Status | 'fastest' | 'personal' | 'slower' | 'unset' | personal | — |
| s2Status | 'fastest' | 'personal' | 'slower' | 'unset' | fastest | — |
| s3Status | 'fastest' | 'personal' | 'slower' | 'unset' | slower | — |
Dependencies
- motion