---
title: Componente React para Linha do tempo
components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent
---

# Linha do tempo

<p class="description">A linha do tempo exibe uma lista de eventos em ordem cronológica.</p>

**Observação:** Este componente não está documentado nas [diretrizes do Material Design](https://material.io/), mas o Material-UI o suporta.

## Linha do tempo básica

Uma linha do tempo básica mostrando a lista de eventos.

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

## Linha do tempo alinhada à direita

A linha do tempo pode ser posicionada no lado direito dos eventos.

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

## Linha do tempo alternada

A linha do tempo pode exibir os eventos alternando os lados.

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

## Cor

O `TimelineDot` pode aparecer em cores diferentes.

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

## Delineado

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

## Conteúdo oposto

A linha do tempo pode exibir conteúdo nos lados opostos.

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

## Linha do tempo customizada

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).

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