Timeline

The timeline displays a list of events in chronological order.

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

Reverse Alternating timeline

The timeline can display the events on alternating sides in reverse order.

Eat
Code
Sleep
Repeat

Color

The TimelineDot can appear in different colors from theme palette.

Secondary
Success

import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';

export default function ColorsTimeline() {
  return (
    <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

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.