Skip to content



The TimelineItem component is used to display items on a vertical timeline, connected by TimelineItem-badge elements.


The default TimelineItem-badge color is dark text on a light grey background.

Adding color to TimelineItem-badge

To have color variants, use the color utilities on the badge. Be cautious with color choices. We typically use them in the timeline to give meaning to the event in context of the timeline.


TimelineItem has a condensed variant that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits.


Sometimes you want to give ownership to an event by displaying an Avatar of the author. To do this, you'll need to wrap the TimelineItem in a <div> and give it space for the avatar. ml-6 pl-3 This is 40px, the size of the image, and 16px space for the gutter.


To create a visual break in the timeline, use TimelineItem-break. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.

Target TimelineItem

Edit this page on GitHub
2 contributorsmetonymjonrohan
Last edited by metonym on April 27, 2020