v2.5.1
Discord
Source code

Timeline

Display list of events in chronological order
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
  )}
/>
Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter