A flexible timeline that renders items along a vertical or horizontal line. Use the children snippet for item content and the dot snippet to customise the node on the line.
Direction flags are mutually exclusive: supply left, right, top or bottom, or omit all for right. Alternate begins on the selected side (right/bottom by default). Snippets receive the item, not an index. The class prop styles the connecting line rather than a root wrapper.
Use right (default) or left to place content on either side of the line.
Project kickoff
Initial planning session with all stakeholders.
Design review
Reviewed wireframes and approved the color palette.
Development started
Frontend and backend teams began implementation.
First build deployed
Staging environment updated successfully.
Add alternate to flip content left/right on each item. Use the dot snippet to render icons or status indicators in place of the default circle.
Collected all user stories and acceptance criteria.
Delivered UI mockups and a component library.
Feature implementation in progress.
Automated and manual test suite.
Production deployment and monitoring.
Use bottom or top for a horizontal layout. Works with alternate too.
Ordered
Packed
In transit
Delivered