Component

Timeline

Display a sequence of events in chronological order with status indicators.

tsx

import { Timeline, ActivityTimeline } from 'wss3-forge'

Usage

•

Use for progress tracking and event history

•

Three variants: default, compact, alternate

•

Status colors indicate completion state

•

Add actions for interactive timelines

•

ActivityTimeline for activity feeds

Order placed

Jan 15

Processing

Jan 16

Shipped

Jan 17

Delivered

Jan 18

Examples

Order Tracking

Order placed

Jan 15, 10:30

Your order has been confirmed

Processing

Jan 15, 14:00

Preparing your items

Shipped

Jan 16, 09:00

Package in transit

Delivered

Expected Jan 18

tsx

1<Timeline
2  items={[
3    { id: '1', title: 'Order placed', description: 'Your order has been confirmed', status: 'completed', date: 'Jan 15, 10:30' },
4    { id: '2', title: 'Processing', description: 'Preparing your items', status: 'completed', date: 'Jan 15, 14:00' },
5    { id: '3', title: 'Shipped', description: 'Package in transit', status: 'current', date: 'Jan 16, 09:00' },
6    { id: '4', title: 'Delivered', status: 'upcoming', date: 'Expected Jan 18' }
7  ]}
8/>

Project Milestones

Project kickoff

Week 1

Design phase

Week 2-3

Development

Week 4-8

Testing

Week 9-10

Launch

Week 11

tsx

1<Timeline
2  items={[
3    { id: '1', title: 'Project kickoff', status: 'completed', date: 'Week 1' },
4    { id: '2', title: 'Design phase', status: 'completed', date: 'Week 2-3' },
5    { id: '3', title: 'Development', status: 'current', date: 'Week 4-8' },
6    { id: '4', title: 'Testing', status: 'upcoming', date: 'Week 9-10' },
7    { id: '5', title: 'Launch', status: 'upcoming', date: 'Week 11' }
8  ]}
9/>

Compact Variant

Created account2 hours ago

Verified email1 hour ago

Setup profileNow

Invite team

tsx

1<Timeline
2  items={[
3    { id: '1', title: 'Created account', status: 'completed', date: '2 hours ago' },
4    { id: '2', title: 'Verified email', status: 'completed', date: '1 hour ago' },
5    { id: '3', title: 'Setup profile', status: 'current', date: 'Now' },
6    { id: '4', title: 'Invite team', status: 'upcoming' }
7  ]}
8  variant="compact"
9/>

Table

TreeView

Last updated: December 2025