# Relative Time

> Source: https://design.nanatec.co.ke/components/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.

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

```html
<nana-relative-time date="2026-01-01T00:00:00Z"></nana-relative-time>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/relative-time";
```

## Basic usage

```html
<nana-relative-time date="2026-01-01T00:00:00Z"></nana-relative-time>
```

## Styles

```html
<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>
```

## API

## Related components

<ul class="related not-content">
  <li><a href="/components/format-number/">Format Number</a></li>
  <li><a href="/components/format-bytes/">Format Bytes</a></li>
  <li><a href="/components/format-date/">Format Date</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-relative-time--docs