A relative timestamp that reads "just now", "3 minutes ago" or "in 2 days" in any locale through Intl.RelativeTimeFormat, and keeps itself current on one clock shared by every timestamp on the page: every second under a minute, every minute under an hour, hourly after that, and paused while the tab is hidden. It sits in a real time element with the full date and time on hover, switches to a short date past a threshold, and can reserve the width of the longest wording in its unit so the text beside it never shifts as it ticks. The server renders a stable date and the live wording fades in after mount. Long, short and narrow wording, three tones and three sizes.
The import and the props worth knowing about, in one place.
import { TimeRelative } from "@/components/beste/component/time-relative";
<TimeRelative date={comment.createdAt} />
// In a list: a label before it, a stable width, short wording
<TimeRelative
date="2026-09-25T18:30:00Z"
prefix="Edited"
format="short" // "long" (default) | "short" | "narrow"
reserveWidth // hold the width of "59 min. ago" while it ticks
threshold={30 * 86400} // a short date after 30 days
tone="muted" // "ghost" (default) | "muted" | "outline"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
date* | string | Date | number | — | The moment to describe: an ISO string, a Date or a timestamp. |
locale | string | — | Locale for the wording and the full date; the reader's own when omitted. |
format | "long" | "short" | "narrow" | — | Length of the unit words: "3 minutes ago", "3 min. ago" or "3m ago". |
numeric | "auto" | "always" | — | "auto" says "yesterday" and "now"; "always" says "1 day ago" and "in 0 seconds". |
threshold | number | — | Seconds after which the relative wording gives way to a short date. `Infinity` never does. |
dateFormat | Intl.DateTimeFormatOptions | — | Options for the short date past the threshold. |
prefix | string | — | Text before the time, e.g. "Edited". |
reserveWidth | boolean | — | Reserve the width of the longest wording in the current unit, so neighbors never shift as it ticks. |
now | number | — | Fixed "now" for tests or server-rendered snapshots. The live clock otherwise. |
tone | "muted" | "outline" | "ghost" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |