Stopwatch

Pro

Stopwatch with a large, steady readout and start, stop, lap and reset. Each new lap lands at the top of the list, with the fastest and slowest laps clearly marked.

Preview

Installation

npx @lumioui/cli add pro/stopwatch

Usage

import { useStopwatch, useStopwatchTime, formatStopwatch, StopwatchReadout, Stopwatch } from "@/components/ui/stopwatch/stopwatch";
<Stopwatch />

Also exported: useStopwatch, useStopwatchTime, formatStopwatch, StopwatchReadout.

Examples

Brew

A pour-over recipe.

Laps

A coach timing 400 m repeats at the track.

Tracker

A billable-hours timer built on the headless `useStopwatch` hook.

API reference

StopwatchReadout

Prop Type Default
stopwatch* StopwatchControls —
sinceLastLap boolean

Show time since the last lap instead of the total.

 false
precision StopwatchPrecision "centiseconds"
className string —
style StyleProp<TextStyle> —

Stopwatch

Prop Type Default
layout "full" | "compact"

"full" — hero readout, round Lap/Start buttons, laps list. "compact" — inline row with icon buttons. Default "full".

 —
precision StopwatchPrecision

Hundredths (default) or whole seconds.

 —
stopwatch StopwatchControls

Drive an external useStopwatch() instance instead of the built-in one.

 —
label string

Compact title — "Brew time".

 —
description string

Compact subtitle under the label.

 —
showLaps boolean

Show the laps list (full layout). Default true.

 —
readoutSize number

Readout font size in the full layout. Default 72.

 —
className string —