Timeline

Basic Timeline

Order placed

10:30 AM

Payment confirmed

10:32 AM

Processing

10:45 AM

Shipped

2:15 PM

With Variants

Build started

10:00 AM

Tests passed

10:05 AM

Linting warnings

10:06 AM

Deployment failed

10:10 AM

Retrying deployment

10:15 AM

With Custom Icons

Account created

Jan 1

Profile completed

Jan 2

Verification pending

Jan 3

Review in progress

Jan 4

With Descriptions

Pull request opened

feat: add new authentication flow

2 hours ago

Code review completed

Approved by 2 reviewers with minor suggestions

1 hour ago

CI checks passed

All 47 tests passed, coverage at 94%

45 minutes ago

Merged to main

Squash and merge completed

30 minutes ago

Usage

import { Timeline, type TimelineItem } from "@f0rbit/ui";

const items: TimelineItem[] = [
  { id: 1, title: "Order placed", timestamp: "10:30 AM" },
  { id: 2, title: "Processing", timestamp: "10:45 AM" },
  { id: 3, title: "Shipped", timestamp: "2:15 PM" },
];

<Timeline items={items} />

With Descriptions

Add descriptions for more context:

const items: TimelineItem[] = [
  {
    id: 1,
    title: "Pull request opened",
    description: "feat: add new authentication flow",
    timestamp: "2 hours ago",
  },
  {
    id: 2,
    title: "Code review completed",
    description: "Approved by 2 reviewers",
    timestamp: "1 hour ago",
  },
];

<Timeline items={items} />

Variants

Use variants to indicate different event types:

const items: TimelineItem[] = [
  { id: 1, title: "Build started", variant: "info", timestamp: "10:00 AM" },
  { id: 2, title: "Tests passed", variant: "success", timestamp: "10:05 AM" },
  { id: 3, title: "Linting warnings", variant: "warning", timestamp: "10:06 AM" },
  { id: 4, title: "Deployment failed", variant: "error", timestamp: "10:10 AM" },
];

<Timeline items={items} />

Available variants:

default: Neutral styling
success: Positive events
error: Failed or negative events
warning: Events needing attention
info: Informational events

Custom Icons

Provide custom icons for timeline items:

const items: TimelineItem[] = [
  { id: 1, title: "Completed", icon: <CheckIcon />, variant: "success" },
  { id: 2, title: "Pending", icon: <AlertIcon />, variant: "warning" },
];

<Timeline items={items} />

TimelineItem Type

interface TimelineItem {
  id: string | number;
  title: string;
  description?: string;
  timestamp?: string;
  icon?: JSX.Element;
  variant?: "default" | "success" | "error" | "warning" | "info";
}

Props

Prop	Type	Default	Description
`items`	`TimelineItem[]`	—	Array of timeline items to display