Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Variant

Locale Arabic gets its own digits and the dual; Russian has three plurals.

Show Labels

Precision Decimal places of a second.

Days In Hours

Overtime Keep counting upwards past the deadline.

import { createCountdownWidget } from '@devix-labs/countdown';
import '@devix-labs/countdown/styles.css';

createCountdownWidget(document.querySelector('#target'), {
  deadline: '2026-12-31T23:59:59Z',
  variant: 'boxes',
  locale: 'en',
  showLabels: true,
  precision: 0,
  daysInHours: false,
  overtime: false
});

import { Countdown } from '@devix-labs/countdown/react';
import '@devix-labs/countdown/styles.css';

<Countdown
  deadline="2026-12-31T23:59:59Z"
  variant="boxes"
  locale="en"
  showLabels
  precision={0}
/>

<script setup>
import { Countdown } from '@devix-labs/countdown/vue';
import '@devix-labs/countdown/styles.css';
</script>

<template>
  <Countdown
  deadline="2026-12-31T23:59:59Z"
  variant="boxes"
  locale="en"
  show-labels
  :precision="0"
/>
</template>

<script>
  import { countdown } from '@devix-labs/countdown/svelte';
  import '@devix-labs/countdown/styles.css';
</script>

<div use:countdown={{
  deadline: '2026-12-31T23:59:59Z',
  variant: 'boxes',
  locale: 'en',
  showLabels: true,
  precision: 0,
  daysInHours: false,
  overtime: false
}} />

Every option here is in the documentation, along with the ones that are not worth a control.