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><PersonaAvatarsrc="/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><Badgerounded="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><PersonaAvatarsrc="/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?