Timestamp

A date shown relative to now, with the full date on hover.

Published: Sep 14, 2026
Last edited: Sep 22, 2026

Timestamp.tsx

import {
  DataList,
  DataListItem,
  DataListLabel,
  DataListValue,
  Timestamp
} from 'alinea/components'

export function TimestampExample() {
  return (
    <DataList aria-label="Linen shirt" style={{width: 320}}>
      <DataListItem>
        <DataListLabel>Published</DataListLabel>
        <DataListValue>
          <Timestamp date="2026-09-14T09:30:00Z" format="date" />
        </DataListValue>
      </DataListItem>
      <DataListItem>
        <DataListLabel>Last edited</DataListLabel>
        <DataListValue>
          <Timestamp date="2026-09-22T16:05:00Z" format="relative" />
        </DataListValue>
      </DataListItem>
    </DataList>
  )
}

Props

A date or time formatted for the reader's locale, rendered as <time>

PropTypeDefaultDescription

date*string | number | DateDefault –A Date, milliseconds since the epoch or an ISO string

formatTimestampFormatDefault 'datetime'relative shows eg. "5 min. ago" for the last week and the date after, defaults to datetime

localestringDefault –Formats in this locale instead of the surrounding one

titlestringDefault –Tooltip text, defaults to the full date and time for shorter formats

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.