Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Timer dial

A wind-up timer. Drag round the dial to set the minutes and a red wedge opens with your finger; let go and it starts, the wedge shrinking back to twelve as time runs out, with a small tick each second and a shake at zero.

Pro
pnpm dlx shadcn@latest add @caliper/timer-dial

Focus

Turn the dial to set it; it starts when you let go.

0510152025303540455055
25:00

Installs components/ui/timer-dial.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion

When to use

Use it for

  • Focus and break timers, cooking and workout apps.
  • Meeting and presentation countdowns where the remaining time should read at a glance.

Skip it when

  • Exact durations longer than the dial; use `DurationField`.
  • Counting up; use `Stopwatch`.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Set by turning
The angle is the time, in whole minutes; crossing twelve stops at full or empty instead of wrapping.

Styling

Red is time left
The wedge is the only colour on the dial and it means one thing, the time remaining.

Usage

A slider that starts
The dial is a slider in minutes; Enter or Space starts and pauses, and the time left is announced.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/timer-dial

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.

example.tsx
import { TimerDial } from "@/components/ui/timer-dial"

The worked example comes with Pro

The 23-line example behind the preview opens here, ready to copy.

  • 602 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
Checking your licence…

API reference

TimerDial

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
label *string—Names the timer, e.g. "Focus timer".
maxMinutesnumber60The most minutes the dial holds.
defaultMinutesnumber0
onDone(() => void)—

Accessibility

It exposes slider semantics, with aria-label, aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
EnterActivates the focused control.
SpaceActivates the focused control.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Changing values examples