# Format Relative Time

URL: https://ark-ui.com/docs/utilities/format-relative-time
LLM: https://ark-ui.com/llms.txt/utilities/format-relative-time

Used to format relative time to a specific locale and options

---



## 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.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const RelativeTimeBasic = () => {
  return (
    <div className={styles.Inline}>
      <span className={styles.InlineLabel}>Last updated</span>
      <span className={styles.InlineValue}>
        <Format.RelativeTime value={new Date('2025-05-05')} />
      </span>
    </div>
  )
}
```

### Short

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

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const RelativeTimeShort = () => {
  return (
    <div className={styles.Inline}>
      <span className={styles.InlineLabel}>Edited</span>
      <span className={styles.InlineValue}>
        <Format.RelativeTime value={new Date('2025-05-05')} style="short" />
      </span>
    </div>
  )
}
```