shadcn.io is not affiliated with official shadcn/ui

Shadcn Timer for React Radix UI

Countdown or stopwatch with controls.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Days

Hours

Minutes

Seconds

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/timer.json

Anatomy

Timer
├── TimerArea
├── TimerControl
├── TimerItem
│   ├── TimerItemValue
│   └── TimerItemLabel
├── TimerRestart
└── TimerSeparator

Usage

import {
  Timer,
  TimerArea,
  TimerItem,
  TimerItemGroup,
  TimerItemLabel,
  TimerSeparator,
} from "@/components/ui/timer";

<Timer autoStart>
  <TimerArea>
    <TimerItemGroup>
      <TimerItem type="days" />
      <TimerItemLabel>Days</TimerItemLabel>
    </TimerItemGroup>
    <TimerSeparator />
    <TimerItemGroup>
      <TimerItem type="hours" />
      <TimerItemLabel>Hours</TimerItemLabel>
    </TimerItemGroup>
    <TimerSeparator />
    <TimerItemGroup>
      <TimerItem type="minutes" />
      <TimerItemLabel>Minutes</TimerItemLabel>
    </TimerItemGroup>
    <TimerSeparator />
    <TimerItemGroup>
      <TimerItem type="seconds" />
      <TimerItemLabel>Seconds</TimerItemLabel>
    </TimerItemGroup>
  </TimerArea>
</Timer>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Controlled

PreviewCode

Countdown

PreviewCode

Countdown Date

PreviewCode

Custom Separator

PreviewCode

Interval

PreviewCode

Orientation Horizontal

PreviewCode

Orientation Vertical

PreviewCode

Pomodoro

PreviewCode

API Reference

Timer

div

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer"

data-scope"timer"

data-part"root"

TimerArea

div

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer-area"

data-scope"timer"

data-part"area"

aria-atomicboolean

aria-labelstring

role"timer"

TimerControl

div

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer-control"

data-scope"timer"

data-part"control"

TimerItem

div

PropType

idstring

typekeyof Time

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer-item"

data-scope"timer"

data-part"item"

data-typestring

CSS variableType

--valuestring

TimerPlay

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-scope"timer"

data-part"action-trigger"

type"button"

TimerSeparator

div

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer-separator"

data-scope"timer"

data-part"separator"

aria-hiddenboolean

remainingMsUntilDate

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-scope"timer"

data-part"root"

TimerItemGroup

div

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

orientation?"horizontal" | "vertical"

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer-item-group"

data-scope"timer"

data-part"root"

data-orientation?string

TimerItemLabel

div

PropType

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

className?string

AttributeType

data-slot"timer-item-label"

data-scope"timer"

data-part"root"

TimerActionTrigger

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-slot"timer-action"

data-scope"timer"

data-part"action-trigger"

type"button"

TimerPause

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-slot"timer-pause"

data-scope"timer"

data-part"action-trigger"

type"button"

TimerResume

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-slot"timer-resume"

data-scope"timer"

data-part"action-trigger"

type"button"

TimerStart

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-slot"timer-start"

data-scope"timer"

data-part"action-trigger"

type"button"

TimerReset

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-slot"timer-reset"

data-scope"timer"

data-part"action-trigger"

type"button"

TimerRestart

button

PropType

action"start" | "pause" | "resume" | "reset" | "restart"

idstring

autoStart?boolean

countdown?boolean

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object

asChild?boolean

AttributeType

data-slot"timer-restart"

data-scope"timer"

data-part"action-trigger"

type"button"

useTimer

PropType

autoStart?boolean

countdown?boolean

id?string

ids?object

interval?number

onComplete?() → void

onTick?(details: TickDetails) → void

startMs?number

targetMs?number

translations?object