Timeline
Display information in chronological order
Source ↗️ Report Issue ↗️Use the Timeline
component to display events in chronological order, visually represented along a linear path. They’re useful for illustrating the sequence and timing of events or steps in a process.
- Getting started
- Setup
- Conclusion
Themes
Timelines comes with three predefined themes out of the box that can be configured using the theme
prop: fill
, stroke
, stroke fill
:
- Getting started
- Setup
- Conclusion
- Getting started
- Setup
- Conclusion
- Getting started
- Setup
- Conclusion
Alternating Timeline
You can create alternating timelines by setting alternate
to true
:
- Getting started
- Setup
- Conclusion
- Getting started
- Setup
- Conclusion
By default, alternating timelines follow a left to right alignment for all timeline items. To change the alignment of timeline items relative to the timeline, set centered
to true
.
Styles
To change the style of your timelines, you can override the following CSS variables:
You can also configure these styles for individual timelines using the color
, textColor
, and counter
props:
- Getting started
- Setup
- Conclusion
- Getting started
- Setup
- Conclusion
- Getting started
- Setup
- Conclusion
counter
prop can take any valid CSS counter value. For a full list of possible value, see the type definitions. Timeline Item Titles
Timeline items can be configured to have a title, using the title
and titleTag
props:
- Start here Getting started
- Prerequisites Setup
- Wrapping Up Conclusion
API
Timeline Prop | Purpose |
---|---|
theme | Sets the theme of the timeline. Can be one of fill , stroke , stroke fill . |
alternate | Creates an alternating timeline. Defaults to false . |
centered | Changes the alignment of timeline items for alternate timelines. Defaults to false . |
color | Sets the background color of the timeline items. |
textColor | Sets the text color of the counter inside the timeline items. |
counter | Sets the counter style of the timeline items. |
className | Pass additional CSS classes for the timeline. |
TimelineItem Prop | Purpose |
---|---|
title | Sets a title for the timeline item. |
titleTag | Sets the HTML tag used for the title of the timeline item. Defaults to span . |
className | Pass additional CSS classes for the timeline item. |
Request improvement for this page