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

Interactive Demo Playground

<timer-widget> Playground
⚙️ Configure Properties
Heading above the timer blocks.
ISO 8601 UTC date string to count down to (e.g. "2026-12-31T23:59:59Z").

Usage Code Generator 

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 API Reference

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
lazyLoad boolean undefined Defer starting the countdown interval until scrolled near the viewport (default: true)
lazyThreshold number undefined IntersectionObserver threshold, 0-1 (default: 0.1)
lazyRootMargin string undefined IntersectionObserver rootMargin (default: '200px')
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.