Component: Relative Time #92

Component: Relative Time

Show how long ago (or until) a date is, in the user's language: "3 minutes ago", "vor 3 Minuten", "in 2 days".

A first version was removed in #66 until it could be a real component. This issue is for doing it properly.

Requirements

• TypeScript-first with exported props interface
• Uses Intl.RelativeTimeFormat, picking the largest sensible unit (seconds → minutes → hours → days → weeks → months → years)
• numeric="auto" by default, so you get "yesterday" / "gestern" rather than "1 day ago"
• Renders a semantic <time dateTime="…"> with the absolute date as a title
• Updates itself while on screen, at a rate that fits the distance (every second near "now", every minute after that, …), and stops when unmounted
• now prop for tests and SSR, so the server and client render the same text
• Forwarded ref and ...rest like the other components
• Tailwind CSS compatible

Expected API

<RelativeTime date={comment.createdAt} locale="de" />
// → <time dateTime="2026-10-28T10:00:00.000Z" title="28. Oktober 2026, 11:00">vor 3 Minuten</time>

Deliverables

• Component source in src/registry/components/
• Export in src/registry/components/index.ts and entry in src/registry/registry.ts
• Tests in test/ covering past and future dates, unit selection, numeric="auto", at least en, de and ar, and that the timer is cleared on unmount
• Documentation page in content/docs/components/

See CONTRIBUTING.md and the Contributor Rulebook.