# Format Relative Time (SVELTE)



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

```svelte
<script lang="ts">
  import { Format } from '@ark-ui/svelte/format'
  import styles from 'styles/format.module.css'
</script>

<div class={styles.Inline}>
  <span class={styles.InlineLabel}>Last updated</span>
  <span class={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.

```svelte
<script lang="ts">
  import { Format } from '@ark-ui/svelte/format'
  import styles from 'styles/format.module.css'
</script>

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