Timeline

Display a list of events in chronological order.

Beta
Get Pro

Import#

import {
  Timeline,
  TimelineProps,
  TimelineItem,
  TimelineSeparator,
  TimelineIcon,
  TimelineTrack,
  TimelineContent,
} from '@saas-ui/pro'

Usage#

The Timeline component allows you to display a list of events in chronological order, from a simple list of events to a complex timeline with custom content.

Basic Timeline#

A basic timeline showing a simple list of events.

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon />
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Validate</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon />
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Build</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon />
    </TimelineSeparator>
    <TimelineContent>Iterate</TimelineContent>
  </TimelineItem>
</Timeline>

With colored icons#

The TimelineIcon supports a color prop that can be used to change the color of the icon.

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="primary.500" />
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Validate</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="cyan.500" />
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Build</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="green.500" />
    </TimelineSeparator>
    <TimelineContent>Iterate</TimelineContent>
  </TimelineItem>
</Timeline>

Outline variant#

The Timeline supports 2 variants, solid and outline.

<Timeline variant="outline">
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="primary.500" />
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Validate</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="cyan.500" />
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Build</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="green.500" />
    </TimelineSeparator>
    <TimelineContent>Iterate</TimelineContent>
  </TimelineItem>
</Timeline>

Custom icons#

The TimelineIcon renders a dot by default, but it also supports custom icons.

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="gray.800" _dark={{ color: 'white' }}>
        <FiUserCheck />
      </TimelineIcon>
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Validate</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="gray.800" _dark={{ color: 'white' }}>
        <FiCode />
      </TimelineIcon>
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent>Build</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon color="gray.800" _dark={{ color: 'white' }}>
        <FiRefreshCw />
      </TimelineIcon>
    </TimelineSeparator>
    <TimelineContent>Iterate</TimelineContent>
  </TimelineItem>
</Timeline>

Custom timeline#

Here's a more advanced example that shows a list of user actions. Use padding on TimelineContent to align the content with the icon.

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon>
        <PersonaAvatar
          src="/showcase-avatar.jpg"
          colorScheme="purple.300"
          name="Renata Alink"
          size="xs"
          bg="purple.200"
          presence="online"
        />
      </TimelineIcon>
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent pt="2" px="3">
      <Text color="muted">
        <Link color="black" _dark={{ color: 'white' }}>
          Renata
        </Link>{' '}
        created the issue.
      </Text>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon>
        <Badge
          rounded="full"
          borderWidth="2px"
          borderColor="green.300"
          bg="none"
          boxSize="13px"
        />
      </TimelineIcon>
      <TimelineTrack />
    </TimelineSeparator>
    <TimelineContent pt="2px" px="3">
      <Text color="muted">John changed status to pending.</Text>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIcon>
        <PersonaAvatar
          src="/showcase-avatar.jpg"
          name="Renata Alink"
          size="xs"
          bg="purple.200"
          presence="online"
        />
      </TimelineIcon>
    </TimelineSeparator>
    <TimelineContent pt="2" px="3">
      <Text color="muted">
        <Link color="black" _dark={{ color: 'white' }}>
          Renata
        </Link>{' '}
        completed the issue.
      </Text>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Props#

Timeline Props#

Was this helpful?