Timeline

Vertical timeline with diamond-shaped markers and status-based colors. Ideal for displaying sequences of events, mission logs, or process steps.

Basic Timeline

Preview

Mission Started

09:00

Checkpoint Alpha

11:30

Data Upload

14:00

Extraction Point

15:00

With Descriptions

Preview

System Initialized

Day 1

All subsystems online. Diagnostics passed.

Calibration Phase

Day 2

Sensor array calibration in progress.

Deployment

Day 3

Awaiting authorization for deployment.

Timeline Props

PropTypeDefaultDescription
items*TimelineItemData[]-Array of timeline items to display.
classNamestring-Additional CSS classes.

TimelineItemData Shape

PropTypeDefaultDescription
title*string-Title text for the timeline entry.
descriptionstring-Optional description text below the title.
datestring-Date or time label displayed to the right of the title.
status"completed" | "active" | "pending""pending"Status determines the diamond marker color. Completed is green, active has a glow effect, and pending is muted.

Accessibility

  • Timeline items are rendered in DOM order matching their visual order
  • Status is conveyed visually through color; consider adding aria-label attributes to the container for screen reader context
  • Diamond markers are decorative; titles and descriptions carry the semantic content
  • Supports ref forwarding for DOM access