# Relative Time

## Example

```svelte
<script lang="ts">
	import { Box } from '@foxui/all';
	import { RelativeTime } from '@foxui/all';
</script>

<Box class="min-h-0">
	<RelativeTime date={new Date(Date.now() - 10000)} locale="en-US" />
</Box>
```

## Documentation

<script>
	import { Alert } from '@foxui/all';
</script>

<Alert type="info" title="This component is unstyled by default." variant="default" class="mt-4">
</Alert>

## Usage

```svelte
<RelativeTime date={new Date(Date.now() - 10000)} locale="en-US" />
```

## Sources

Based on "svelte-relative-time" (https://github.com/CaptainCodeman/svelte-relative-time)

## API Reference

### RelativeTime
Displays a timestamp as a human-readable relative time string (e.g. "5 minutes ago") that updates live.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| date | `Date | number` | `-` | The date to display relative to now. Can be a Date object or a Unix timestamp. (required) |
| locale | `string` | `-` | The locale for formatting (e.g. 'en', 'de'). (required) |
| live | `boolean` | `true` | Whether to automatically update the displayed time. |
| class | `string` | `-` | Additional CSS classes to apply. |