# General Translation Changelog: gt-next 6.15.0: `<RelativeTime>` across all React packages
URL: https://generaltranslation.com/en-US/blog/gt-next_v6_15_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Archie McKenzie
Published: 2026-04-01

## Overview

A new [`<RelativeTime>`](/docs/react/reference/components/relative-time) component is now available across all GT React packages. It renders localized relative time strings like "2 hours ago" or "in 3 days" using the browser's built-in `Intl.RelativeTimeFormat` API.

| Package | Version | Export |
|---------|---------|--------|
| `gt-next` | 6.15.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (client + server) |
| `gt-react` | 10.16.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (client) |
| `gt-tanstack-start` | 0.3.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (client) |
| `generaltranslation` | 8.2.0 | [`formatRelativeTimeFromDate()`](/docs/platform/core/reference/utility-functions/formatting/format-relative-time-from-date) (core) |
| `gt` (CLI) | 2.14.0 | [`RelativeTime`](/docs/react/reference/components/relative-time) component detection |

## Usage

### Auto-select unit from a Date

Pass a `Date` and the component automatically picks the best unit (seconds, minutes, hours, days, weeks, months, or years).

```tsx
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "2 hours ago", "3 days ago", "in 5 minutes", etc.
}
```

### Explicit value and unit

Specify an exact value and unit, mirroring `Intl.RelativeTimeFormat` directly.

```tsx
import { RelativeTime } from 'gt-next';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "Your trial ends in 3 days."
}
```

### Inside translated content

Wrap [`<RelativeTime>`](/docs/react/reference/components/relative-time) in a [`<T>`](/docs/react/reference/components/t) component to include it in translated sentences.

```tsx
import { T, RelativeTime } from 'gt-next';

export default function Comment({ comment }) {
  return (
    <T id="commentPosted">
      Posted <RelativeTime>{comment.createdAt}</RelativeTime>
    </T>
  );
}
```

### Core function

For non-component contexts, use the standalone function:

```ts
import { formatRelativeTimeFromDate } from 'generaltranslation';

const label = formatRelativeTimeFromDate(someDate, {
  locales: ['en-US'],
  baseDate: new Date(),
});
// "2 hours ago"
```

## Hydration safety

[`<RelativeTime>`](/docs/react/reference/components/relative-time) computes relative time locally, which can cause hydration mismatches in server-rendered apps. Pin `baseDate` and `locales` to keep server and client in sync:

```tsx
const now = new Date();

<RelativeTime baseDate={now} locales={['en-US']}>
  {post.createdAt}
</RelativeTime>
```

## Links

- [PR #1153 — feat: add `<RelativeTime>` component](https://github.com/generaltranslation/gt/pull/1153)
- [`<RelativeTime>` docs](/docs/react/reference/components/relative-time)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.