A live clock: an analog dial with a sweeping or ticking second hand, or digits that roll over, in any time zone.
pnpm dlx shadcn@latest add @latheui/clock-facePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Clock Face is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes. The accent is the --clock-accent variable, chart-1 by default.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "analog" | "digital" | "analog" | A dial with hands, or rolling digits. |
| time | Date | — | A fixed time to show. Without it the clock runs live. |
| timeZone | string | — | IANA time zone, such as "Europe/London". The visitor's own by default. |
| caption | string | — | A short caption on the face, such as a city. |
| motion | "smooth" | "tick" | "smooth" | Analog: a sweeping second hand, or one that springs from second to second. |
| numerals | "none" | "quarters" | "all" | "roman" | "quarters" | Analog: the numbers around the dial. |
| ticks | "minutes" | "hours" | "none" | "minutes" | Analog: the marks around the edge. |
| seconds | boolean | true | Show the second hand, or the seconds digits. |
| hour24 | boolean | false | Digital: 24-hour time instead of AM and PM. |
| size | number | 220 analog, 64 digital | The dial's diameter, or the digits' font size, in px. |
<ClockFace numerals="none" ticks="hours" seconds={false} className="[--clock-accent:var(--primary)]" />