Countdown

A versatile timer that counts down to any specific date, displaying time remaining in years, days, hours, minutes, and seconds.

The Countdown functionality is powered by the Timezz React component.

Available props*:

date - Target date for the countdown. Can be date instance new Date(), string '2025-12-01 03:15' or timestamp 833156100000.
pause={false} - Whether the timer should be paused
stopOnZero={true} - Specifies if a clear selection button should appear after the user selects an option.
onUpdate={(event) => console.log(event)} - Callback function that is called every second when the countdown updates. It receives an event object containing the updated time values (years, days, hours, minutes, and seconds).

* All props are required

Basic example

years

days

hours

mins

secs

'use client'

import { useState } from 'react'
import type { UpdateEvent } from 'timezz'
import { Timezz } from 'timezz/react'
import Button from 'react-bootstrap/Button'

export default function CountdownBasicDemo() {
  const [paused, setPaused] = useState(false)

  let buttonLabel = paused ? (
    <>
      <i className="ci-play fs-base me-1 ms-n1"/>
      Play
    </>
  ) : (
    <>
      <i className="ci-pause fs-base me-1 ms-n1"/>
      Pause
    </>
  )

  const onUpdate = (event: UpdateEvent) => {
    console.log(event)
  }

  return (
    <>
      <Timezz date="10/15/2030 12:00" pause={paused} stopOnZero={true} onUpdate={onUpdate} className="d-flex">
        <div className="text-center">
          <div className="h4 mb-0" data-years />
          <span className="fs-sm">years</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
        <div className="text-center">
          <div className="h4 mb-0" data-days />
          <span className="fs-sm">days</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
        <div className="text-center">
          <div className="h4 mb-0" data-hours />
          <span className="fs-sm">hours</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
        <div className="text-center">
          <div className="h4 mb-0" data-minutes />
          <span className="fs-sm">mins</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
        <div className="text-center">
          <div className="h4 mb-0" data-seconds />
          <span className="fs-sm">secs</span>
        </div>
      </Timezz>
      <Button variant="outline-secondary mt-3" onClick={() => setPaused(!paused)}>
        {buttonLabel}
      </Button>
    </>
  )
}

Display no years

days

hours

mins

secs

'use client'

import { Timezz } from 'timezz/react'

export default function CountdownNoYearsDemo() {
  return (
    <Timezz date="10/15/2030 12:00" pause={false} stopOnZero={true} onUpdate={(event) => event} className="d-flex">
      <div className="text-center">
        <div className="h4 mb-0" data-days />
        <span className="fs-sm">days</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 mb-0" data-hours />
        <span className="fs-sm">hours</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 mb-0" data-minutes />
        <span className="fs-sm">mins</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 mb-0" data-seconds />
        <span className="fs-sm">secs</span>
      </div>
    </Timezz>
  )
}

Sizing

years

days

hours

mins

secs

years

days

hours

mins

secs

years

days

hours

mins

secs

years

days

hours

mins

secs

years

days

hours

mins

secs

years

days

hours

mins

secs

'use client'

import Stack from 'react-bootstrap/Stack'
import { Timezz } from 'timezz/react'

export default function CountdownSizingDemo() {
  return (
    <>
      {/* To adjust the size of the countdown, apply heading classes
        (.h1, .h2, .h3, ..., .display-1, .display-2, .display-3, ...) to the numbers
        and body size classes (.fs-xs, .fs-sm, .fs-lg, ...) to the labels.
      */}
      <Stack gap={4}>
        {[
          { numberSizeClass: 'h1', labelSizeClass: 'fs-lg', separatorSizeClass: 'fs-3' },
          { numberSizeClass: 'h2', labelSizeClass: 'fs-base', separatorSizeClass: 'fs-4' },
          { numberSizeClass: 'h3', labelSizeClass: 'fs-sm', separatorSizeClass: 'fs-4' },
          { numberSizeClass: 'h4', labelSizeClass: 'fs-sm', separatorSizeClass: 'fs-xl' },
          { numberSizeClass: 'h5', labelSizeClass: 'fs-xs', separatorSizeClass: 'fs-lg' },
          { numberSizeClass: 'h6', labelSizeClass: 'fs-xs', separatorSizeClass: 'fs-base' },
        ].map(({ numberSizeClass, labelSizeClass, separatorSizeClass }, index) => (
          <Timezz
            key={index}
            date="10/15/2030 12:00"
            pause={false}
            stopOnZero={true}
            onUpdate={(event) => event}
            className="d-flex"
          >
            <div className="text-center">
              <div className={`${numberSizeClass} mb-0`} data-years />
              <span className={labelSizeClass}>years</span>
            </div>
            <span className={`animate-blinking text-body-secondary ${separatorSizeClass} mx-2`}>:</span>
            <div className="text-center">
              <div className={`${numberSizeClass} mb-0`} data-days />
              <span className={labelSizeClass}>days</span>
            </div>
            <span className={`animate-blinking text-body-secondary ${separatorSizeClass} mx-2`}>:</span>
            <div className="text-center">
              <div className={`${numberSizeClass} mb-0`} data-hours />
              <span className={labelSizeClass}>hours</span>
            </div>
            <span className={`animate-blinking text-body-secondary ${separatorSizeClass} mx-2`}>:</span>
            <div className="text-center">
              <div className={`${numberSizeClass} mb-0`} data-minutes />
              <span className={labelSizeClass}>mins</span>
            </div>
            <span className={`animate-blinking text-body-secondary ${separatorSizeClass} mx-2`}>:</span>
            <div className="text-center">
              <div className={`${numberSizeClass} mb-0`} data-seconds />
              <span className={labelSizeClass}>secs</span>
            </div>
          </Timezz>
        ))}
      </Stack>
    </>
  )
}

