Add this component

npx zentauri-ui add world-clock

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Intl & Time

World Clock

Display multiple timezones as live clock cards with automatic ticking, day/night indicators, and local offset labels.

New York

☾4h

05:16 AMFri, Jul 17

London

☀+1h

10:16 AMFri, Jul 17

Tokyo

☾+9h

06:16 PMFri, Jul 17

World clock variants playground

Pick a card appearance, size, and layout to preview the world clock live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Card appearance

Card size

Layout

Show secondsShow dateShow day/nightShow offset

New York

☾4h

05:16 AMFri, Jul 17

London

☀+1h

10:16 AMFri, Jul 17

Tokyo

☾+9h

06:16 PMFri, Jul 17

World Clock API

Generated from the package prop types and variant definitions.

WorldClock

WorldClockProps

Variants

Prop	Type	Default
layout	`gridlistrow`	grid

Behavior

Prop	Type	Default
cardAppearance	`'default' \| 'outline' \| 'blue' \| 'green' \| 'red' \| 'gradient-blue' \| 'gradient-purple' \| 'glass' \| 'surface' \| null \| undefined`	none
cardSize	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none
hourCycle	`'h12' \| 'h23' \| undefined`	none
locale	`string \| undefined`	none
showDate	`boolean \| undefined`	none
showDayNight	`boolean \| undefined`	none
showOffsetFromLocal	`boolean \| undefined`	none
showSeconds	`boolean \| undefined`	none
zones*	`(string \| WorldClockZone)[]`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

WorldClockCardVariant

WorldClockCardVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'outline' \| 'blue' \| 'green' \| 'red' \| 'gradient-blue' \| 'gradient-purple' \| 'glass' \| 'surface' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

WorldClockVariant

WorldClockVariantProps

Behavior

Prop	Type	Default
layout	`'grid' \| 'row' \| 'list' \| null \| undefined`	none

WorldClockAnimated

WorldClockAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`WorldClockAnimation \| undefined`	none
cardAppearance	`'default' \| 'outline' \| 'blue' \| 'green' \| 'red' \| 'gradient-blue' \| 'gradient-purple' \| 'glass' \| 'surface' \| null \| undefined`	none
cardSize	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none
hourCycle	`'h12' \| 'h23' \| undefined`	none
layout	`'grid' \| 'row' \| 'list' \| null \| undefined`	none
locale	`string \| undefined`	none
showDate	`boolean \| undefined`	none
showDayNight	`boolean \| undefined`	none
showOffsetFromLocal	`boolean \| undefined`	none
showSeconds	`boolean \| undefined`	none
zones*	`(string \| WorldClockZone)[]`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

What it does

WorldClock renders a responsive grid of clock cards, one per timezone. Each card displays the current time with ticking seconds, a day/night indicator (sun/moon icon), the timezone abbreviation, and the UTC offset.

API

Accepts a zones array of IANA timezone strings, and optional props for 12/24 hour format, showSeconds, custom card renderers, and grid layout configuration.

Common use cases

Remote team dashboards showing every member's local time
Travel planning pages with destination time previews
Global event schedules with real-time countdowns

Accessibility

Each clock card is a live region (aria-live='polite') so screen readers announce time updates. The time, offset, and day/night status are exposed as accessible text labels.

Next.js integration notes

Import the client component via a dynamic wrapper. The grid layout works perfectly with responsive Tailwind breakpoints and can be nested inside Server Component pages.

FAQ

How many clocks can I display at once?

There is no hard limit. The component uses a single shared timer for efficient re-renders across all clock cards. Performance is smooth even with 20+ zones.

Do clocks sync with the user's system time?

Yes. Each card computes its displayed time from the browser's local time offset against the target IANA zone, so clocks stay in sync with the system clock automatically.