Skip to content
Aback UI

Data Display

Relative Time

A hydration-safe "3 hours ago" timestamp, localized by Intl and refreshed on one shared clock.

BetaUsed in Aback Tools, Aback LaunchRegistry JSON (opens in a new tab)
  • Deployment finished
  • Comment added
  • Release tagged
  • Workspace created
  • Trial ends

In German: . In Japanese: . Hover a time for the exact date.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add relative-time

Writes components/ui/relative-time.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import { RelativeTime, formatRelativeTime } from "@/components/ui/relative-time";

API reference

Props and composition points for Relative Time. Native element props pass through.

PropTypeDefaultDescription
dateDate | string | numberNoneThe moment to describe: a Date, an ISO string, or a timestamp. Invalid dates render nothing. Required.
localestringNoneBCP 47 locale for Intl. Defaults to the browser's language on the client.
refreshIntervalnumber60000How often the phrase updates. Components with the same interval share one timer; 0 renders once.
absoluteFormatIntl.DateTimeFormatOptionsmedium date, short time, UTCThe format of the server render and of the hover title.
formatRelativeTime(date, now, locale)functionNoneThe exported formatter, for places where you need the phrase as a string.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • It renders a time element with a machine-readable dateTime, and the exact date is the title.
  • The server and the first client render show the absolute date, so cached pages hydrate without a mismatch.
  • The phrase updates silently. It is not a live region, so a feed of timestamps does not chatter.
  • Counts are truncated, never rounded up: 2 hours 50 minutes is "2 hours ago".

Used in production

The Aback products whose interfaces shaped this component.

Related