Timeline

Timeline lists events in order, newest first, each with a marker, a title (usually the date) and a description.

import { Timeline, TimelineItem } from '@beyul/sulmu-ui'

Source · Figma

Examples

1. Jul 23, 2025Sarah Zhang added internal note: “Ready for deal conversion”
2. Jul 22, 2025Mark T. added pricing details
3. Jul 22, 2025Changed priority to “High”
4. Jul 15, 2025Lead created by James Li

import { Timeline, TimelineItem } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 480 }}>
      <Timeline>
        <TimelineItem title="Jul 23, 2025">
          Sarah Zhang added internal note: “Ready for deal conversion”
        </TimelineItem>
        <TimelineItem title="Jul 22, 2025">Mark T. added pricing details</TimelineItem>
        <TimelineItem title="Jul 22, 2025">Changed priority to “High”</TimelineItem>
        <TimelineItem title="Jul 15, 2025">Lead created by James Li</TimelineItem>
      </Timeline>
    </div>
  )
}

Props

TimelineItem

Prop	Type	Default	Description
title*	ReactNode	-	Usually the date or time.
children	ReactNode	-	What happened.

Timeline has no props of its own; it accepts every ol attribute.

Usage notes

• It renders an ordered list (ol), so the order is conveyed to assistive tech.
• The marker is decorative and hidden from screen readers.