# Countdown

Live countdown with rolling digits, inline or as blocks that brighten through the final ten seconds. At zero it can celebrate and show your result, or quietly fade if time ran out.

> Primitive · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/countdown
```

## Import

```tsx
import { Countdown } from "@/components/ui/countdown/countdown";
```

## Variants

- `blocks` — Blocks: `npx @lumioui/cli add pro/countdown-blocks`
- `compact` — Compact: `npx @lumioui/cli add pro/countdown-compact`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `to` | `Date | number` | Target time — epoch ms or Date. The display clamps at zero. |
| `format?` | `"auto" | "dhms" | "ms"` | Which units to render. "auto" (default) drops leading zero units — under an hour you get MM:SS, over a day DD:HH:MM:SS. "dhms" always shows all four, "ms" forces MM:SS. |
| `compact?` | `boolean` | Compact "2d 4h 12m" text instead of the colon clock. Inline layout only. |
| `layout?` | `"inline" | "blocks"` | "blocks" renders each unit as a labeled card; default "inline" clock. |
| `onComplete?` | `() => void` | Fires once when the countdown reaches zero. |
| `onResolve?` | `() => void` | Fires after the zero moment has held (~700ms) — move the screen on here. |
| `resolved?` | `React.ReactNode` | What the countdown resolves into, in place, after the hold ("On sale now"). |
| `celebrate?` | `boolean` | Zero is a launch (sheen + light, default) or a lapse (`false`: the digits dim). |
| `textClassName?` | `string` | Text classes for the digits. |
| `blockClassName?` | `string` | Classes for each unit tile in `layout="blocks"`. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/countdown