Odometer
Numbers
Source and install need .
pnpm dlx shadcn@latest add @assembli/relative-timeRelative Time
A live relative timestamp: "just now", "42 seconds ago", "in 2 hours", "yesterday", then the date past a cutoff. Every instance shares one clock and re-renders only when its text changes, days follow the calendar, and hover shows the exact moment in local time, UTC and Unix. Long, short or narrow in any locale, with no hydration mismatch.
- Dependencies
- @base-ui/react(npm, opens in a new tab)
Props
Other props pass through to the root element.
locale
string
style
RelativeTimeStyle
Default
"long"dateAfterDays
number
Default
7Past this many days, show the date instead ("Oct 12", or "Oct 12, 2024" in another year).
Infinitynever does.nowWithin
number
Default
10Within this many seconds of now, say "just now" (or "now" for narrow).
date*
DateInput
tooltip
boolean
Default
trueShows the full date, UTC and Unix time on hover or focus. Defaults to
true.focusable
boolean
Default
falseLets keyboard users tab to the timestamp to read its tooltip.
animate
boolean
Default
trueEases each new value in. Defaults to
true; off under reduced motion.
| Prop | Type | Default | Description |
|---|---|---|---|
| locale | string | – | |
| style | RelativeTimeStyle | "long" | |
| dateAfterDays | number | 7 | Past this many days, show the date instead ("Oct 12", or "Oct 12, 2024" in another year). Infinity never does. |
| nowWithin | number | 10 | Within this many seconds of now, say "just now" (or "now" for narrow). |
| date* | DateInput | – | |
| tooltip | boolean | true | Shows the full date, UTC and Unix time on hover or focus. Defaults to true. |
| focusable | boolean | false | Lets keyboard users tab to the timestamp to read its tooltip. |
| animate | boolean | true | Eases each new value in. Defaults to true; off under reduced motion. |
