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

# Línea de tiempo

<p class="description">La línea de tiempo muestra una lista de eventos en orden cronológico.</p>

**Nota:** Este componente no está documentado en las [ pautas de Material Design](https://material.io/), pero Material-UI lo soporta.

## Línea de tiempo básica

Una línea de tiempo básica que muestra una lista de eventos.

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

## Línea de tiempo alineada a la derecha

La línea de tiempo puede posicionarse en el lado derecho de los eventos.

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

## Línea de tiempo alternativa

La línea de tiempo puede mostrar los eventos en los lados alternos.

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

## Color

El `TimelineDot` puede aparecer en diferentes colores.

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

## Delineada

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

## Contenido opuesto

La línea de tiempo puede mostrar contenido en lados opuestos.

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

## Línea de tiempo personalizada

He aquí un ejemplo de personalización del componente. You can learn more about this in the [overrides documentation page](/customization/components/).

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