Timeline

Display list of events in chronological order
Import

Usage

New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago
import { Timeline, Text } from '@mantine/core';
import { IconGitBranch, IconGitPullRequest, IconGitCommit, IconMessageDots } from '@tabler/icons';
function Demo() {
return (
<Timeline active={1} bulletSize={24} lineWidth={2}>
<Timeline.Item bullet={<IconGitBranch size={12} />} title="New branch">
<Text color="dimmed" size="sm">You&apos;ve created new branch <Text variant="link" component="span" inherit>fix-notifications</Text> from master</Text>
<Text size="xs" mt={4}>2 hours ago</Text>
</Timeline.Item>
<Timeline.Item bullet={<IconGitCommit size={12} />} title="Commits">
<Text color="dimmed" size="sm">You&apos;ve pushed 23 commits to<Text variant="link" component="span" inherit>fix-notifications branch</Text></Text>
<Text size="xs" mt={4}>52 minutes ago</Text>
</Timeline.Item>
<Timeline.Item title="Pull request" bullet={<IconGitPullRequest size={12} />} lineVariant="dashed">
<Text color="dimmed" size="sm">You&apos;ve submitted a pull request<Text variant="link" component="span" inherit>Fix incorrect notification message (#187)</Text></Text>
<Text size="xs" mt={4}>34 minutes ago</Text>
</Timeline.Item>
<Timeline.Item title="Code review" bullet={<IconMessageDots size={12} />}>
<Text color="dimmed" size="sm"><Text variant="link" component="span" inherit>Robert Gluesticker</Text> left a code review on your pull request</Text>
<Text size="xs" mt={4}>12 minutes ago</Text>
</Timeline.Item>
</Timeline>
);
}

Line and bullet props

Control timeline appearance with the following props:

  • active – index of 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, value is in px
  • bulletSize – bullet width, height and border-radius in px
  • align – defines line and bullets position relative to content, also sets text-align
New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago
Color
Radius
xs
sm
md
lg
xl
Align
import { Timeline } from '@mantine/core';
function Demo() {
return (
<Timeline active={1}>
{/* items */}
</Timeline>
);
}

Bullet as React node

Default bullet
Default bullet without anything
Avatar
Timeline bullet as avatar image
Icon
Timeline bullet as icon
ThemeIcon
Timeline bullet as ThemeIcon component
import { ThemeIcon, Text, Avatar, Timeline } from '@mantine/core';
import { IconSun, IconVideo } from '@tabler/icons';
function Demo() {
return (
<div style={{ maxWidth: 320, margin: 'auto' }}>
<Timeline>
{/* If you do not pass bullet prop, default bullet will be rendered */}
<Timeline.Item title="Default bullet" bulletSize={24}>
<Text color="dimmed" size="sm">
Default bullet without anything
</Text>
</Timeline.Item>
{/* You can use any react node as bullet, e.g. Avatar, ThemeIcon or any svg icon */}
<Timeline.Item
title="Avatar"
bulletSize={24}
bullet={
<Avatar
size={22}
radius="xl"
src="https://avatars0.githubusercontent.com/u/10353856?s=460&u=88394dfd67727327c1f7670a1764dc38a8a24831&v=4"
/>
}
>
<Text color="dimmed" size="sm">
Timeline bullet as avatar image
</Text>
</Timeline.Item>
<Timeline.Item
title="Icon"
bulletSize={24}
bullet={<IconSun size={14} />}
>
<Text color="dimmed" size="sm">
Timeline bullet as icon
</Text>
</Timeline.Item>
<Timeline.Item
title="ThemeIcon"
bulletSize={24}
bullet={
<ThemeIcon
size={22}
variant="gradient"
gradient={{ from: 'lime', to: 'cyan' }}
radius="xl"
>
<IconVideo size={14} />
</ThemeIcon>
}
>
<Text color="dimmed" size="sm">
Timeline bullet as ThemeIcon component
</Text>
</Timeline.Item>
</Timeline>
</div>
);
}

Wrap Timeline.Item

Timeline component relies on Timeline.Item order. Wrapping Timeline.Item is not supported, Instead you will need to use different approaches:

import { Timeline } from '@mantine/core';
// This will not work, step children will not render
function WillNotWork() {
return (
<Timeline.Item label="Nope" description="It will not work">
This part will not render
</Timeline.Item>
);
}
// Create a separate component for children
function WillWork() {
return <div>This will work as expected!</div>;
}
function Demo() {
return (
<Timeline active={1}>
<Timeline.Item title="Regular item">First item</Timeline.Item>
<WillNotWork />
<Timeline.Item title="Works as expected">
<WillWork />
</Timeline.Item>
<Timeline.Item title="Regular item">Third item</Timeline.Item>
</Timeline>
);
}

Timeline component props

NameTypeDescription
active
number
Index of active element
align
"left" | "right"
Timeline alignment
bulletSize
number
Bullet size in px
children *
ReactNode
<Timeline.Item /> components only
color
MantineColor
Active color from theme
lineWidth
number
Line width in px
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Radius from theme.radius, or number to set border-radius in px
reverseActive
boolean
Reverse active direction without reversing items

TimelineItem component props

NameTypeDescription
active
boolean
Should this item be highlighted, controlled by Timeline component
align
"left" | "right"
Line and bullet position relative to item content, controlled by Timeline component
bullet
ReactNode
React node that should be rendered inside bullet – icon, image, avatar, etc.
bulletSize
number
Bullet width, height and border-radius in px, controlled by Timeline component
children
ReactNode
React node that will be rendered after title
color
MantineColor
Highlight color for active item
lineActive
boolean
Should line of this item be highlighted, controlled by Timeline component
lineVariant
"dashed" | "dotted" | "solid"
Line border style
lineWidth
number
Line border width in px, controlled by Timeline component
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Radius from theme.radius, or number to set border-radius in px
title
ReactNode
Item title, rendered next to bullet

Timeline component Styles API

NameStatic selectorDescription
item.mantine-Timeline-itemItem root element
itemBody.mantine-Timeline-itemBodyItem body, wraps title and content
itemTitle.mantine-Timeline-itemTitleItem title, controlled by title prop
itemContent.mantine-Timeline-itemContentItem content, controlled by children prop
itemBullet.mantine-Timeline-itemBulletItem bullet