Geist Design System

Relative Time Card

Popover to show a given date in local time.

Default

Best Practices
  • Use <RelativeTimeCard> anywhere a recent timestamp appears in scannable surfaces: Table cells, Entity rows, deploy lists, activity feeds. For a static date in body prose past 7 days, render Mar 14, 2026 directly.
  • Pass date as a number (Unix ms or epoch). Don’t pre-format the value, and don’t replace children with a formatted string. The component’s short formatter is the canonical form (2m, 5h, Yesterday).
  • Don’t append ago after the component. The formatter already produces 2m ago / 5h ago, so <RelativeTimeCard /> ago reads as 2m ago ago.
  • Use children only for non-time labels (Just now, Pending, Queued) where the formatter can’t describe the state.
  • Pair with a leading label when the row is ambiguous on its own: Last deploy <RelativeTimeCard date={ts} />. The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row.