Relative Time

A component that displays time in various timezones.

Installation

npx love-ui@latest add relative-time

Usage

import { RelativeTime, RelativeTimeZone, RelativeTimeZoneLabel, RelativeTimeZoneDisplay, RelativeTimeZoneDate } from "@/components/relative-time"

<RelativeTime>
  <RelativeTimeZone timezone="America/Los_Angeles">
    <RelativeTimeZoneLabel>Los Angeles</RelativeTimeZoneLabel>
    <RelativeTimeZoneDisplay />
    <RelativeTimeZoneDate />
  </RelativeTimeZone>
  <RelativeTimeZone timezone="America/New_York">
    <RelativeTimeZoneLabel>New York</RelativeTimeZoneLabel>
    <RelativeTimeZoneDisplay />
    <RelativeTimeZoneDate />
  </RelativeTimeZone>
</RelativeTime>

Features

Displays multiple timezones simultaneously
Supports both controlled and uncontrolled time states
Auto-updates every second when no time is provided
Customizable date and time format options
Clean, minimal UI with timezone labels and formatted times
Responsive layout with flex positioning

Examples

Custom date format

EST

Thursday, November 6, 2025

05:12:01 PM

GMT

Thursday, November 6, 2025

10:12:01 PM

JST

Thursday, November 6, 2025

07:12:01 AM

"use client";

import {
  RelativeTime,
  RelativeTimeZone,
  RelativeTimeZoneDate,
  RelativeTimeZoneDisplay,
  RelativeTimeZoneLabel,
} from "../../../../../packages/relative-time";

const timezones = [
  { label: "EST", zone: "America/New_York" },
  { label: "GMT", zone: "Europe/London" },
  { label: "JST", zone: "Asia/Tokyo" },
];

const Example = () => (
  <div className="rounded-md border bg-background p-4">
    <RelativeTime dateFormatOptions={{ dateStyle: "full" }}>
      {timezones.map(({ zone, label }) => (
        <RelativeTimeZone key={zone} zone={zone}>
          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>
          <RelativeTimeZoneDate />
          <RelativeTimeZoneDisplay />
        </RelativeTimeZone>
      ))}
    </RelativeTime>
  </div>
);

export default Example;

Custom time format

EST

November 6, 2025

10:12 PM

GMT

November 6, 2025

10:12 PM

JST

November 7, 2025

10:12 PM

"use client";

import {
  RelativeTime,
  RelativeTimeZone,
  RelativeTimeZoneDate,
  RelativeTimeZoneDisplay,
  RelativeTimeZoneLabel,
} from "../../../../../packages/relative-time";

const timezones = [
  { label: "EST", zone: "America/New_York" },
  { label: "GMT", zone: "Europe/London" },
  { label: "JST", zone: "Asia/Tokyo" },
];

const Example = () => (
  <div className="rounded-md border bg-background p-4">
    <RelativeTime timeFormatOptions={{ hour: "2-digit", minute: "2-digit" }}>
      {timezones.map(({ zone, label }) => (
        <RelativeTimeZone key={zone} zone={zone}>
          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>
          <RelativeTimeZoneDate />
          <RelativeTimeZoneDisplay />
        </RelativeTimeZone>
      ))}
    </RelativeTime>
  </div>
);

export default Example;

Controlled time

EST

November 6, 2025

05:12:01 PM

GMT

November 6, 2025

10:12:01 PM

JST

November 7, 2025

07:12:01 AM

"use client";

import {
  RelativeTime,
  RelativeTimeZone,
  RelativeTimeZoneDate,
  RelativeTimeZoneDisplay,
  RelativeTimeZoneLabel,
} from "../../../../../packages/relative-time";
import { useEffect, useState } from "react";

const timezones = [
  { label: "EST", zone: "America/New_York" },
  { label: "GMT", zone: "Europe/London" },
  { label: "JST", zone: "Asia/Tokyo" },
];

const Example = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="rounded-md border bg-background p-4">
      <RelativeTime onTimeChange={setTime} time={time}>
        {timezones.map(({ zone, label }) => (
          <RelativeTimeZone key={zone} zone={zone}>
            <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>
            <RelativeTimeZoneDate />
            <RelativeTimeZoneDisplay />
          </RelativeTimeZone>
        ))}
      </RelativeTime>
    </div>
  );
};

export default Example;

Status Tree