DateTimeText

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

A plain date is written as a date, a date-time with both. timeZone writes the time in that zone.

Created

8 Oct 2026

Last updated

8 October 2026 at 14:30

Time

14:30

LightDark

Copy code

import { DateTimeText, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <dl className="grid grid-cols-[auto_1fr] gap-x-xl gap-y-sm type-body-md">
        <dt className="text-fg-subtle">Created</dt>
        <dd>
          <DateTimeText value="2026-10-08" />
        </dd>
        <dt className="text-fg-subtle">Last updated</dt>
        <dd>
          <DateTimeText value="2026-10-08T14:30:00" dateStyle="long" />
        </dd>
        <dt className="text-fg-subtle">Time</dt>
        <dd>
          <DateTimeText value="2026-10-08T11:30:00Z" format="time" timeZone="Europe/Istanbul" />
        </dd>
      </dl>
    </Provider>
  );
}

Relative

format="relative" writes “2 minutes ago” and refreshes every 30 seconds; the exact time is in title.

Last updated: 2 minutes ago

LightDark

Copy code

import { DateTimeText, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Relative() {
  const [moment] = useState(() => new Date(Date.now() - 2 * 60_000));
  return (
    <Provider locale="en-GB">
      <p className="type-body-md text-fg-subtle">
        Last updated: <DateTimeText value={moment} format="relative" />
      </p>
    </Provider>
  );
}

Light and dark mode

The text takes its colour from its surroundings.

Light

Created

8 Oct 2026

Last updated

8 October 2026 at 14:30

Time

14:30

Dark

Created

8 Oct 2026

Last updated

8 October 2026 at 14:30

Time

14:30

Copy code

import { DateTimeText, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <dl className="grid grid-cols-[auto_1fr] gap-x-xl gap-y-sm type-body-md">
        <dt className="text-fg-subtle">Created</dt>
        <dd>
          <DateTimeText value="2026-10-08" />
        </dd>
        <dt className="text-fg-subtle">Last updated</dt>
        <dd>
          <DateTimeText value="2026-10-08T14:30:00" dateStyle="long" />
        </dd>
        <dt className="text-fg-subtle">Time</dt>
        <dd>
          <DateTimeText value="2026-10-08T11:30:00Z" format="time" timeZone="Europe/Istanbul" />
        </dd>
      </dl>
    </Provider>
  );
}