---
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>

**注意:** このコンポーネントは [Material Design guidelines](https://material.io/)に記載されていませんが、Material-UIはそれをサポートしています。

## 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"}}

## カラー

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

コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。

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