Countdown

Countdown is a flexible family of components for building animated and accessible countdown timers. It provides a headless timer logic provider, a stylable wrapper, and animated number counters for smooth transitions.

Basic Usage

A simple countdown timer using the CountdownTimers, Countdown, and Counter components. The timer starts from 95 seconds and counts down to zero.

Code Example
Basic.vue
 Components 
The Countdown components include the following:
  • Countdown - The wrapper for Counter components, allows custom tag.
  • Counter - Animated number for countdown display.
  • CountdownTimers - Headless timer logic provider for countdowns.
Countdown
The Countdown component wraps one or more Counter components. It accepts a prop for customizing the HTML tag or component used as the wrapper.
Countdown Props  Type  Description 
is
string | Component
The HTML tag or component to use as the wrapper. Defaults to span.
Countdown Slots  Description 
default
The default slot. Place one or more Counter components here.
Counter
The Counter component animates and displays a single number in the countdown. Use multiple for split timers (e.g., hours, minutes, seconds).
Counter Props  Type  Description 
value
number
The number to display (usually from CountdownTimers).
is
string | Component
The HTML tag or component to use as the wrapper. Defaults to span.
CountdownTimers
CountdownTimers is a headless component that provides all timer logic and values via its default slot scope. Use it to build custom countdown UIs.
CountdownTimers Props  Type  Description 
duration-in-seconds
number
The total number of seconds for the countdown. Used if until-date is not provided.
until-date
Date
The target date/time to count down to. If provided, takes precedence over duration-in-seconds.
CountdownTimers Events  Arguments  Description 
done
none
Emitted when the countdown reaches zero.
CountdownTimers Slots  Description 
default
The default slot is a scoped slot exposing the following values:
  • targetDate: The Date object representing the countdown target.
  • totalSeconds: The number of whole seconds remaining.
  • totalMinutes: The number of whole minutes remaining.
  • totalHours: The number of whole hours remaining.
  • totalDays: The number of whole days remaining.
  • totalWeeks: The number of whole weeks remaining.
  • totalMonths: The number of whole months remaining.
  • split: An object with { days, hours, minutes, seconds } for easy split-timer UIs.
Examples
Large Countdown
A countdown timer with a larger display and custom text component wrapper. This example uses the is prop to render the countdown inside a custom component and applies larger text styling.
 Code Example 
Large.vue
Split Timers
A countdown timer that displays hours, minutes, and seconds as separate counters. The split object from CountdownTimers makes it easy to create split-timer UIs.
 :  : 
 Code Example 
SplitTimers.vue
DaisyUI Kit 🌼