Time Display

About

A minimal live clock that updates every second, respects a specified timezone, and renders with a mono font that fits editorial layouts. Uses Intl.DateTimeFormat under the hood for accurate timezone conversion.

Handles hydration safely by rendering an invisible placeholder on the server that matches the client's first render exactly.

Usage

import TimeDisplay from "@/components/time-display";
 
export default function Page() {
  return (
    <div>
      <TimeDisplay timezone="Asia/Dhaka" />
      <TimeDisplay timezone="Europe/Berlin" showLabel={false} />
    </div>
  );
}