Component

Timeline

A vertical sequence of dots and connecting lines, each step colored by its status: completed, active, pending, failed, or cancelled.

The primitive

Payment initiated10:02 AM

Processing10:03 AM

Delivered

timeline.tsx

<NativeTimeline
  steps={[
    { id: "1", title: "Payment initiated", timestamp: "10:02 AM", status: "completed" },
    { id: "2", title: "Processing", timestamp: "10:03 AM", status: "active" },
    { id: "3", title: "Delivered", status: "pending" },
  ]}
/>

Example

Tracks a payment from initiation to delivery, each step's color changing as the trade moves through its lifecycle.

Payment initiated10:02 AM

Processing10:03 AM

Delivered

timeline-example.tsx

<NativeTimeline steps={transactionSteps} />

Capabilities

Prop	Type	Description
stepsrequired	NativeTimelineStep[]	—
className	string	—