Pro
Stopwatch
Time something: start, pause, lap and reset. The reading is drawn every frame in tabular figures and measured from the clock, so a busy or hidden tab never loses time. The fastest and slowest laps are marked.
pnpm dlx shadcn@latest add @caliper/stopwatchWhen to use
Use it for
- Time tracking on a task or ticket.
- Timing an event, a call or a test run.
Skip it when
- Counting down to a date; use the countdown.
- A background timer with no screen; store the start time instead.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Measured, not counted
- Elapsed time is the clock minus the start, so throttled frames never drift.
Usage
- Quiet reading
- The running time is not announced; each lap is.
Installation
pnpm dlx shadcn@latest add @caliper/stopwatch
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from Stopwatch and formatStopwatch.
import { Stopwatch, formatStopwatch } from "@/components/ui/stopwatch"
The worked example comes with Pro
The 23-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
Stopwatch
component
formatStopwatch
component
No props of its own; it accepts the native props of its root element.
Accessibility
It exposes timer and status semantics, with aria-live and aria-label kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.