A live countdown with stat slots beside the clock, a LIVE state once the event starts, and hydration-safe rendering.
Schott Classic 2026
LIVE
- 13
- fields
- 4
- games guaranteed
Counts down to a date, ticking every second, with optional facts beside the clock ("13 fields", "4 games guaranteed"). Once the date passes it shows a pulsing LIVE label instead.
Install#
npx shadcn@latest add https://benhof.ai/r/event-countdown.json
import { EventCountdown } from "@/components/event-countdown"
;<EventCountdown
date="2026-07-11T11:30:00-04:00"
title="Schott Classic 2026"
stats={[{ label: "fields", value: 13 }]}
/>
Props#
| Prop | Type | Default | Description | |
|---|---|---|---|---|
date | `string \ | Date` | - | Event start. Include a timezone offset in ISO strings. |
title | string | - | Label above the clock. | |
stats | { label, value }[] | - | Extra facts rendered beside the clock. | |
live | string | "LIVE" | Shown once the event has started. |
Notes#
The clock subscribes via useSyncExternalStore, so server and client markup never disagree: the server renders a skeleton, the client fills in the digits after hydration and re-renders once per second - no setState-in-effect, no hydration warnings.