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

import { Timeline, Text } from '@mantine/core';
import { IconGitBranch, IconGitPullRequest, IconGitCommit, IconMessageDots } from '@tabler/icons-react';

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
bulletSize – bullet width, height and border-radius
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

Active

Reverse active

LineWidth

BulletSize

Align

Left

Right

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, Box } from '@mantine/core';
import { IconSun, IconVideo } from '@tabler/icons-react';

function Demo() {
  return (
    <Box maw={320} mx="auto">
      <Timeline>
        <Timeline.Item title="Default bullet" bulletSize={24}>
          <Text color="dimmed" size="sm">
            Default bullet without anything
          </Text>
        </Timeline.Item>
        <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="0.8rem" />}>
          <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="0.8rem" />
            </ThemeIcon>
          }
        >
          <Text color="dimmed" size="sm">
            Timeline bullet as ThemeIcon component
          </Text>
        </Timeline.Item>
      </Timeline>
    </Box>
  );
}

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>
  );
}

Go back

ThemeIcon – @mantine/core

Up next

Affix – @mantine/core

Timeline component props

Name	Type	Description
active	number	Index of active element
align	"left" \| "right"	Timeline alignment
bulletSize	string \| number	Bullet size
children^*	ReactNode	<Timeline.Item /> components only
color	MantineColor	Active color from theme
lineWidth	string \| number	Line width
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, "xl" by default
reverseActive	boolean	Reverse active direction without reversing items

TimelineItem component props

Name	Type	Description
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, 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, controlled by Timeline component
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, "xl" by default
title	ReactNode	Item title, rendered next to bullet

Timeline component Styles API

Name	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

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter