labsUI

Relative Time

Self-updating “5 minutes ago” in a semantic <time> with the full date as its title. Server renders the absolute date (no hydration mismatch); one shared ticker for the whole page.

npx @kznlabs/labsui add relative-time
import { RelativeTime } from "@/components/ui/relative-time";export function ModLogEntry({ text, at }: { text: string; at: Date }) {  return (    <li className="flex justify-between gap-3 text-sm">      {text}      <RelativeTime date={at} className="text-muted-foreground text-xs" />    </li>  );}

<RelativeTime>

"5 minutes ago" that keeps itself current (one shared 15s ticker). A semantic <time> with the full date in its title. The server renders the absolute date, so there is no hydration mismatch and crawlers get a real date.

  • date*
    string | number | Date

    A stored timestamp. Not Date.now() in render: server and client would differ (hydration).

  • localedefault "en-US"
    string

    Both the relative text and the full date in the title (default "en-US"; pass the page's).

PropTypeDefault
date*

A stored timestamp. Not Date.now() in render: server and client would differ (hydration).

string | number | Date—
locale

Both the relative text and the full date in the title (default "en-US"; pass the page's).

string"en-US"

* required. Every component also takes className.