Race Controlstable
Race Clock
A broadcast race clock that reads time remaining or elapsed as H:MM:SS. The parent owns the time.
Preview
1:02:03 remaining
Playground
3723
Time on the clock, in seconds. The component itself takes milliseconds.
Whether the figure is time remaining or time elapsed.
Show H:MM:SS instead of MM:SS.
Optional word beside the clock.
Clock 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/race-clock
Props
| Name | Type | Default | Description |
|---|---|---|---|
| seconds | number | 3723 | Time on the clock, in seconds. The component itself takes milliseconds. |
| direction | 'down' | 'up' | down | Whether the figure is time remaining or time elapsed. |
| showHours | boolean | true | Show H:MM:SS instead of MM:SS. |
| label | string | RACE | Optional word beside the clock. |
| size | 'sm' | 'md' | 'lg' | md | Clock size. |
Dependencies
No additional dependencies.