Timeline

    A vertical timeline for displaying chronological events or activity logs.

    When to Use

    • To display a series of events in order
    • For activity logs or change histories
    • For process tracking with status indicators

    Import

    import { Timeline } from "orizon";

    Examples

    Basic

    Created project 2024-01-01
    Initial commit 2024-01-02
    First release 2024-02-15
    Major update 2024-06-01
    <Timeline
  items={[
    { children: "Created project 2024-01-01" },
    { children: "Initial commit 2024-01-02" },
    { children: "First release 2024-02-15" },
    { children: "Major update 2024-06-01" },
  ]}
/>

    With Colors

    Success step
    Current step
    Error step
    Pending step
    <Timeline
  items={[
    { children: "Success step", color: "green" },
    { children: "Current step", color: "blue" },
    { children: "Error step", color: "red" },
    { children: "Pending step", color: "gray" },
  ]}
/>

    Alternate Mode

    Left item 1
    Right item 2
    Left item 3
    Right item 4
    <Timeline
  mode="alternate"
  items={[
    { children: "Left item 1" },
    { children: "Right item 2" },
    { children: "Left item 3" },
  ]}
/>

    With Pending

    Step 1 completed
    Step 2 completed
    Step 3 in progress
    Recording...
    <Timeline
  pending="Recording..."
  items={[
    { children: "Step 1 completed" },
    { children: "Step 2 completed" },
  ]}
/>

    API

    TimelineProps

    • items — TimelineItem[] — Timeline item data
    • mode — "left" | "right" | "alternate" — Item position mode (default: "left")
    • pending — ReactNode — Show a pending indicator at the end
    • pendingDot — ReactNode — Custom pending dot
    • reverse — boolean — Reverse the order (default: false)

    TimelineItem

    • children — ReactNode — Item content
    • color — string — Dot color (default: "blue")
    • dot — ReactNode — Custom dot element
    • label — ReactNode — Label text (shown on opposite side in alternate mode)
    • position — "left" | "right" — Override position in alternate mode