# Timeline
Package: @mantine/core
Import: import { Timeline } from '@mantine/core';
Description: Display list of events in chronological order
## Usage
```tsx
import { Timeline, Text } from '@mantine/core';
import { GitBranchIcon, GitPullRequestIcon, GitCommitIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';
function Demo() {
return (
} title="New branch">
You've created new branch fix-notifications from master
2 hours ago
} title="Commits">
You've pushed 23 commits tofix-notifications branch
52 minutes ago
} lineVariant="dashed">
You've submitted a pull requestFix incorrect notification message (#187)
34 minutes ago
}>
Robert Gluesticker left a code review on your pull request
12 minutes ago
);
}
```
## Line and bullet props
Control the timeline appearance with the following props:
* `active` – index of the current active element; all elements before this index will be highlighted with `color`
* `color` – color from theme that should be used to highlight active items, defaults to `theme.primaryColor`
* `lineWidth` – controls line width and bullet border
* `bulletSize` – bullet width, height and border-radius
* `align` – defines the line and bullets position relative to content, also sets text-align
```tsx
import { Timeline } from '@mantine/core';
function Demo() {
return (
{/* items */}
);
}
```
## Bullet as React node
```tsx
import { ThemeIcon, Text, Avatar, Timeline } from '@mantine/core';
import { SunIcon, VideoCameraIcon } from '@phosphor-icons/react';
function Demo() {
return (
Default bullet without anything
}
>
Timeline bullet as avatar image
}>
Timeline bullet as icon
}
>
Timeline bullet as ThemeIcon component
);
}
```
## Wrap Timeline.Item
`Timeline` component relies on `Timeline.Item` order. Wrapping `Timeline.Item` is not supported.
Instead, you will need to use different approaches:
```tsx
import { Timeline } from '@mantine/core';
// This will not work, step children will not render
function WillNotWork() {
return It will not work;
}
// Create a separate component for children
function WillWork() {
return This will work as expected!
;
}
function Demo() {
return (
First item
Third item
);
}
```
#### Props
**Timeline props**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| active | number | - | Index of the active element |
| align | "left" \| "right" | - | Position of content relative to the bullet |
| autoContrast | boolean | - | If set, adjusts text color based on background color for `filled` variant |
| bulletSize | string \| number | - | Size of the bullet |
| children | React.ReactNode | - | `Timeline.Item` components |
| color | MantineColor | - | Key of `theme.colors` or any valid CSS color to control active item colors |
| lineWidth | string \| number | - | Control width of the line |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |
| reverseActive | boolean | - | If set, the active items direction is reversed without reversing items order |
**Timeline.Item props**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| bullet | React.ReactNode | - | React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. |
| children | React.ReactNode | - | Content displayed below the title |
| color | MantineColor | - | Key of `theme.colors` or any valid CSS color to control active item colors |
| lineVariant | "dashed" \| "dotted" \| "solid" | - | Controls line border style |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |
| title | React.ReactNode | - | Item title, displayed next to the bullet |
#### Styles API
Timeline component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.
**Timeline selectors**
| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Timeline-root | Root element |
| item | .mantine-Timeline-item | Item root element |
| itemBody | .mantine-Timeline-itemBody | Item body, wraps title and content |
| itemTitle | .mantine-Timeline-itemTitle | Item title, controlled by title prop |
| itemContent | .mantine-Timeline-itemContent | Item content, controlled by children prop |
| itemBullet | .mantine-Timeline-itemBullet | Item bullet |
**Timeline CSS variables**
| Selector | Variable | Description |
|----------|----------|-------------|
| root | --tl-bullet-size | Controls bullet `width` and `height` |
| root | --tl-color | Controls active bullet and line colors |
| root | --tl-icon-color | Controls icon color |
| root | --tl-line-width | Controls width of the line between bullets |
| root | --tl-radius | Controls bullet `border-radius` |