RelativeTime

A <time> that reads "2m ago" for the last week and a date after it, with the absolute local time and UTC in its title.

checkout.acme.dev recovered20s ago
Ana Ruiz paused docs.acme.dev14m ago
Deploy 4f2c1a9 went live4h ago
Kenji Mori added a webhook2d ago
Status page publishedOct 12, 2026

View code

tsx

{events.map((event) => (
	<li key={event.id}>
		<span>{event.text}</span>
		<RelativeTime date={event.at} now={requestTime} locale="en" mix={[fg("neutral.muted"), fontSize("sm")]} />
	</li>
))}

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add relative-time

Usage

typescript

import { RelativeTime } from "@sdxc/ui";

Renders the moment as <time datetime> with its text and absolute title. With local it hands the same props to RelativeTimeLocal, so the server HTML is identical and the viewer's zone replaces the server's once the island hydrates.

Examples

In the reader's time zone

ReleasedOct 2, 2026

View code

tsx

<p>
	<span>Released</span>
	<RelativeTime date="2026-10-02T23:30:00Z" now={requestTime} locale="en" local />
</p>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`date`	`DateInput`	Yes	The moment to show.
`now`	`DateInput`	No	The reference moment; pass the request's time so server and tests render the same text.
`locale`	`string`	No	BCP 47 locale for the text and the title.
`timeZone`	`string`	No	IANA zone the server formats in. Defaults to UTC.
`local`	`boolean`	No	Hydrates the RelativeTimeLocal island, which rewrites the date and title in the viewer's zone and locale, counting from `now` when given and their clock otherwise. Needs `@sdxc/ui/relative-time#RelativeTimeLocal` in the app's browser entry.

Also accepts everything in Omit<TagProps<"time">, "dateTime" | "children">.