Component

Timeline

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

Standalone

Submitted10:02 AM

Processing10:03 AM

Delivered

timeline.tsx

<NativeTimeline
  steps={[
    { id: "1", title: "Submitted", 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 process from start to finish, each step's color changing as it moves through its lifecycle.

Submitted10:02 AM

Processing10:03 AM

Delivered

timeline-example.tsx

<NativeTimeline steps={steps} />

Capabilities

Prop	Type	Description
stepsrequired	NativeTimelineStep[]	-
className	string	-