StellarUI

<stellar-countdown>

Animated countdown display with digits and source-inspired timer behavior.

Properties

Component

Example

Preview

hrs min sec

The preview recalculates from the current time whenever you change the target offset.

Markup

Copy

<stellar-countdown
  label="Launch window"
  date="2028-04-02T00:00:00.000Z"
  delimiter=":"
  max-unit="hours"
  digits="2"
  style="font-size:3rem"
>
  <span slot="hours">hrs</span>
  <span slot="minutes">min</span>
  <span slot="seconds">sec</span>
</stellar-countdown>

API

Complete props, events, slots, and implementation notes for the shipped countdown.

Props

Prop	Type	Default
`label`	`string`	`''`
`date`	`string`	`''`
`delimiter`	`string`	`''`
`min-unit`	`seconds \| minutes \| hours \| days \| months \| years`	`seconds`
`max-unit`	`seconds \| minutes \| hours \| days \| months \| years`	`days`
`grouping`	`always \| never \| auto \| min2`	`always`
`digits`	`number`	`2`

Events

Event	Source	Notes
`tick`	`stellar-countdown`	Dispatched whenever the visible countdown values change. The event detail includes the current rendered units.
`finished`	`stellar-countdown`	Dispatched once when the effective target time is reached.

Slots

Slot	Notes
`seconds`	Overrides the visible label for seconds.
`minutes`	Overrides the visible label for minutes.
`hours`	Overrides the visible label for hours.
`days`	Overrides the visible label for days.
`months`	Overrides the visible label for months.
`years`	Overrides the visible label for years.

Notes

The visual digit animation ports the shipped `countdown` treatment, but the public tag is a real timer element instead of a static span wrapper.
Runtime behavior matches the shipped design: date math, ticking cadence, pause/resume support, and localized unit labels.
`stellar-countdown` starts automatically when it receives a valid future `date` and exposes `start(options?)` and `stop()` methods on the host.
Setting `min-unit` also changes the update interval so hours-only and days-only countdowns do not wake up every second.
Slots override only the visible unit labels; the underlying numeric values still come from the component's own timer state.