The advanced (alternating) timeline zig-zags items left/right of a central spine, each with a
date and an icon marker. Pass date + iconText on each <TimelineItem> and variant="alternating" on the <Timeline>. Use side to force a
side, or isSingleColumn to collapse to one column.
Alternating timeline
- Jan 15, 2024🚀Project Started — kicked off with the initial planning meeting.
- Feb 28, 2024🎨Design Phase Complete — all wireframes and mockups approved by stakeholders.
- Mar 15, 2024⚙️Development In Progress — frontend and backend underway, ~60% complete.
- Apr 1, 2024🧪Testing Phase — QA testing has begun; bug fixes addressed as found.
- May 1, 2024🎯Launch — target date for the production release.
Forced to one side (alignment)
Set side="start" to keep every item on the start side instead of zig-zagging.
- 09:001Stand-up and sprint planning.
- 12:302Feature branch merged to main.
- 16:003Design review with the product team.
Usage
Alternating
<Timeline variant="alternating">
<TimelineItem variant="success" date="Jan 15, 2024" iconText="🚀">
Project started
</TimelineItem>
<TimelineItem variant="info" date="Feb 28, 2024" iconText="🎨">
Design phase complete
</TimelineItem>
</Timeline> Force one side / single column
<Timeline variant="alternating" side="start"> … </Timeline> <Timeline variant="alternating" isSingleColumn> … </Timeline>