Timeline

Display a list of events in chronological order.

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?