---
title: Timeline
description: "`Timeline` is a component that is used to display a list of events in chronological order."
links:
- style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/timeline/timeline.style.ts
- source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/timeline
- storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-timeline--basic
---
```tsx
第1部 ファントムブラッド
全てはここから始まった！ジョナサンとディオ、運命の出会い‼
第2部 戦闘潮流
石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼
第3部 スターダストクルセイダース
DIO復活…！永き因縁に終止符を打つスタンドバトル‼
```
## Usage
```tsx
import { Timeline } from "@yamada-ui/react"
```
```tsx
import { Timeline } from "@/components/ui"
```
```tsx
import { Timeline } from "@workspaces/ui"
```
```tsx
```
### Use Items
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
},
],
[],
)
return
```
### Change Size
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
},
],
[],
)
return (
{(size) => }
)
```
### Change Color Scheme
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
},
],
[],
)
return (
{(colorScheme) => (
)}
)
```
### Change Alignment
To change the alignment of timeline items, set the `align` prop to `"start"` or `"end"` etc.
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
},
],
[],
)
return (
{(align) => (
({
align: align !== "end" && index % 2 === 0 ? "start" : "end",
...item,
}))
: items
}
/>
)}
)
```
### Change Shape
To change the shape of timeline indicators, set the `shape` prop to `"circle"`, `"rounded"`, or `"square"`.
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
},
],
[],
)
return (
{(shape) => }
)
```
### Customize Indicators
To customize indicators, assign custom content to the `indicator` prop of items.
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
indicator: ,
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
indicator: ,
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
indicator: ,
},
],
[],
)
return
```
### Attach Indicators
To attach timeline indicators to the content, set `attached` to `true`.
```tsx
const items = useMemo(
() => [
{
description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
title: "第1部 ファントムブラッド",
},
{
description:
"石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
title: "第2部 戦闘潮流",
},
{
description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
title: "第3部 スターダストクルセイダース",
},
],
[],
)
return
```
## Props
### Timeline.Root
| Prop | Default | Type | Description |
| ----------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl"` | The size of the component. |
| `align` | `"start"` | `"center" \| "end" \| "start"` | The alignment of the timeline. |
| `attached` | `false` | `boolean` | If `true`, the timeline will be attached. |
| `index` | - | `number` | The index of the active timeline item. |
| `indicatorFill` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The fill color of the indicator. |
| `indicatorSize` | - | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The size of the indicator. |
| `indicatorStroke` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The stroke color of the indicator. |
| `items` | - | `TimelineItem[]` | If provided, generate timeline components based on items. |
| `separatorColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color of the separator. |
| `separatorGap` | - | `"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` | The gap of the separator. |
| `separatorStyle` | - | `"-moz-initial" \| "dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" ...` | The style of the separator. |
| `separatorWidth` | - | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` | The width of the separator. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the timeline. |
### Timeline.Connector
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Timeline.Content
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Timeline.Description
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Timeline.Indicator
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
### Timeline.Item
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `index` | - | `number` | The index of the timeline item. |
### Timeline.Title
| Prop | Default | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |