A moment as people say it, "3 minutes ago", in the reader's language and kept current.
$ pnpm dlx shadcn@latest add @dashral/relative-timeInstallation
$ pnpm dlx shadcn@latest add @dashral/relative-timeAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/relative-time.json
Usage
import { RelativeTime } from "@/components/dashral/relative-time"
<RelativeTime date={comment.createdAt} />Using the npm package? Import from @dashral/ui/components/relative-time instead, here and in the examples; the rest is the same.
Examples
API reference
RelativeTime
Also takes every prop of <time>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
date | Date | string | numberThe moment, past or future. Required. | — |
style | "long" | "short" | "narrow""3 minutes ago", "3 min. ago" or "3m ago", as the locale writes them. | "long" |
absoluteAfterDays | numberPast this many days, the date itself instead. | — |
formatOptions | Intl.DateTimeFormatOptionsHow that date is written. | { dateStyle: "medium" } |
titleFormatOptions | Intl.DateTimeFormatOptionsThe full date on hover. | { dateStyle: "full", timeStyle: "short" } |
live | booleanKeeps it current: each 15 s under a minute, 30 s under an hour, then less often. | true |
locale | stringBCP 47 locale. | the LocaleProvider's |
className | stringExtra classes, merged with cn() so yours win. | — |
Accessibility
- A <time> with the exact moment in dateTime, so assistive technology and machines read the real date.
- Words come from the browser's Intl in the page's locale ("yesterday", "kemarin", "أمس"), so they need no translation.
- The server writes it from its clock; the browser corrects it as it loads, without a hydration warning.