Timeline

The timeline displays a list of events in chronological order.

Note: This component is not documented in the Material Design guidelines, but MUI supports it.

Basic timeline

A basic timeline showing list of events.

Left-positioned timeline

The main content of the timeline can be positioned on the left side relative to the time axis.

Alternating timeline

The timeline can display the events on alternating sides.

Color

The TimelineDot can appear in different colors from theme palette.

<Timeline position="alternate">
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="secondary" />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Secondary</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="success" />
    </TimelineSeparator>
    <TimelineContent>Success</TimelineContent>
  </TimelineItem>
</Timeline>

<Timeline position="alternate">
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="secondary" />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Secondary</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="success" />
    </TimelineSeparator>
    <TimelineContent>Success</TimelineContent>
  </TimelineItem>
</Timeline>

Outlined

Opposite content

The timeline can display content on opposite sides.

Customization

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.