Skip to content
oks-ui

Timeline component

Timeline is a vertical activity feed. Each TimelineItem sits on a connector rail with a dot or icon marker, a title, an optional timestamp, and body content.

Layout & Display6 propsAccessibility notes

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways Timeline actually gets used — each one a real, self-contained example.

Activity feed

A vertical feed of events on a connector rail. Each TimelineItem has a title, an optional time, and body content.

<Timeline>
  <TimelineItem title="Order placed" time="09:41">
    Payment authorised.
  </TimelineItem>
  <TimelineItem title="Shipped" time="14:20">
    Left the warehouse.
  </TimelineItem>
  <TimelineItem title="Delivered" time="Tomorrow" />
</Timeline>

Colored markers

color tints an item's marker to signal status — success for a completed step, danger for a failure.

<Timeline>
  <TimelineItem title="Deploy started" time="10:00" color="primary" />
  <TimelineItem title="Tests passed" time="10:03" color="success" />
  <TimelineItem title="Rollout complete" time="10:06" color="success" />
</Timeline>

Icon markers

Swap the dot for an icon per item to make each event type recognisable at a glance.

<Timeline>
  <TimelineItem title="Signed up" time="Mon" icon={<UserPlusIcon />} />
  <TimelineItem title="Upgraded to Pro" time="Wed" icon={<CreditCardIcon />} />
  <TimelineItem title="Invited team" time="Fri" icon={<UsersIcon />} />
</Timeline>

Example

timeline.tsx
<Timeline>
  <TimelineItem title="Order placed" timestamp="09:41">
    Payment authorised.
  </TimelineItem>
  <TimelineItem title="Shipped" timestamp="14:20">
    Left the warehouse.
  </TimelineItem>
  <TimelineItem title="Delivered" timestamp="Tomorrow" />
</Timeline>

Props

The full public API for Timeline. Every prop is stable and intentionally typed.

Content

Timeline children

TimelineItem[]

default: —

Renders as an <ol>. Give the Timeline an aria-label.

TimelineItem.title

ReactNode

default: —

Shown at the top of the content.

TimelineItem.time

ReactNode

default: —

Right-aligned timestamp.

TimelineItem.icon

ReactNode

default: —

Rendered in the marker (replaces the dot).

TimelineItem.children

ReactNode

default: —

Body text.

Appearance

TimelineItem.color

"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"

default: default

Marker colour.

Accessibility

  • Renders as an ordered list so the sequence is exposed to assistive tech.
  • Marker dots and the connector rail are decorative (`aria-hidden`); meaning lives in the item title and timestamp.

More in Layout & Display