Countdown
A customizable React countdown component that dynamically displays only active time units, supporting multiple formats and precise millisecond accuracy.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Usages
Default
With Separator
With Labels
Labels Under
In Boxes
API
| Name | Type | Default | Description |
|---|---|---|---|
| date | Date - number | Countdown Date | |
| showDay | bolean | true | Show day |
| showHour | bolean | true | Show hour |
| showMinute | bolean | true | Show minute |
| showSecond | bolean | true | Show second |
| type | string | default | withSeparator - withLabels - labelsUnder - inBoxes - default |
| itemClassName | string | Item className | |
| rootClassName | string | Root className | |
| valueClassName | string | Value className | |
| labelClassName | string | Label className |