Timeline

The Timeline component presents audit trails, order activity, and status history as a compact semantic list.

Import

import {
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
} from '@nim-ui/components';

Basic Usage

Order Activity

View Code

<Timeline aria-label="Order activity">
  <TimelineItem>
    <TimelineMarker variant="success" />
    <TimelineContent>
      <TimelineTime dateTime="2026-05-24T08:30:00Z">08:30</TimelineTime>
      <TimelineTitle>Order packed</TimelineTitle>
      <TimelineDescription>Warehouse team completed final scan.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Props

TimelineMarker

Name	Type	Default	Description
variant	"default" | "success" | "warning" | "destructive" | "info"	"default"	Status color for the marker.
className	string	-	Additional classes for marker styling.

Backoffice Guidance

• Use Timeline for audit trails, not long-form narratives.
• Keep titles short and put extra context in TimelineDescription.
• Use TimelineTime with dateTime so machines and assistive tools get the exact timestamp.