Neon Clock
Analog and digital clocks with tube hands and a blinking colon.
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/neon-clock.jsonUsage
import { NeonClock } from "@/components/ui/neon-clock"
<NeonClock timeZone="Asia/Tokyo" label="Tokyo" />Examples
World clocks
Any IANA time zone. The label names each clock for screen readers too.
Digital
Neon numerals with a colon that blinks on the second. Looks best with a monoline face such as Tilt Neon.
Without seconds
showSeconds={false} with a fixed 24-hour cycle.
API reference
Renders a <div role="timer">. Time is written straight to the DOM once a second, so React never re-renders for it.
| Prop | Type | Default |
|---|---|---|
variant | "analog"A dial with tube hands, or neon numerals. | "analog" |
timeZone | stringIANA zone such as "Europe/London". Unknown zones fall back to the viewer's. | viewer's |
showSeconds | booleanThe seconds hand on the dial, or a seconds pair on the digital face. | true |
hourCycle | 12Digital face only. 12 adds AM/PM and drops the leading zero. | from locale |
label | ReactNodeCaption under the clock. Also its accessible name. | None |
size | "sm"Dial diameter 128, 184 or 260px (the --clock-size variable); numerals 32, 52 or 80px (the font size). Responsive classes like lg:[--clock-size:260px] or lg:text-[80px] override it. | "md" |
color | NeonColorPalette name or hex. Falls back to --neon-accent, then cyan. | inherited |
Accessibility
- It's role="timer", named by label, with visually hidden text holding the current time. Timers aren't live regions, so nothing is announced every second.
- Nothing time-based renders on the server: hands hold a pose and digits show dashes until the first tick, so hydration always matches.
- The digital face uses your font. It looks best with a monoline face such as Tilt Neon; pass it through className or style.
- With reduced motion the hands jump to the time without sweeping, the seconds hand ticks without bouncing, and the colon stays lit.