Time Ago — ARC UI

Components

Time Ago

typography

interactive

<arc-time-ago>

Overview

Guidelines

When to use

Use for timestamps in feeds, comments, commit logs, and activity streams
Provide valid ISO 8601 date strings in the datetime prop
Use alongside a tooltip or expandable detail for exact timestamps when precision matters
Set live="false" for static contexts like printed reports or export previews
Set the locale prop to match your app locale for correct relative formatting

When not to use

Use TimeAgo for countdown timers with second-level precision — use CountdownTimer instead
Pass unparseable date strings — the component renders empty for invalid dates
Rely on TimeAgo as the sole date display when exact timestamps are critical (e.g. legal, financial)
Use for dates that need a specific format like "Feb 16, 2026" — use a date formatter instead

Features

Semantic <time> element with machine-readable datetime attribute
Adaptive live updates — faster for recent timestamps, slower for old ones
Intl.RelativeTimeFormat for locale-aware output (BCP 47 locale prop)
Future date support ("in X minutes", "in X days")
Full formatted date in title attribute for hover tooltip
"Just now" threshold for sub-60-second differences to avoid flicker
Automatic interval cleanup on disconnect to prevent memory leaks
Monospace font (--font-mono) for consistent inline rendering
CSS part (time) for external style customization

Preview

Last commit:

Account created:

Next deploy:

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-time-ago datetime="2026-02-16T10:30:00Z"></arc-time-ago>

<!-- Future date -->
<arc-time-ago datetime="2026-02-17T08:00:00Z"></arc-time-ago>

<!-- Static (no live updates) -->
<arc-time-ago datetime="2025-06-15" live="false"></arc-time-ago>

<!-- German locale -->
<arc-time-ago datetime="2026-02-16T10:30:00Z" locale="de-DE"></arc-time-ago>

import { TimeAgo } from '@arclux/arc-ui-react';

<TimeAgo datetime="2026-02-16T10:30:00Z" />

{/* Future date */}
<TimeAgo datetime="2026-02-17T08:00:00Z" />

{/* Static snapshot */}
<TimeAgo datetime="2025-06-15" live={false} />

<script setup>
import { TimeAgo } from '@arclux/arc-ui-vue';
</script>

<template>
  <TimeAgo datetime="2026-02-16T10:30:00Z" />
  <TimeAgo datetime="2026-02-17T08:00:00Z" />
  <TimeAgo datetime="2025-06-15" :live="false" />
</template>

<script>
  import { TimeAgo } from '@arclux/arc-ui-svelte';
</script>

<TimeAgo datetime="2026-02-16T10:30:00Z" />
<TimeAgo datetime="2026-02-17T08:00:00Z" />
<TimeAgo datetime="2025-06-15" live={false} />

import { Component } from '@angular/core';
import { TimeAgo } from '@arclux/arc-ui-angular';

@Component({
  imports: [TimeAgo],
  template: `
    <TimeAgo datetime="2026-02-16T10:30:00Z" />
    <TimeAgo datetime="2026-02-17T08:00:00Z" />
    <TimeAgo datetime="2025-06-15" [live]="false" />
  `,
})
export class MyComponent {}

import { TimeAgo } from '@arclux/arc-ui-solid';

<TimeAgo datetime="2026-02-16T10:30:00Z" />
<TimeAgo datetime="2026-02-17T08:00:00Z" />
<TimeAgo datetime="2025-06-15" live={false} />

import { TimeAgo } from '@arclux/arc-ui-preact';

<TimeAgo datetime="2026-02-16T10:30:00Z" />
<TimeAgo datetime="2026-02-17T08:00:00Z" />
<TimeAgo datetime="2025-06-15" live={false} />

API

Prop	Type	Default	Description
`datetime`	`string`	—	ISO 8601 date string or any value parseable by new Date().
`live`	`boolean`	`true`	Auto-update the relative time on an adaptive interval.
`locale`	`string`	`'en-US'`	BCP 47 locale tag for Intl.RelativeTimeFormat output.