---
meta:
title: Relative Time
description: Outputs a localized time phrase relative to the current date and time.
layout: component
---
Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
```html:preview
```
```jsx:react
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
const App = () => ;
```
The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
:::tip
When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
:::
## Examples
### Keeping Time in Sync
Use the `sync` attribute to update the displayed value automatically as time passes.
```html:preview
```
```jsx:react
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
const date = new Date(new Date().getTime() - 60000);
const App = () => ;
```
### Formatting Styles
You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
```html:preview
```
```jsx:react
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
const App = () => (
<>
);
```
### Localization
Use the `lang` attribute to set the desired locale.
```html:preview
English:
Chinese:
German:
Greek:
Russian:
```
```jsx:react
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
const App = () => (
<>
English:
Chinese:
German:
Greek:
Russian:
);
```