---
title: React Timeline component
components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent
---

# Timeline

<p class="description">The timeline displays a list of events in chronological order.</p>

**Remarque :** Ce composant n'est pas documenté dans les [consignes de Material Design](https://material.io/), mais Material-UI le supporte.

## Basic timeline

A basic timeline showing list of events.

{{"demo": "pages/components/timeline/BasicTimeline.js"}}

## Right aligned timeline

The timeline can be positioned on the right side of the events.

{{"demo": "pages/components/timeline/RightAlignedTimeline.js"}}

## Alternating timeline

The timeline can display the events on alternating sides.

{{"demo": "pages/components/timeline/AlternateTimeline.js"}}

## Couleur

The `TimelineDot` can appear in different colors.

{{"demo": "pages/components/timeline/ColorsTimeline.js"}}

## Outlined

{{"demo": "pages/components/timeline/OutlinedTimeline.js"}}

## Opposite content

The timeline can display content on opposite sides.

{{"demo": "pages/components/timeline/OppositeContentTimeline.js"}}

## Customized timeline

Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/).

{{"demo": "pages/components/timeline/CustomizedTimeline.js"}}