RelativeTimestamp

stable

Localized relative timestamp that updates in real time. Shows '2 min ago', 'just now', etc. with a tooltip showing the absolute ISO time.

Visualization/Storybook ↗

import { RelativeTimestamp } from "@nodus/design-system/patterns"

Updated 15s agoLast sync 4m agoLast checked 2h ago3/20/2026

Loading demo…

Props

Prop	Type	Default	Description
`iso`req	`string`	—	ISO 8601 timestamp string.
`updateIntervalMs`	`number`	—	Refresh interval in ms (default: 30000).
`className`	`string`	—	Extra CSS classes.

isorequired

Type stringDefault —

ISO 8601 timestamp string.

updateIntervalMs

Type numberDefault —

Refresh interval in ms (default: 30000).

className

Type stringDefault —

Extra CSS classes.

Design Rationale

This component was designed to express:

Real-time deadline countdown. Transitions color from validation → caution → agency as deadline approaches. Supports critical threshold configuration.

Time-based scale showing recency and freshness

Chronological log of agent actions with status filtering

Relative or exact time display with auto-refresh

Was this helpful?