Skip to content
Edit this page

Timeline

The timeline displays a list of events in chronological order.

Note: This component is not documented in the Material Design guidelines, but Material-UI 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!

Theming

Here is an example of theming the component. You can learn more about this in the theming page and theme components page

1

Add space and style to the account

  • Margin Top
  • Padding Bottom
  • Flexbox

API