Timeline
Display list of events in chronological order
Import
Source
Docs
Package
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
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 withcolor
color
– color from theme that should be used to highlight active items, defaults totheme.primaryColor
lineWidth
– controls line width and bullet border, value is in pxbulletSize
– bullet width, height and border-radius in pxalign
– 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
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
Wrap Timeline.Item
Timeline
component relies on Timeline.Item
order. Wrapping Timeline.Item
is not supported,
Instead you will need to use different approaches:
Timeline component props
Name | Type | Description |
---|---|---|
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
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 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
Name | Static selector | Description |
---|---|---|
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 |