Countdown

Countdown timer with customizable format and styling.

Import

import { Countdown } from 'asterui'

Examples

Basic Countdown

Simple countdown timer.

01:00:00

import { Countdown } from 'asterui'
import { useMemo } from 'react'

function App() {
  const target = useMemo(() => Date.now() + 60 * 60 * 1000, [])
  
  return (
      <Countdown value={target} />
    )
}

export default App

With Days

Include days in the countdown.

03:00:00:00

import { Countdown } from 'asterui'
import { useMemo } from 'react'

function App() {
  const target = useMemo(() => Date.now() + 3 * 24 * 60 * 60 * 1000, [])
  
  return (
      <Countdown value={target} format="DD:HH:MM:SS" />
    )
}

export default App

Sizes

Different size variants.

01:00:00

import { Countdown, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 60 * 60 * 1000)
  
  return (
      <Space direction="vertical" size="lg">
        <Countdown value={target} size="xs" />
        <Countdown value={target} size="sm" />
        <Countdown value={target} size="md" />
        <Countdown value={target} size="lg" />
      </Space>
    )
}

export default App

With Labels

Show labels under each unit.

02days

00hours

00min

00sec

import { Countdown } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 2 * 24 * 60 * 60 * 1000)
  
  return (
      <Countdown
        value={target}
        format="DD:HH:MM:SS"
        showLabels
      />
    )
}

export default App

Boxed Style

Each unit in a styled box.

01days

00hours

00min

00sec

import { Countdown } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 24 * 60 * 60 * 1000)
  
  return (
      <Countdown
        value={target}
        format="DD:HH:MM:SS"
        showLabels
        boxed
      />
    )
}

export default App

With Callback

Execute callback when countdown finishes.

00:20

import { Countdown, notification } from 'asterui'
import { useState } from 'react'

function App() {
  const [target, setTarget] = useState(() => Date.now() + 20 * 1000)
  
  const handleFinish = () => {
    notification.success({ message: 'Countdown finished!' })
    setTarget(Date.now() + 20 * 1000) // Restart
  }
  
  return (
      <Countdown
        key={target}
        value={target}
        format="MM:SS"
        onFinish={handleFinish}
      />
    )
}

export default App

API

`Countdown`

Property	Description	Type	Default
`value`	Target timestamp in milliseconds or Date object	`number \| Date`	-
`format`	Format string: ‘D’ days, ‘H’ hours, ‘M’ minutes, ‘S’ seconds	`string`	`'HH:MM:SS'`
`onFinish`	Callback when countdown reaches zero	`() => void`	-
`onChange`	Callback on each tick with remaining time	`(value: number) => void`	-
`size`	Size variant	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`showLabels`	Show labels under each unit	`boolean`	`false`
`labels`	Custom labels for each unit	`{ days?: string, hours?: string, minutes?: string, seconds?: string }`	-
`boxed`	Show box style around each unit	`boolean`	`false`
`className`	Additional CSS classes	`string`	-

Accessibility

Uses aria-live for announcing countdown updates
Provides aria-label for each countdown unit
Labels are visually associated with their values