Clock

An elegant analog clock with a smooth sweeping (or bouncy ticking) second hand, minute ticks, a digital readout and any IANA time zone.

New York

London

Tokyo

Open

timeZone

label

size280

sweep

showSeconds

showDigital

hour12

showNumbers

accent

Installation

npx shadcn@latest add @glint-ui/clock

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/clock.json

Usage

import { Clock } from "@/components/ui/clock";

<Clock timeZone="Asia/Tokyo" />
<Clock size={160} sweep={false} showDigital={false} />

Props

Prop	Type	Default	Description
timeZone	"" \| "Europe/London" \| "America/New_York" \| "Asia/Tokyo" \| "Australia/Sydney" \| "Asia/Manila"	""	IANA time zone. Empty = viewer's local time.
label	string	—	Caption on the face. Defaults to the zone's city.
size	number	280	Diameter in px.
sweep	boolean	true	Smooth sweep; off ticks with a small bounce.
showSeconds	boolean	true	Show the second hand.
showDigital	boolean	true	Digital readout on the face.
hour12	boolean	false	12-hour readout with AM/PM.
showNumbers	boolean	true	Draw 12 / 3 / 6 / 9.
accent	string	"#ff5a36"	Second hand color.
className	string	—	Extra classes for the root element.