diff --git a/package.json b/package.json
index 071fe6f..24d82ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.71.1",
+  "version": "0.72.1",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 6910cd6..f0d2bba 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -290,3 +290,6 @@ export type * from "./date-range-picker";
 
 export * from "./time-picker";
 export type * from "./time-picker";
+
+export * from "./relative-time";
+export type * from "./relative-time";
diff --git a/src/components/ui/relative-time/RelativeTime.stories.tsx b/src/components/ui/relative-time/RelativeTime.stories.tsx
new file mode 100644
index 0000000..025a77d
--- /dev/null
+++ b/src/components/ui/relative-time/RelativeTime.stories.tsx
@@ -0,0 +1,309 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactElement } from "react";
+
+import {
+  RelativeTime,
+  relativeTimeFormatIds,
+  relativeTimeSizeIds,
+  relativeTimeVariantIds,
+} from "./relative-time";
+
+const SECOND_MS = 1000;
+const MINUTE_MS = 60 * SECOND_MS;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+const WEEK_MS = 7 * DAY_MS;
+const MONTH_MS = 30 * DAY_MS;
+const YEAR_MS = 365 * DAY_MS;
+
+function fromNow(ms: number): number {
+  return Date.now() + ms;
+}
+
+const meta = {
+  title: "Components/RelativeTime",
+  component: RelativeTime,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Displays a timestamp as a human-readable relative phrase like `5 minutes ago` or `in 3 days`, auto-refreshing at the appropriate cadence (every second for sub-minute values, every minute for sub-hour, and so on).\n\n" +
+          "Built on top of [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat), so it supports any browser-recognised BCP-47 locale and three format widths (`long`, `short`, `narrow`). Renders as a semantic `<time>` element with a machine-readable `dateTime` attribute and an optional `title` showing the absolute date.\n\n" +
+          "Six theme-driven color variants (`default`, `muted`, `brand`, `success`, `warning`, `destructive`) pull from `@schemavaults/theme` so the component automatically respects light/dark mode and SchemaVaults brand colours.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    date: {
+      control: { type: "date" },
+      description: "Reference timestamp. Accepts a Date, ISO string, or epoch-ms number.",
+    },
+    variant: {
+      options: relativeTimeVariantIds,
+      control: { type: "radio" },
+    },
+    size: {
+      options: relativeTimeSizeIds,
+      control: { type: "radio" },
+    },
+    format: {
+      options: relativeTimeFormatIds,
+      control: { type: "radio" },
+    },
+    numeric: {
+      options: ["auto", "always"],
+      control: { type: "radio" },
+    },
+    locale: { control: { type: "text" } },
+    prefix: { control: { type: "text" } },
+    suffix: { control: { type: "text" } },
+    showTitle: { control: { type: "boolean" } },
+  },
+  args: {
+    date: fromNow(-5 * MINUTE_MS),
+    variant: "default",
+    size: "default",
+    format: "long",
+    numeric: "auto",
+    showTitle: true,
+  },
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const JustNow: Story = {
+  args: {
+    date: fromNow(-2 * SECOND_MS),
+  },
+};
+
+export const FutureDate: Story = {
+  args: {
+    date: fromNow(3 * DAY_MS),
+    prefix: "Renews ",
+  },
+};
+
+export const Variants: Story = {
+  render: (): ReactElement => (
+    <div className="flex flex-col items-start gap-3">
+      {relativeTimeVariantIds.map((variant) => (
+        <div key={variant} className="flex items-baseline gap-3">
+          <span className="w-24 text-xs font-medium text-muted-foreground">
+            {variant}
+          </span>
+          <RelativeTime date={fromNow(-12 * MINUTE_MS)} variant={variant} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (): ReactElement => (
+    <div className="flex flex-col items-start gap-3">
+      {relativeTimeSizeIds.map((size) => (
+        <div key={size} className="flex items-baseline gap-3">
+          <span className="w-16 text-xs font-medium text-muted-foreground">
+            {size}
+          </span>
+          <RelativeTime date={fromNow(-2 * HOUR_MS)} size={size} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Formats: Story = {
+  render: (): ReactElement => (
+    <div className="flex flex-col items-start gap-3">
+      {relativeTimeFormatIds.map((format) => (
+        <div key={format} className="flex items-baseline gap-3">
+          <span className="w-20 text-xs font-medium text-muted-foreground">
+            {format}
+          </span>
+          <RelativeTime date={fromNow(-45 * MINUTE_MS)} format={format} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const TimeScale: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows how the component selects the most natural unit for the magnitude of the difference — seconds, minutes, hours, days, weeks, months, years.",
+      },
+    },
+  },
+  render: (): ReactElement => {
+    const samples: { label: string; date: number }[] = [
+      { label: "2 seconds ago", date: fromNow(-2 * SECOND_MS) },
+      { label: "3 minutes ago", date: fromNow(-3 * MINUTE_MS) },
+      { label: "1 hour ago", date: fromNow(-HOUR_MS) },
+      { label: "Yesterday", date: fromNow(-DAY_MS) },
+      { label: "5 days ago", date: fromNow(-5 * DAY_MS) },
+      { label: "3 weeks ago", date: fromNow(-3 * WEEK_MS) },
+      { label: "4 months ago", date: fromNow(-4 * MONTH_MS) },
+      { label: "2 years ago", date: fromNow(-2 * YEAR_MS) },
+      { label: "In 30 seconds", date: fromNow(30 * SECOND_MS) },
+      { label: "In 2 hours", date: fromNow(2 * HOUR_MS) },
+      { label: "In 4 days", date: fromNow(4 * DAY_MS) },
+    ];
+    return (
+      <div className="flex flex-col items-start gap-2 font-mono">
+        {samples.map((sample) => (
+          <div key={sample.label} className="flex items-baseline gap-4">
+            <span className="w-36 text-xs text-muted-foreground">
+              {sample.label}
+            </span>
+            <RelativeTime date={sample.date} variant="muted" />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Locales: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Locale defaults to the runtime locale but can be overridden via `locale` (any BCP-47 tag accepted by `Intl.RelativeTimeFormat`).",
+      },
+    },
+  },
+  render: (): ReactElement => {
+    const locales: { tag: string; label: string }[] = [
+      { tag: "en-US", label: "English (US)" },
+      { tag: "en-GB", label: "English (UK)" },
+      { tag: "fr-FR", label: "French" },
+      { tag: "de-DE", label: "German" },
+      { tag: "es-ES", label: "Spanish" },
+      { tag: "ja-JP", label: "Japanese" },
+      { tag: "zh-CN", label: "Chinese (Simplified)" },
+      { tag: "ar-EG", label: "Arabic" },
+    ];
+    return (
+      <div className="flex flex-col items-start gap-2">
+        {locales.map((entry) => (
+          <div key={entry.tag} className="flex items-baseline gap-4">
+            <span className="w-44 text-xs text-muted-foreground">
+              {entry.label} ({entry.tag})
+            </span>
+            <RelativeTime date={fromNow(-3 * HOUR_MS)} locale={entry.tag} />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const NumericAlways: Story = {
+  args: {
+    date: fromNow(-DAY_MS),
+    numeric: "always",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When `numeric` is `always`, output is strictly numeric (`1 day ago`) rather than using natural phrasing like `yesterday`.",
+      },
+    },
+  },
+};
+
+export const WithPrefixAndSuffix: Story = {
+  args: {
+    date: fromNow(-12 * MINUTE_MS),
+    prefix: "Last synced ",
+    suffix: " — auto-updates",
+    variant: "muted",
+    size: "sm",
+  },
+};
+
+export const AbsoluteFallback: Story = {
+  args: {
+    date: fromNow(-90 * DAY_MS),
+    thresholdMs: 30 * DAY_MS,
+    variant: "muted",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Past a configurable `thresholdMs`, the component falls back to an absolute localized date instead of e.g. `3 months ago`. Useful for audit logs where exact dates matter for older entries.",
+      },
+    },
+  },
+};
+
+export const ActivityFeed: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Realistic use case in a feed of recent activity.",
+      },
+    },
+  },
+  render: (): ReactElement => {
+    const activity: { actor: string; action: string; date: number }[] = [
+      {
+        actor: "ada.lovelace",
+        action: "deployed v0.71.1 to production",
+        date: fromNow(-12 * SECOND_MS),
+      },
+      {
+        actor: "grace.hopper",
+        action: "opened a pull request",
+        date: fromNow(-7 * MINUTE_MS),
+      },
+      {
+        actor: "alan.turing",
+        action: "rotated the API signing key",
+        date: fromNow(-2 * HOUR_MS),
+      },
+      {
+        actor: "barbara.liskov",
+        action: "archived the legacy dashboard",
+        date: fromNow(-3 * DAY_MS),
+      },
+      {
+        actor: "edsger.dijkstra",
+        action: "wrote the original ADR",
+        date: fromNow(-8 * MONTH_MS),
+      },
+    ];
+    return (
+      <ul className="flex w-[420px] flex-col gap-3 rounded-lg border bg-card p-4 text-card-foreground">
+        {activity.map((entry) => (
+          <li
+            key={entry.actor}
+            className="flex items-baseline justify-between gap-4 border-b last:border-0 pb-2 last:pb-0"
+          >
+            <span className="text-sm">
+              <span className="font-medium">{entry.actor}</span>{" "}
+              <span className="text-muted-foreground">{entry.action}</span>
+            </span>
+            <RelativeTime
+              date={entry.date}
+              variant="muted"
+              size="xs"
+              format="short"
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  },
+};
diff --git a/src/components/ui/relative-time/index.ts b/src/components/ui/relative-time/index.ts
new file mode 100644
index 0000000..f47aff3
--- /dev/null
+++ b/src/components/ui/relative-time/index.ts
@@ -0,0 +1,9 @@
+export {
+  RelativeTime,
+  relativeTimeVariants,
+  relativeTimeVariantIds,
+  relativeTimeSizeIds,
+  relativeTimeFormatIds,
+} from "./relative-time";
+export type * from "./relative-time";
+export { RelativeTime as default } from "./relative-time";
diff --git a/src/components/ui/relative-time/relative-time-variants.ts b/src/components/ui/relative-time/relative-time-variants.ts
new file mode 100644
index 0000000..518604c
--- /dev/null
+++ b/src/components/ui/relative-time/relative-time-variants.ts
@@ -0,0 +1,24 @@
+export const relativeTimeVariantIds = [
+  "default",
+  "muted",
+  "brand",
+  "success",
+  "warning",
+  "destructive",
+] as const satisfies readonly string[];
+export type RelativeTimeVariant = (typeof relativeTimeVariantIds)[number];
+
+export const relativeTimeSizeIds = [
+  "xs",
+  "sm",
+  "default",
+  "lg",
+] as const satisfies readonly string[];
+export type RelativeTimeSize = (typeof relativeTimeSizeIds)[number];
+
+export const relativeTimeFormatIds = [
+  "long",
+  "short",
+  "narrow",
+] as const satisfies readonly string[];
+export type RelativeTimeFormat = (typeof relativeTimeFormatIds)[number];
diff --git a/src/components/ui/relative-time/relative-time.tsx b/src/components/ui/relative-time/relative-time.tsx
new file mode 100644
index 0000000..a3ff0c2
--- /dev/null
+++ b/src/components/ui/relative-time/relative-time.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useEffect,
+  useState,
+  type ComponentProps,
+  type ReactElement,
+} from "react";
+
+import { cn } from "@/lib/utils";
+import {
+  relativeTimeFormatIds,
+  relativeTimeSizeIds,
+  relativeTimeVariantIds,
+  type RelativeTimeFormat,
+  type RelativeTimeSize,
+  type RelativeTimeVariant,
+} from "./relative-time-variants";
+
+export {
+  relativeTimeVariantIds,
+  relativeTimeSizeIds,
+  relativeTimeFormatIds,
+};
+export type { RelativeTimeVariant, RelativeTimeSize, RelativeTimeFormat };
+
+const SECOND_MS = 1000;
+const MINUTE_MS = 60 * SECOND_MS;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+const WEEK_MS = 7 * DAY_MS;
+const MONTH_MS = 30 * DAY_MS;
+const YEAR_MS = 365 * DAY_MS;
+
+export const relativeTimeVariants = cva(
+  "inline-flex items-baseline tabular-nums whitespace-nowrap transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        muted: "text-muted-foreground",
+        brand: "text-schemavaults-brand-blue",
+        success: "text-emerald-600 dark:text-emerald-400",
+        warning: "text-warning",
+        destructive: "text-destructive",
+      } satisfies Record<RelativeTimeVariant, string>,
+      size: {
+        xs: "text-[11px]",
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      } satisfies Record<RelativeTimeSize, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface PickedUnit {
+  /** Numeric value to feed `Intl.RelativeTimeFormat.format` (sign carries direction). */
+  value: number;
+  /** Time unit selected (always positive granularity). */
+  unit: Intl.RelativeTimeFormatUnit;
+  /** Milliseconds until the next meaningful tick (e.g. seconds → 1000ms). */
+  nextTickMs: number;
+}
+
+/**
+ * Pick the most natural unit for a given `diffMs` (positive = future, negative = past)
+ * and report how long until the displayed value changes — so the component can refresh
+ * only when needed instead of every second forever.
+ */
+function pickUnit(diffMs: number): PickedUnit {
+  const absMs: number = Math.abs(diffMs);
+  const sign: 1 | -1 = diffMs >= 0 ? 1 : -1;
+
+  if (absMs < MINUTE_MS) {
+    const seconds: number = Math.round(absMs / SECOND_MS);
+    return {
+      value: sign * seconds,
+      unit: "second",
+      nextTickMs: SECOND_MS,
+    };
+  }
+  if (absMs < HOUR_MS) {
+    const minutes: number = Math.round(absMs / MINUTE_MS);
+    return {
+      value: sign * minutes,
+      unit: "minute",
+      nextTickMs: MINUTE_MS - (absMs % MINUTE_MS),
+    };
+  }
+  if (absMs < DAY_MS) {
+    const hours: number = Math.round(absMs / HOUR_MS);
+    return {
+      value: sign * hours,
+      unit: "hour",
+      nextTickMs: HOUR_MS - (absMs % HOUR_MS),
+    };
+  }
+  if (absMs < WEEK_MS) {
+    const days: number = Math.round(absMs / DAY_MS);
+    return {
+      value: sign * days,
+      unit: "day",
+      nextTickMs: HOUR_MS,
+    };
+  }
+  if (absMs < MONTH_MS) {
+    const weeks: number = Math.round(absMs / WEEK_MS);
+    return {
+      value: sign * weeks,
+      unit: "week",
+      nextTickMs: DAY_MS,
+    };
+  }
+  if (absMs < YEAR_MS) {
+    const months: number = Math.round(absMs / MONTH_MS);
+    return {
+      value: sign * months,
+      unit: "month",
+      nextTickMs: DAY_MS,
+    };
+  }
+  const years: number = Math.round(absMs / YEAR_MS);
+  return {
+    value: sign * years,
+    unit: "year",
+    nextTickMs: WEEK_MS,
+  };
+}
+
+function normalizeTimestamp(value: Date | string | number): number {
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === "number") return value;
+  return new Date(value).getTime();
+}
+
+export interface RelativeTimeProps
+  extends Omit<ComponentProps<"time">, "dateTime" | "title">,
+    VariantProps<typeof relativeTimeVariants> {
+  /** The reference timestamp. Accepts a `Date`, ISO string, or epoch-ms number. */
+  date: Date | string | number;
+  /** Display style: `long` ("5 minutes ago"), `short` ("5 min. ago"), or `narrow` ("5m ago"). Defaults to `long`. */
+  format?: RelativeTimeFormat;
+  /** BCP-47 locale string forwarded to `Intl.RelativeTimeFormat`. Defaults to the runtime locale. */
+  locale?: string;
+  /**
+   * `auto` produces wording like "yesterday" / "tomorrow" where the locale allows it.
+   * `always` produces strictly numeric output ("1 day ago"). Defaults to `auto`.
+   */
+  numeric?: "auto" | "always";
+  /**
+   * When the value is older than this many milliseconds, fall back to an absolute date string
+   * (e.g. switch from "3 months ago" to "Jan 12, 2024"). Set to `Infinity` (default) to always
+   * use the relative form.
+   */
+  thresholdMs?: number;
+  /** Options forwarded to `toLocaleDateString` for the absolute fallback (used past `thresholdMs`). */
+  absoluteFormat?: Intl.DateTimeFormatOptions;
+  /** Optional prefix rendered before the relative phrase (e.g. "Last updated "). */
+  prefix?: string;
+  /** Optional suffix rendered after the relative phrase. */
+  suffix?: string;
+  /** When true, sets the native `title` attribute to the absolute localized timestamp. Defaults to `true`. */
+  showTitle?: boolean;
+  /**
+   * Override the "live now" point. Useful for testing and SSR-deterministic snapshots.
+   * Defaults to `Date.now()` on mount and refreshes on its own thereafter.
+   */
+  now?: Date | string | number;
+}
+
+export function RelativeTime({
+  date,
+  variant,
+  size,
+  format = "long",
+  locale,
+  numeric = "auto",
+  thresholdMs = Infinity,
+  absoluteFormat,
+  prefix,
+  suffix,
+  showTitle = true,
+  now,
+  className,
+  ref,
+  ...timeProps
+}: RelativeTimeProps): ReactElement {
+  const target: number = normalizeTimestamp(date);
+  const initialNow: number = now !== undefined ? normalizeTimestamp(now) : target;
+  const [currentMs, setCurrentMs] = useState<number>(initialNow);
+
+  useEffect(() => {
+    if (now !== undefined) {
+      setCurrentMs(normalizeTimestamp(now));
+      return;
+    }
+
+    setCurrentMs(Date.now());
+
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+    function schedule(): void {
+      const diffMs: number = target - Date.now();
+      const { nextTickMs } = pickUnit(diffMs);
+      const delay: number = Math.max(250, Math.min(nextTickMs, HOUR_MS));
+      timeoutId = setTimeout(() => {
+        setCurrentMs(Date.now());
+        schedule();
+      }, delay);
+    }
+    schedule();
+
+    return () => {
+      if (timeoutId !== undefined) clearTimeout(timeoutId);
+    };
+  }, [target, now]);
+
+  const isoString: string = Number.isFinite(target)
+    ? new Date(target).toISOString()
+    : "";
+
+  const diffMs: number = target - currentMs;
+  const absDiffMs: number = Math.abs(diffMs);
+
+  const rtfFormatter: Intl.RelativeTimeFormat = new Intl.RelativeTimeFormat(
+    locale,
+    { numeric, style: format },
+  );
+  const { value, unit } = pickUnit(diffMs);
+  const relativePhrase: string = rtfFormatter.format(value, unit);
+
+  const absoluteFormatter: Intl.DateTimeFormat = new Intl.DateTimeFormat(
+    locale,
+    absoluteFormat ?? {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    },
+  );
+  const absolutePhrase: string = Number.isFinite(target)
+    ? absoluteFormatter.format(target)
+    : "";
+
+  const useAbsolute: boolean =
+    Number.isFinite(thresholdMs) && absDiffMs > thresholdMs;
+
+  const displayText: string = useAbsolute ? absolutePhrase : relativePhrase;
+
+  return (
+    <time
+      ref={ref}
+      data-slot="relative-time"
+      dateTime={isoString || undefined}
+      title={showTitle && absolutePhrase ? absolutePhrase : undefined}
+      className={cn(relativeTimeVariants({ variant, size }), className)}
+      suppressHydrationWarning
+      {...timeProps}
+    >
+      {prefix ? <span>{prefix}</span> : null}
+      <span>{displayText}</span>
+      {suffix ? <span>{suffix}</span> : null}
+    </time>
+  );
+}
+
+RelativeTime.displayName = "RelativeTime";
+
+export default RelativeTime;