← All components Layout & primitives
TimeAgo
Auto-updating relative time via Intl.RelativeTimeFormat. Single shared interval, SSR-safe, 7-day threshold to absolute.
Inspired by GitHub <relative-time>, Mac Messages/Mail relative-time conventions.
Preview
What it looks like.
Usage
Drop it into your app.
import { TimeAgo } from '@locara/components'
<TimeAgo date={message.createdAt} />
<TimeAgo date="2026-05-22T15:55:00Z" />
<TimeAgo date={new Date()} threshold={30 * 24 * 60 * 60} /> // 30 days
Or copy the source into your repo:
locara add time-ago
Design notes
Why it works this way.
All instances share one setInterval (30s) for performance — no per-instance timer. Renders absolute on SSR and swaps to relative after hydration to avoid SSR mismatch. After 7 days (configurable), switches to absolute date (`May 1, 2026, 3:55 PM`).