RelativeTime

RelativeTime defines how EnterUI handles time-relative labels, including deterministic rendering, client-side refresh, and semantic <time> output.

#Default usage

<RelativeTime date="2026-05-05T09:55:00.000Z" now="2026-05-05T10:00:00.000Z" />

#Import

import { RelativeTime, TimeAgo } from "@froggdesign/enter-ui-react";

#Patterns

Use now in tests and deterministic examples. Omit it in app UI to let the component refresh on the client with updateInterval.

<TimeAgo date={activity.createdAt} updateInterval={30000} />

#Accessibility

RelativeTime renders a semantic <time> element with a datetime attribute when the date is valid. The visible text is generated with Intl.RelativeTimeFormat.

#API

• date: Date | number | string.
• now: deterministic comparison date.
• locale: locale passed to Intl.RelativeTimeFormat.
• numeric: always | auto.
• updateInterval: client refresh interval in milliseconds.
• formatFallback: fallback renderer for invalid dates.

#Styling

RelativeTime uses .eui-relative-time and muted foreground tokens. Numeric glyphs use tabular alignment so feed rows stay stable as time changes.