Marker: Relative dates

<MarkerTime /> renders a <time> that reads Today, Yesterday, a weekday within the last week, then a short date. It updates itself at midnight. Pass format for your own wording.

"use client"

import { Marker, MarkerContent, MarkerTime } from "@/components/ui/marker"

const day = 24 * 60 * 60 * 1000
const dates = [0, 1, 3, 40, 400].map((ago) => new Date(Date.now() - ago * day))

export function MarkerTimeDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {dates.map((date) => (
        <Marker key={date.getTime()} variant="separator">
          <MarkerContent>
            <MarkerTime date={date} />
          </MarkerContent>
        </Marker>
      ))}
      <Marker variant="separator">
        <MarkerContent>
          <MarkerTime
            date={dates[0]}
            format={(date) =>
              date.toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
              })
            }
          />
        </MarkerContent>
      </Marker>
    </div>
  )
}

Add this example

This adds the example as components/examples/marker/time.tsx, together with the Marker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/marker-time.json

To add only the component, follow the Marker installation.

Props in this example

The Marker props this example sets, from the API reference.

Marker

Prop	Type	Default
`variant`	`"default" \| "separator" \| "border"`	`"default"`

MarkerTime

Prop	Type	Default
`date`Required. Anything new Date() accepts.	`Date \| string \| number`	`–`
`format`Replace the relative label with your own.	`(date: Date) => ReactNode`	`–`

Every prop is in the Marker API reference.

More Marker examples

See them all, with keyboard support and accessibility notes, on the Marker page.