Timezone-safe countdown timer with live announcements.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

targetDate(required)

• Type: string | Date
• Target date/time (ISO string or Date object)

timezone

• Type: string - Default: undefined (uses browser timezone)
• Timezone to use (IANA timezone string)

interval

• Type: number - Default: 1000
• Update interval in milliseconds (uses rAF by default)

showMilliseconds

• Type: boolean - Default: false
• Show milliseconds

showDays

• Type: boolean - Default: true
• Show days

showHours

• Type: boolean - Default: true
• Show hours

showMinutes

• Type: boolean - Default: true
• Show minutes

showSeconds

• Type: boolean - Default: true
• Show seconds

labels

• Type: { days?: string
• Custom labels for time units

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-transition: var(--cc-motion-normal, 250ms); /* Cc Transition */--cc-easing: var(--cc-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)); /* Cc Easing */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-countdown
• .cc-countdown__complete
• .cc-countdown__complete-icon
• .cc-countdown__complete-text
• .cc-countdown__label
• .cc-countdown__segment
• .cc-countdown__segments
• .cc-countdown__separator
• .cc-countdown__value