# Relative Time

- Page: <https://kznlabs.github.io/labsUI/components/relative-time>

## Relative Time (`relative-time`, component)

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.

- Install: `npx @kznlabs/labsui add relative-time`
- Docs: <https://kznlabs.github.io/labsUI/components/relative-time>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<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).
  - `locale?: string` = `"en-US"`: Both the relative text and the full date in the title (default "en-US"; pass the page's).

### Usage

```tsx
<RelativeTime date={clip.createdAt} />
```

### Example: mod-log-entry.tsx

```tsx
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>
  );
}
```