# Timestamp

Formatted date/time display.

## Examples

### Default

```tsx
import { Timestamp } from '@var-ui/react';

<Timestamp date={new Date(Date.now() - 5 * 60_000)} />
```

```astro
---
// No @var-ui/astro Timestamp — format the label yourself and use textBlock styles.
import { textBlock } from '@var-ui/core';

const t = textBlock({ size: 'sm', tone: 'secondary' });
---

<time
  class:list={[t]}
  datetime="2026-07-19T21:35:00.000Z"
  title="Jul 19, 2026, 2:35 PM"
>
  5 minutes ago
</time>
```

```html
<time data-size="sm" data-tone="secondary" data-weight="normal" class="var-ui-text-block" datetime="2026-07-19T21:35:00.000Z" title="Jul 19, 2026, 2:35 PM">5 minutes ago</time>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| date | string \| number \| Date | yes |  | Date value to format. Accepts a `Date`, ISO string, or epoch milliseconds. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| format | "date" \| "time" \| "relative" \| "datetime" \| undefined | no | relative | Output format: relative ("5 minutes ago"), date, time, or datetime. |
| locale | string \| undefined | no |  | BCP 47 locale for formatting. Uses the runtime default when omitted. |

## Accessibility

Built on React Aria Components where applicable. Astro and HTML demos use a static `<time>` with `textBlock` styles (no live relative formatting).