The CountdownFx component wraps CountFx to create beautiful countdown timers. It automatically calculates and displays the time remaining until a target date with smooth wheel animations and colon separators.

CountdownFx

<CountdownFx
  targetDate={new Date(Date.now() + 24 * 60 * 60 * 1000)}
  variant="display-strong-l"
  format="HH:MM:SS"
/>

Format Options

Choose between different time formats based on your needs.

Formats

HH:MM:SS

MM:SS

DD:HH:MM:SS

<CountdownFx
  targetDate={new Date(Date.now() + 5 * 60 * 60 * 1000)}
  format="HH:MM:SS"
/>

<CountdownFx
  targetDate={new Date(Date.now() + 10 * 60 * 1000)}
  format="MM:SS"
/>

<CountdownFx
  targetDate={new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)}
  format="DD:HH:MM:SS"
/>

Effects

Use different animation effects from CountFx.

Effects

Wheel Effect

Smooth Effect

Simple Effect

<CountdownFx
  targetDate={targetDate}
  effect="wheel"
/>

<CountdownFx
  targetDate={targetDate}
  effect="smooth"
/>

<CountdownFx
  targetDate={targetDate}
  effect="simple"
/>

Launch Countdown

Create compelling launch countdowns for product releases, events, or promotions.

Launch Countdown

Launching Soon

Get ready for something amazing

<Column gap="16" fill center padding="32" data-solid="contrast" radius="l">
  <Heading variant="display-strong-xl" align="center">
    Launching Soon
  </Heading>
  <CountdownFx
    targetDate={new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)}
    variant="display-strong-l"
    format="DD:HH:MM:SS"
    onBackground="brand-medium"
  />
  <Text variant="body-default-m">
    Get ready for something amazing
  </Text>
</Column>

On Complete Callback

Execute a function when the countdown reaches zero.

On Complete

<CountdownFx
  targetDate={new Date(Date.now() + 5000)}
  format="MM:SS"
  onComplete={() => {
    console.log('Countdown complete!');
    // Trigger your action here
  }}
/>

API reference

Prop	Type	Default
targetDaterequired What it counts down to.	Datestring	—
format Which units to show.	HH:MM:SSDD:HH:MM:SSMM:SS	HH:MM:SS
effect How the digits change.	CountFxProps['effect']	wheel
onComplete Called once the target passes.	() => void	—
speed	number	1000
easing	linearease-outease-in-out	ease-out
…and every TextProps prop	inherited	—