Relative Time
Renders a localised, auto-updating relative timestamp — “2 hours ago”, “in 3 days” — from a date. It refreshes itself on a cadence proportional to the elapsed time (every second under a minute, every minute under an hour, and so on) and outputs a semantic <time> element carrying the machine readable datetime plus an absolute title for accessibility.
Preview
Section titled “Preview”<nana-relative-time date="2026-01-01T00:00:00Z"></nana-relative-time>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/relative-time";Basic usage
Section titled “Basic usage”<nana-relative-time date="2026-01-01T00:00:00Z"></nana-relative-time>Styles
Section titled “Styles”<nana-relative-time date="2026-06-15T08:00:00Z"></nana-relative-time>
<nana-relative-time date="2026-06-15T08:00:00Z" format="short"></nana-relative-time>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
date | — | Date | string | number | new Date() | The date — a `Date`, an ISO string, or a timestamp |
format | — | RelativeTimeStyle | 'long' | Wording length passed to `Intl.RelativeTimeFormat` |
live | — | boolean | true | Keep the value refreshing as time passes |
locale | — | string | undefined | — | BCP 47 locale (defaults to the document locale) |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Relative Time interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook