Timeline

Vertical list of chronological events. Use for activity feeds, audit logs, order tracking, and step history. Each item supports a coloured dot or custom icon.

Anatomy

<Timeline>
  <TimelineItem
    title="Event label"
    description="Detail text"
    timestamp="9:00 AM"
    color="success"        {/* dot colour */}
    icon={<Icon />}        {/* replaces dot */}
  />
  <TimelineItem … last />  {/* last hides the connector */}
</Timeline>

Examples

Order placed9:00 AM
Order #1234 was placed successfully.
Payment confirmed9:02 AM
Shipped10:30 AM
Your items are on the way.
Delivered2:15 PM
Package delivered to front door.

With icons

Account createdJan 12
Welcome aboard!
Profile completedJan 13
All required fields filled.
First projectJan 15
Your first project is live.

Status colours

Build started12:00
Tests passed12:03
Lint warnings12:04
3 warnings — not blocking.
Deploy failed12:06
Connection timeout on prod.

Props

Timeline

children*

ReactNode

TimelineItem elements.

className

string

Additional classes on the list.

Prop	Type	Default	Description
children*	ReactNode	—	TimelineItem elements.
className	string	—	Additional classes on the list.

TimelineItem

title*

ReactNode

Primary label for the event.

description

ReactNode

Supporting detail rendered below the title.

timestamp

ReactNode

Time or metadata displayed top-right.

icon

ReactNode

Icon in the track. When set, replaces the coloured dot.

color= 'default'

'default' | 'success' | 'warning' | 'error' | 'info'

Dot colour when no icon is provided.

last= false

boolean

Hides the connector line below the item. Set on the final item.

className

string

Additional classes on the item.

Prop	Type	Default	Description
title*	ReactNode	—	Primary label for the event.
description	ReactNode	—	Supporting detail rendered below the title.
timestamp	ReactNode	—	Time or metadata displayed top-right.
icon	ReactNode	—	Icon in the track. When set, replaces the coloured dot.
color	'default' \| 'success' \| 'warning' \| 'error' \| 'info'	'default'	Dot colour when no icon is provided.
last	boolean	false	Hides the connector line below the item. Set on the final item.
className	string	—	Additional classes on the item.

PreviousTable