Time Ago

Auto-updating relative timestamp — "3 minutes ago", "just now", "in 2 days" — that re-renders on its own timer so the label stays true without a reload. Reach for it wherever a full date would be noise and recency is the point: comment, post, review and chat message times, a notification or activity feed, "last seen", "last updated", "last synced" and "last login" labels, commit, build and deploy history, created/modified columns in an admin table, an audit or event log, support-ticket and order-status updates, a file list, a session or API-key list, and cache or backup freshness. Common asks it answers: "react time ago component", "relative time react", "time ago react", "x minutes ago react", "react-timeago alternative", "timeago.js alternative", "dayjs fromNow without dayjs", "moment fromNow replacement", "date-fns formatDistanceToNow component", "Intl.RelativeTimeFormat react hook", "relative timestamp that updates live", "auto refreshing timestamp react", "shadcn time ago", "shadcn relative time", "localized relative time react", "yesterday instead of 1 day ago", "semantic time element react", "relative time hydration mismatch", "timestamp tooltip with full date". Official shadcn/ui has nothing for this and nothing to build it out of: RelativeTimeFormat, timeAgo, fromNow, formatDistance, dateTime, the string "just now", the <time> element and even "Intl." are each zero hits across all 62 of its fetchable items (measured 2026-09-25; the 30 hits for "relative" are all Tailwind's positioning class). Distinct from the other time pieces in this registry: countdown runs toward a deadline and ticks every second, save-status reports the state of one save rather than the age of a thing, date-input and time-input are for entering a value, month-picker chooses a month, and calendar-heatmap draws a year of days — this one only says how long ago something happened, and keeps saying it correctly as the page stays open. The wording comes from the platform's own Intl.RelativeTimeFormat, so it localizes for free through the locale prop and reads correctly for past and future alike; numeric="auto" gives "yesterday"/"tomorrow" instead of "1 day ago", and format="short" or "narrow" gives "3 min. ago"/"3m ago". Anything newer than justNowThreshold seconds (default 45) shows justNowLabel. The tick rate follows the age of the thing rather than the clock — every 15s while under a minute old, once a minute under an hour, then hourly — which is the difference between a feed of fifty timestamps and a feed of fifty one-second intervals; pin it with updateInterval when you want one rate. It renders a semantic <time> with a machine-readable dateTime and a title carrying the full localized date, so the exact moment is still reachable on hover and by anything reading the markup. The clock is only ever read after mount, so a server render and the browser's first paint cannot disagree about the age of something that changes every second. An unparseable date renders nothing rather than the words "Invalid Date". Accepts a Date, an ISO string or epoch milliseconds, theme-aware through the text-muted-foreground token, and depends on nothing but your cn util — no date library, no extra packages.