Colors

years

days

hours

mins

secs

'use client'

import { Timezz } from 'timezz/react'

export default function CountdownColorsDemo() {
  return (
    <Timezz date="10/15/2030 12:00" pause={false} stopOnZero={true} onUpdate={(event) => event} className="d-flex">
      <div className="text-center">
        <div className="h4 text-primary mb-0" data-years />
        <span className="fs-sm text-primary opacity-75">years</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 text-success mb-0" data-days />
        <span className="fs-sm text-success opacity-75">days</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 text-warning mb-0" data-hours />
        <span className="fs-sm text-warning opacity-75">hours</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 text-danger mb-0" data-minutes />
        <span className="fs-sm text-danger opacity-75">mins</span>
      </div>
      <span className="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div className="text-center">
        <div className="h4 text-info mb-0" data-seconds />
        <span className="fs-sm text-info opacity-75">secs</span>
      </div>
    </Timezz>
  )
}

Cards example

years

days

hours

mins

secs

years

days

hours

mins

secs

years

days

hours

mins

secs

years

days

hours

mins

secs

'use client'

import { Timezz } from 'timezz/react'

export default function CountdownCardsDemo() {
  return (
    <>
      {/* Card style: Border */}
      <Timezz
        date="10/15/2030 12:00"
        pause={false}
        stopOnZero={true}
        onUpdate={() => {}}
        className="d-flex flex-wrap mb-4"
      >
        <div className="text-center mb-2">
          <div className="border rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-years />
          </div>
          <span className="fs-sm">years</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="border rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-days />
          </div>
          <span className="fs-sm">days</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="border rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-hours />
          </div>
          <span className="fs-sm">hours</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="border rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-minutes />
          </div>
          <span className="fs-sm">mins</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="border rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-seconds />
          </div>
          <span className="fs-sm">secs</span>
        </div>
      </Timezz>

      {/* Card style: Body background + shadow */}
      <Timezz
        date="10/15/2030 12:00"
        pause={false}
        stopOnZero={true}
        onUpdate={() => {}}
        className="d-flex flex-wrap mb-4"
      >
        <div className="text-center mb-2">
          <div className="bg-body rounded shadow-sm p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-years />
          </div>
          <span className="fs-sm">years</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body rounded shadow-sm p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-days />
          </div>
          <span className="fs-sm">days</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body rounded shadow-sm p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-hours />
          </div>
          <span className="fs-sm">hours</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body rounded shadow-sm p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-minutes />
          </div>
          <span className="fs-sm">mins</span>
        </div>
        <span className="animate-blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body rounded shadow-sm p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-seconds />
          </div>
          <span className="fs-sm">secs</span>
        </div>
      </Timezz>

      {/* Card style: Secondary background */}
      <Timezz
        date="10/15/2030 12:00"
        pause={false}
        stopOnZero={true}
        onUpdate={() => {}}
        className="d-flex flex-wrap mb-4"
      >
        <div className="text-center mb-2">
          <div className="bg-body-secondary rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-years />
          </div>
          <span className="fs-sm">years</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body-secondary rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-days />
          </div>
          <span className="fs-sm">days</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body-secondary rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-hours />
          </div>
          <span className="fs-sm">hours</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body-secondary rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-minutes />
          </div>
          <span className="fs-sm">mins</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-body-secondary rounded p-2">
            <div className="h3 fw-medium mb-0 mx-1" data-seconds />
          </div>
          <span className="fs-sm">secs</span>
        </div>
      </Timezz>

      {/* Card style: Theme subtle backgrounds + color */}
      <Timezz
        date="10/15/2030 12:00"
        pause={false}
        stopOnZero={true}
        onUpdate={() => {}}
        className="d-flex flex-wrap"
      >
        <div className="text-center mb-2">
          <div className="bg-warning-subtle rounded p-2">
            <div className="text-warning h3 fw-medium mb-0 mx-1" data-years />
          </div>
          <span className="text-warning fs-sm">years</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-primary-subtle rounded p-2">
            <div className="text-primary h3 fw-medium mb-0 mx-1" data-days />
          </div>
          <span className="text-primary fs-sm">days</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-info-subtle rounded p-2">
            <div className="text-info h3 fw-medium mb-0 mx-1" data-hours />
          </div>
          <span className="text-info fs-sm">hours</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-danger-subtle rounded p-2">
            <div className="text-danger h3 fw-medium mb-0 mx-1" data-minutes />
          </div>
          <span className="text-danger fs-sm">mins</span>
        </div>
        <span className="blinking text-body-secondary fs-2 mx-2">:</span>
        <div className="text-center mb-2">
          <div className="bg-success-subtle rounded p-2">
            <div className="text-success h3 fw-medium mb-0 mx-1" data-seconds />
          </div>
          <span className="text-success fs-sm">secs</span>
        </div>
      </Timezz>
    </>
  )
}