Relative Time

Component 3

About

Here is Relative Time component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Relative Time to your project and fits it to your theme.

Code

How Relative Time is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {
  RelativeTime,
  RelativeTimeZone,
  RelativeTimeZoneDate,
  RelativeTimeZoneDisplay,
  RelativeTimeZoneLabel,
} from '@/components/ui/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;