data · Normal DOM only

Timeline

Vertical event log with coloured dots. Record-page activity feeds, deploy history, audit trails.

Use Timeline for chronological events tied to one record. For multiple parallel streams use multiple Timelines side by side, or a calendar.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Timeline } from '@8maverik8/twenty-design';

Examples

Record events

  1. Alice created the deal2 days ago
  2. Bob updated amount1 day ago
    $12,400 → $14,500
  3. Sent proposal to acme@example.com8 hours ago
  4. Stage changed → Won40 min ago
  5. Webhook to Slack failed5 min ago
    Retried 3× and succeeded on the last attempt.
tsx
<Timeline events={[…]} />

Guidelines

✓
Colour the dot by category, not severity.Severity changes over time; category is stable and readable.
✕
Pack >50 events without virtualisation.A long Timeline becomes a wall — paginate or virtualise.