Data Display

RelativeTime

Localized, live-updating relative date label for timestamps.

import { RelativeTime } from '@lostgradient/cinder/relative-time';
relative-time
01

Overview

RelativeTime renders a localized relative timestamp and can keep it current as time passes.

Usage

svelte 
<script lang="ts">
  import RelativeTime from '@lostgradient/cinder/relative-time';
</script>

<RelativeTime date="2026-08-28T18:00:00Z" />
Live preview
02

When to use

Use when
  • Showing when a message, issue, or event happened.
Avoid when
  • An exact calendar date is required.
03

Examples

RelativeTime

Displays a localized label for a timestamp relative to the current time.

04

Props

Props for relative-time
Name
Type
Default
Description
date text
locale text
tick boolean true Recalculate the label on an interval. Set false to disable ticking.
children snippet