Timer

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/timer.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/timer.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/timer.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/timer.json
    

Usage

      Copy
      <script setup lang="ts">
import { Timer } from "@/components/ui/timer";
</script>

<template>
  <Timer.Root>
    <!-- … -->
  </Timer.Root>
</template>
    

Composition

      Copy
      Timer.Root
├── Timer.Area
│   ├── Timer.ItemGroup
│   │   ├── Timer.Item
│   │   └── Timer.ItemLabel
│   └── Timer.Separator
├── Timer.Control
│   └── Timer.ActionTrigger
├── Timer.Context
└── Timer.RootProvider
    

Examples

Countdown

You can create a countdown timer by setting the countdown prop to true and startMs to the initial time:

Interval

Use the interval prop to control how frequently the timer updates. This is useful for displaying milliseconds:

Events

The Timer component provides events that you can listen to for various timer-related actions.

• The onComplete event is triggered when the timer reaches its target time.
• The onTick event is called on each timer update, providing details about the current timer state.

Pomodoro

Here's an example of building a pomodoro timer that alternates between work and break sessions:

Root Provider

An alternative way to control the timer is to use the RootProvider component and the useTimer hook. This way you can access the state and methods from outside the component.

API

See Ark UI Timer docs for full props and examples.