NimUI
ComponentsData Display

Timeline

Audit trail and activity history for orders, reports, and backoffice workflows

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

  • Order packed

    Warehouse team completed final scan.

  • Label printed

    Carrier label was generated by operations.

  • Risk review required

    Address verification flagged this order for review.

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

NameTypeDefaultDescription
variant"default" | "success" | "warning" | "destructive" | "info""default"Status color for the marker.
classNamestring-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.

EmptyState

Empty table and list state with title, description, icon, and recovery actions

DescriptionList

Semantic label-value metadata for detail panels, drawers, and record pages

On this page

ImportBasic UsagePropsTimelineMarkerBackoffice Guidance