Timeline helps visualize sequences of events, process steps, or historical data. Configure items via an object array with simple props or custom React nodes.
It lays a sequence out down the page, one item after another. If you are building a video or audio editor, the component you want is Scrubber: a playhead over time, with stacked tracks of blocks that are selectable, movable and trimmable. The two share a name in spirit and nothing in purpose.
Use label and description props for quick setup.
Control timeline alignment with the alignment prop. Use left or right for different layouts.
Control size with the size prop: xs, s, m, l or xl.
Customize the marker with the marker prop.
Visual feedback with different marker states: default, active, success, and danger.
Extend the label and description with custom React nodes. Use the children prop with additional content to extend the layout.
Set direction="row" to lay the steps out horizontally.