Chronos UI/ Timer Widget
View Source
⏳ Component

Timer Widget

Live countdown timer updating every second. Shows days, hours, minutes, and seconds to any target date.

npm install @chronos-ui/core

Live Preview

TimerWidget — live countdown
⏳ Sale ends in:
0Days
0Hours
0Minutes
0Seconds

Usage 

import TimerWidget from '@chronos-ui/core/react/TimerWidget';
import '@chronos-ui/core/theme.css';

<TimerWidget
  title="Sale ends in:"
  targetDate="2026-12-31T23:59:59Z"
/>
<script lang="ts">
  import TimerWidget from '@chronos-ui/core/svelte/TimerWidget.svelte';
</script>

<TimerWidget
  title="Sale ends in:"
  targetDate="2026-12-31T23:59:59Z"
/>
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/TimerWidget.js"></script>

<timer-widget
  title="Sale ends in:"
  target-date="2026-12-31T23:59:59Z"
></timer-widget>

Props

PropTypeDefaultDescription
targetDate required string — ISO 8601 date-time string; the countdown ticks towards this date
title string undefined Optional heading displayed above the timer blocks
className string undefined Additional CSS class names on the root element
Past dates: When targetDate is in the past all values show 0. Update or remove the component via your CMS when the countdown expires.
SSR: The timer renders 0 on the server then hydrates on the client, avoiding any hydration mismatch.