Timer
Countdown or count-up timer display with start, pause, and reset controls.
Examples
Counting up
Stopwatch that counts up from zero.
Countdown
30-second countdown with a progress bar.
With controls
Circular countdown timer with start, pause, and reset.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Timer } from "@rokle/components";import { Timer } from "@rokle/components";
export function Example() {
return <Timer />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | - | Total duration in seconds for countdown mode. |
| mode | "countdown" | "countup" | "countdown" | Timer direction. |
| onComplete | () => void | - | Called when a countdown reaches zero. |