Countdown Timer

Counts down to a target date in real time, updating every second. Displays days, hours, minutes, and seconds in individual flip-card boxes. Emits (finished) when zero is reached.

free

Full Countdown (Days + Time)

Pass a Date or ISO string to targetDate.

Days

Hours

Min

Sec

HTML

TypeScript

Hours Only (No Days)

Set [showDays]="false" to hide the days segment for short-duration events.

Hours

Min

Sec

HTML

Custom Labels

Override the unit labels using daysLabel, hoursLabel, minutesLabel, secondsLabel.

Tage

Std

Min

Sek

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add countdown

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add countdown
// Paths are relative to aliases.components (default: src/app/components)
import { CountdownComponent } from './countdown/countdown.component';

@Component({
  selector: 'app-your-component',
  imports: [
    CountdownComponent
  ],
  template: `...`
})
export class YourComponent {}

API for countdown — generated from JSDoc in the library source.

API reference for countdown
API	Member	Type	Default	Description
`base-countdown`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`base-countdown`	`targetDate`	`Date \| string`	—	Instant the countdown ends. Accepts a `Date` or an ISO/parseable string.
`base-countdown`	`showDays`	`boolean`	`true`	Whether to show the days unit.
`base-countdown`	`daysLabel`	`unknown`	`'Days'`	Label under the days value.
`base-countdown`	`hoursLabel`	`unknown`	`'Hours'`	Label under the hours value.
`base-countdown`	`minutesLabel`	`unknown`	`'Min'`	Label under the minutes value.
`base-countdown`	`secondsLabel`	`unknown`	`'Sec'`	Label under the seconds value.
`base-countdown`	`(tick)`	`CountdownTime`	—	Emits on every tick with the remaining time breakdown.
`base-countdown`	`(finished)`	`void`	—	Emits once when the countdown reaches zero.