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

Tuesday, February 24, 2026

12:44:28 PM

GMT

Tuesday, February 24, 2026

05:44:28 PM

JST

Tuesday, February 24, 2026

02:44:28 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

February 24, 2026

05:44 PM

GMT

February 24, 2026

05:44 PM

JST

February 25, 2026

05:44 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

February 24, 2026

12:44:28 PM

GMT

February 24, 2026

05:44:28 PM

JST

February 25, 2026

02:44:28 AM

"use client"

import { useEffect, useState } from "react"

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 = () => {
  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

List Tree