Twilight docs

A countdown timer to a given date, showing days, hours, minutes and seconds that update every second.

A countdown timer to a given date, showing days, hours, minutes and seconds that update every second. A theme would use it for offers, sales or pre-order deadlines. When the time is reached it shows an "offer ended" message (or end-text). With pre-order it shows the expected availability date and, if enabled, a countdown to the pre-order end date. An unparseable date shows a localized "invalid date" message.

Use it

In HTML or JSX, use the tag <salla-count-down> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Try it

web-components/salla-count-down

Example

import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down';

export function Example() {
  return (
    <SallaCountDown date="2026-12-31 23:59:59" labeled boxed />
  );
}

import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down';

export function Example() {
  return (
    <SallaCountDown date="2026-12-31" prefixText="Offer ends in" withButton buttonText="Shop now" buttonHref="/products" autoSegments />
  );
}

Properties

Property	Attribute	Description	Type	Default
`autoSegments`	`auto-segments`	If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0. Matches salla-timer behaviour. Off by default for backward compatibility.	`boolean`	`false`
`boxColor`	`box-color`	Background color of each box when boxed is enabled. Accepts any valid CSS color value (e.g. '#1a3c34', 'var(--color-primary)')	`string`
`boxTheme`	`box-theme`	Theme color name to use as the box background when boxed is enabled. Maps to the corresponding CSS variable (e.g. 'primary' → var(--color-primary)). Available values: 'primary' \| 'primary-dark' \| 'primary-light' \| 'primary-reverse' \| 'main' Takes precedence over box-color when both are set.	`string`
`boxed`	`boxed`	When true, each number is shown in its own box.	`boolean`
`buttonHref`	`button-href`	The link the button points to. Used with `with-button` and `button-text`.	`string`
`buttonIcon`	`button-icon`	CSS class name(s) for an icon shown inside the button, for example `sicon-cart`. Used with `with-button`.	`string`
`buttonText`	`button-text`	The button label. Used with `with-button`; no button is rendered without it.	`string`
`color`	`color`	The color style of the countdown: `primary`, `light` or `dark`. Defaults to `dark`.	`"dark" \| "light" \| "primary"`	`'dark'`
`date`	`date`	The date to count down to. Supported formats: Parsed as KSA time (UTC+3): - "YYYY-MM-DD HH:mm:ss" (e.g. "2023-05-22 16:37:52") - "YYYY-M-D HH:mm:ss" (e.g. "2023-5-22 16:37:52") unpadded month/day accepted - "YYYY-MM-DD" (e.g. "2023-05-22") counts down to 23:59:59 of that day - "YYYY-M-D" (e.g. "2026-5-15", "2026-05-5") unpadded month/day accepted - "MM-DD-YYYY" (e.g. "04-28-2026") counts down to 23:59:59 of that day - "MM-DD-YYYY,HH:mm:ss am/pm" (e.g. "12-23-2026,03:23:00 pm") Parsed as browser local time: - "YYYY/MM/DD HH:mm:ss" (e.g. "2023/05/22 16:37:52") - "YYYY/MM/DD" (e.g. "2023/05/22") counts down to 23:59:59 of that day - "MM/DD/YYYY HH:mm:ss" (e.g. "05/22/2023 16:37:52") - "MM/DD/YYYY" (e.g. "05/22/2023") counts down to 23:59:59 of that day	`string`
`digits`	`digits`	Digit style: `en` always uses Latin digits, `auto` follows the page language. Defaults to `auto`.	`"auto" \| "en"`	`'auto'`
`endOfDay`	`end-of-day`	When true, counts down to 23:59:59 of the day in `date`, ignoring any time part.	`boolean`
`endText`	`end-text`	The text shown when the countdown ends. When empty, a localized "offer ended" message is used.	`string`
`horizontal`	`horizontal`	When true, applies a compact horizontal layout.	`boolean`
`labeled`	`labeled`	When true, shows a unit label (days, hours, minutes, seconds) under each number.	`boolean`
`listPadding`	`list-padding`	Horizontal padding applied to the list (e.g. '20px', '1rem', '5%'). Defaults to no padding.	`string`
`preOrder`	`pre-order`	Pre-order settings, as an object or a JSON string, with the shape `{ "activate_countdown": boolean, "availability_date"?: string, "end_date"?: string }`. `availability_date` is shown as "expected to be available on" in the page locale. `end_date` is the date the countdown runs to and replaces `date`. The countdown itself only appears when `activate_countdown` is true. Dates use the same formats as `date`, or a form such as `Jan 2, 2023 16:37:52`. Invalid JSON is ignored.	`PreOrder \| string`
`prefixText`	`prefix-text`	Text shown before the countdown, for example "Offer ends in".	`string`
`size`	`size`	The size of the countdown: `sm`, `md` or `lg`. Defaults to `md`.	`"lg" \| "md" \| "sm"`	`'md'`
`withButton`	`with-button`	When true, renders an action button next to the countdown. The button only appears if `button-text` is also set.	`boolean`