# Format Relative Time

URL: https://ark-ui.com/docs/utilities/format-relative-time
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/format-relative-time.mdx

Used to format relative time to a specific locale and options

---

<ComponentPreview id="FormatRelativeTime" />

## Usage

The relative time formatting logic is handled by the native `Intl.RelativeTimeFormat` API and smartly cached to avoid
performance issues when using the same locale and options.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.RelativeTime` component to format a relative time with default options.

<Example component="format" id="relative-time-basic" />

### Short

Use the `style="short"` prop to format the relative time in short format.

<Example component="format" id="relative-time-short" />