Timezone

Inline live clock for city names or IANA timezones.

Installation

npx shadcn@latest add @iconiq/timezone

File Structure

Usage

import { Timezone } from "@/components/ui/timezone";

export function TimezonePreview() {
  return (
    <div className="flex max-w-2xl flex-wrap items-baseline justify-center gap-x-2 gap-y-2 text-balance text-center font-medium text-sm leading-snug tracking-tight sm:text-base dark:text-neutral-100">
      <span>Right now in</span>
      <span>San Francisco</span>
      <span>it is</span>
      <Timezone live showZoneLabel zone="San Francisco" zoneName="abbreviation" />
      <span>for the west coast team.</span>
    </div>
  );
}

Props

Props
Description

Timezone

zone

City alias such as `San Francisco`, common shorthand like `NYC`, region/city IANA paths such as `Africa/Cairo`, or any of the 400+ IANA timezones from `Intl.supportedValuesOf('timeZone')`.

Type string

format

Controls whether the clock renders with a 12-hour or 24-hour display.

Type "12h" | "24h"·Default "12h"

showZoneLabel

When true, appends a timezone label after the clock.

Type boolean·Default true

showAbbreviation

Deprecated alias for `showZoneLabel`. Prefer `showZoneLabel` in new code.

Type boolean·Default true

zoneName

Controls the label style when `showZoneLabel` is true. `abbreviation` renders IST, EST, or PST. `offset` renders GMT-style labels such as GMT+5:30.

Type "abbreviation" | "offset"·Default "abbreviation"

live

When true, updates every second and includes seconds in the formatted output.

Type boolean·Default false

locale

Locale passed to `Intl.DateTimeFormat` for number and time formatting.

Type string·Default "en-US"

fallback

Custom content rendered when `zone` cannot be resolved. Defaults to `Unknown timezone: {zone}`.

Type ReactNode

onError

Called when `zone` cannot be resolved. Useful for logging or analytics.

Type (zone: string) => void

animate

When false, disables digit and separator motion even if reduced motion is off.

Type boolean·Default true

ariaLive

Adds `aria-live` to a screen-reader-only layer. Defaults to `polite` for minute clocks and off for `live` second clocks.

Type boolean | "polite" | "assertive" | "off"

className

Optional class names applied to the rendered `time` element.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Right now inSan Franciscoit isfor the distributed team.