Timer

Countdown or stopwatch with controls.

Docs API

days

hours

minutes

seconds

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/timer.json

Usage


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


<Timer targetMs={3600000} startMs={2400000}>
  <TimerArea>
    <TimerItem type="hours" />
    <TimerSeparator>:</TimerSeparator>
    <TimerItem type="minutes" />
    <TimerSeparator>:</TimerSeparator>
    <TimerItem type="seconds" />
  </TimerArea>
  <TimerControl>
    <TimerActionTrigger action="start">Start</TimerActionTrigger>
    <TimerActionTrigger action="pause">Pause</TimerActionTrigger>
  </TimerControl>
</Timer>

Examples

Countdown

Create a countdown by setting countdown to true and startMs to the initial duration.

minutes

seconds

Interval

Use the interval prop to control update frequency.

seconds

000

Events

Listen to onTick and onComplete for timer events.

minutes

seconds

Ticks: 0

Pomodoro

Alternate between work and break sessions using onComplete.

Work Session

minutes

seconds

Completed cycles: 0

API Reference

Timer

Prop	Type	Default
`targetMs`	`number`	`0`
`startMs`	`number`	`0`
`countdown`	`boolean`	`false`
`interval`	`number`	`1000`
`onTick`	`(details: TickDetails) => void`	`-`
`onComplete`	`() => void`	`-`

TimerArea

Prop	Type	Default
`className`	`string`	`-`

TimerItem

Prop	Type	Default
`type`	`"days"` \| `"hours"` \| `"minutes"` \| `"seconds"` \| `"milliseconds"`	`"seconds"`

TimerSeparator

Prop	Type	Default
`className`	`string`	`-`

TimerControl

Prop	Type	Default
`className`	`string`	`-`

TimerActionTrigger

Prop	Type	Default
`action`	`"start"` \| `"pause"` \| `"resume"` \| `"reset"`	`"start"`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Countdown Interval Events Pomodoro API Reference Timer TimerArea TimerItem TimerSeparator TimerControl TimerActionTrigger