# Countdown

> The days, hours, minutes and seconds left until a launch, a sale's end or an event's doors, as one `<time>` naming the moment.

```ts
import { Countdown } from "@sdxc/ui/landing";
```

The time left from `now` as a `<time datetime>` that reads true with no script; `live` hydrates
CountdownLive (map it in the browser entry) to tick on the viewer's clock. Type it with
`--ui-countdown-value-{font,size,weight,color}`, `--ui-countdown-label-{font,size}` and `--ui-countdown-{gap,align}`.

## Examples

```tsx
<Countdown to="2027-04-15T07:00:00Z" now={ctx.requestTime} done="Doors are open" />
```

```tsx
<Countdown to={launch} done="Live now" labels={{ days: "días" }} live />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `to` | `DateInput` | The moment counted down to. |
| `now?` | `DateInput` | The moment counted from; pass the request's time so server and tests render the same text. |
| `labels?` | `Partial<Labels>` | Unit names, merged over the English ones. |
| `seconds?` | `boolean` | Shows the seconds unit and ticks every second; off, the minutes are the smallest unit. |
| `done` | `string` | What the countdown reads once the moment has passed, such as "Doors are open". |
| `live?` | `boolean` | Hydrates CountdownLive, which counts from the viewer's clock every second. Needs `@sdxc/ui/landing/countdown#CountdownLive` in the app's browser entry. |
| `"aria-label"?` | `string` | Accessible name for the `<time>`. |
| `id?` | `string` | Element id for the `<time>`. |