Skip to content

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.

  • Eat
  • Code
  • Sleep

Left-positioned timeline

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

  • Eat
  • Code
  • Sleep
  • Repeat

Alternating timeline

The timeline can display the events on alternating sides.

  • Eat
  • Code
  • Sleep
  • Repeat

Color

The TimelineDot can appear in different colors from theme palette.

  • Secondary
  • Success
<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

  • Eat
  • Code
  • Sleep
  • Repeat

Opposite content

The timeline can display content on opposite sides.

  • 09:30 am
    Eat
  • 10:00 am
    Code
  • 12:00 am
    Sleep
  • 9:00 am
    Repeat

Customization

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

  • 9:30 am
    Eat

    Because you need strength

  • 10:00 am
    Code

    Because it's awesome!

  • Sleep

    Because you need rest

  • Repeat

    Because this is the life you love!

Alignment

There are different ways in which a Timeline can be placed within the container.

You can do it by overriding the styles.

A Timeline centers itself in the container by default.

The demos below show how to adjust the relative width of the left and right sides of a Timeline:

Left-aligned

  • 09:30 am
    Eat
  • 10:00 am
    Code

Right-aligned

  • 09:30 am
    Eat
  • 10:00 am
    Code

Left-aligned with no opposite content

  • Eat
  • Code