Primer

On this page

Timeline

Use the timeline component to display a list of connected items as a vertical timeline.
  • Experimental
  • Not reviewed for accessibility
On this page
import {Timeline} from '@primer/react-brand'

Examples

Timeline requires the dir attribute to be set on the <html> element to ensure the correct visual appearance of timeline items.

Default

With emphasis

Use a <b> element within the timeline items to apply a duotone style and emphasize part of the text.

Timeline

NameTypeDefaultDescription
classNamestringSets a custom class on the root element
childrenTimeline.Item, Timeline.Item[]Content to be displayed within the component
fullWidthbooleanfalseFills available space

Timeline.Item

NameTypeDefaultDescription
classNamestringSets a custom class on the root element
childrenReact.ReactNode, React.ReactNode[]Content to be displayed within the item.