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
<Timeline active={1} bulletSize={24} lineWidth={2}>
<Timeline.Item bullet={<GitBranchIcon 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" style={{ marginTop: 4 }}>2 hours ago</Text>
</Timeline.Item>
<Timeline.Item bullet={<GitCommitIcon 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" style={{ marginTop: 4 }}>52 minutes ago</Text>
</Timeline.Item>
<Timeline.Item title="Pull request" bullet={<GitPullRequestIcon 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" style={{ marginTop: 4 }}>34 minutes ago</Text>
</Timeline.Item>
<Timeline.Item title="Code review" bullet={<CommentDiscussionIcon 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" style={{ marginTop: 4 }}>12 minutes ago</Text>
</Timeline.Item>
</Timeline>

Line and bullet props

You can control timeline appearance with 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
Align
<Timeline active={1}>
{/* items */}
</Timeline>

Bullet as React node

You can use any React node to replace default bullet:

Default bullet
Default bullet without anything
Avatar
Timeline bullet as avatar image
Icon
Timeline bullet as icon
ThemeIcon
Timeline bullet as ThemeIcon component
// If you do not pass bullet prop, default bullet will be rendered
<Timeline.Item />
// You can use any react node as bullet, e.g. Avatar, ThemeIcon or any svg icon
<Timeline.Item
title="Avatar"
bullet={<Avatar size={22} radius="xl" src="./avatar.png" />}
/>
<Timeline.Item
title="Icon"
bullet={<SunIcon style={{ width: 14, height: 14 }} />}
/>
<Timeline.Item
title="ThemeIcon"
bullet={(
<ThemeIcon
size={22}
variant="gradient"
gradient={{ from: 'lime', to: 'cyan' }}
radius="xl"
>
<VideoIcon style={{ width: 14, height: 14 }} />
</ThemeIcon>
)}
/>

TypeScript

Component props type

Import component props type:

import type { TimelineProps, TimelineItemProps } from '@mantine/core';
  • TimelineProps extends React.ComponentPropsWithoutRef<'div'>
  • TimelineItemProps extends React.ComponentPropsWithoutRef<'div'>

All other props are available under Component props tab.

TimelineStylesNames type

TimelineStylesNames type is a union with Timeline Styles API names:

import type { TimelineStylesNames } from '@mantine/core';
const timelineClasses: Partial<Record<TimelineStylesNames, 'string'>> = {
item: 'timeline-item',
active: 'timeline-itemActive',
};
<Timeline classNames={timelineClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback