Utilities
Format relative time

Format Relative Time

Used to format relative time to a specific locale and options

Last updated

1 day ago

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.

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

Examples

Basic

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

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

export const RelativeTimeBasic = () => {
  return (
    <div>
      Edited <Format.RelativeTime value={new Date('2025-05-05')} />
    </div>
  )
}

Short

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

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

export const RelativeTimeShort = () => {
  return (
    <div>
      Edited <Format.RelativeTime value={new Date('2025-05-05')} style="short" />
    </div>
  )
}