Timeline

A vertical event timeline with status dots, timestamps, and custom icon nodes.

Data displaydatahistorysteps

Workbench

Rendering Timeline…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add timeline

Usage

TSX

import { Timeline, TimelineItem } from "@/components/ui/timeline";

export default function Example() {
  return (
    <Timeline>
      <TimelineItem status="complete" title="Order placed" time="Sep 12" dateTime="2026-09-12" />
      <TimelineItem status="current" title="Shipped" time="Sep 14" dateTime="2026-09-14" description="In transit to the local hub." />
      <TimelineItem status="upcoming" title="Delivered" />
    </Timeline>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<ol class="ml-timeline">
  <li class="ml-timeline-item" data-status="complete">
    <span class="ml-timeline-marker" aria-hidden="true" data-status="complete"><svg class="mlola-glyph" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><polyline points="20 6 9 17 4 12" pathLength="1"></polyline></svg></span>
    <div class="ml-timeline-body">
      <div class="ml-timeline-heading">
        <p class="ml-timeline-title">Order placed</p>
        <time class="ml-timeline-time" dateTime="2026-09-12">Sep 12</time>
      </div>
    </div>
  </li>
  <li class="ml-timeline-item" data-status="current" aria-current="step">
    <span class="ml-timeline-marker" aria-hidden="true" data-status="current"><span class="ml-timeline-pulse"></span></span>
    <div class="ml-timeline-body">
      <div class="ml-timeline-heading">
        <p class="ml-timeline-title">Shipped</p>
        <time class="ml-timeline-time" dateTime="2026-09-14">Sep 14</time>
      </div>
      <p class="ml-timeline-description">In transit to the local hub.</p>
    </div>
  </li>
  <li class="ml-timeline-item" data-status="upcoming">
    <span class="ml-timeline-marker" aria-hidden="true" data-status="upcoming"></span>
    <div class="ml-timeline-body">
      <div class="ml-timeline-heading"><p class="ml-timeline-title">Delivered</p></div>
    </div>
  </li>
</ol>

Options

Component	Prop	Values	Default	Description
`TimelineItem`	`status`	`completecurrentupcoming`	`upcoming`	Progress through a sequence: done, happening now, or still to come.
`TimelineItem`	`tone`	`neutralprimaryinfosuccesswarningdanger`	—	Colors an event marker, for activity feeds: a failed deploy, a merged change.
`TimelineDot`	`status`	`completecurrentupcoming`	`upcoming`	—

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-timeline`	—
`ml-timeline-item`	`data-status="complete \| current \| upcoming"`
`ml-timeline-marker`	`data-status="complete \| current \| upcoming"data-tone="danger \| info \| primary \| success \| warning"`
`ml-timeline-pulse`	—
`ml-timeline-body`	—
`ml-timeline-heading`	—
`ml-timeline-title`	—
`ml-timeline-time`	—
`ml-timeline-description`	—
`ml-timeline-content`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

@mlola-ui/icons

Open the standalone preview