Feedback

Count Down

A real-time countdown timer with configurable target date, size variants, and expiration callback.

Days

Hrs

Min

Sec

Sizes

Three size variants for different contexts.

Days

Hrs

Min

Sec

Days

Hrs

Min

Sec

Days

Hrs

Min

Sec

Without Labels

A compact variant that hides unit labels.

Props

Prop	Type	Default	Description
`targetDate`	`Date \| string \| number`	`—`	The target date to count down to
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size variant
`showLabels`	`boolean`	`true`	Show unit labels below each box
`onEnd`	`() => void`	`—`	Callback when countdown reaches zero
`className`	`string`	`—`	Additional CSS classes

Usage

import { CountDown } from '@/components/ui/count-down';

// Set a target 24 hours from now
const target = new Date();
target.setHours(target.getHours() + 24);

// Default
<CountDown targetDate={target} />

// Large, no labels
<CountDown targetDate={target} size="lg" showLabels={false} />

Installation

$npx kachindo-ui add count-down