Timeline

Display a list of events in chronological order.

Import

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

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.

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

export default function BasicTimeline() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineIcon />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Validate</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Build</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon />
        </TimelineSeparator>
        <TimelineContent>Iterate</TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

Colored icons

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

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

export default function ColoredIcons() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineIcon color="primary.500" />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Validate</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon color="cyan.500" _dark={{ color: 'cyan.500' }} />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Build</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon color="green.500" _dark={{ color: 'green.500' }} />
        </TimelineSeparator>
        <TimelineContent>Iterate</TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

Outline variant

The Timeline supports 2 variants, solid and outline.

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

export default function OutlineVariant() {
  return (
    <Timeline variant="outline">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineIcon color="primary.500" _dark={{ color: 'primary.500' }} />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Validate</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon color="cyan.500" _dark={{ color: 'cyan.500' }} />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Build</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon color="green.500" _dark={{ color: 'green.500' }} />
        </TimelineSeparator>
        <TimelineContent>Iterate</TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

Custom icons

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

import {
  Timeline,
  TimelineItem,
  TimelineSeparator,
  TimelineIcon,
  TimelineTrack,
  TimelineContent,
  IconBadge,
} from '@saas-ui/react'
import { FiUserCheck, FiCode, FiRefreshCw } from 'react-icons/fi'

export default function CustomIcons() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <IconBadge
            icon={<FiUserCheck />}
            colorScheme="green"
            rounded="full"
          />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Validate</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <IconBadge icon={<FiCode />} colorScheme="yellow" rounded="full" />
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>Build</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <IconBadge
            icon={<FiRefreshCw />}
            colorScheme="purple"
            rounded="full"
          />
        </TimelineSeparator>
        <TimelineContent>Iterate</TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

Custom timeline

Here's a more advanced example that shows a list of user actions.

import {
  Timeline,
  TimelineItem,
  TimelineSeparator,
  TimelineIcon,
  TimelineTrack,
  TimelineContent,
  PersonaAvatar,
} from '@saas-ui/react'
import { Card, CardBody, Text, Link, Badge } from '@chakra-ui/react'

export default function CustomTimeline() {
  return (
    <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>
          <Text color="muted">
            <Link color="black" _dark={{ color: 'white' }}>
              Renata
            </Link>{' '}
            created the issue.
          </Text>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon>
            <Badge
              rounded="full"
              borderWidth="2px"
              borderColor="yellow.300"
              bg="none"
              boxSize="13px"
            />
          </TimelineIcon>
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>
          <Text color="muted">John changed status to pending.</Text>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem alignItems="start">
        <TimelineSeparator>
          <TimelineTrack flex="0" />
          <TimelineIcon>
            <PersonaAvatar
              src="/showcase-avatar.jpg"
              name="Renata Alink"
              size="xs"
              bg="purple.200"
              presence="online"
            />
          </TimelineIcon>
          <TimelineTrack />
        </TimelineSeparator>
        <TimelineContent>
          <Card>
            <CardBody>
              @John I just completed the timeline component, what's next?
            </CardBody>
          </Card>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineTrack />
          <TimelineIcon>
            <Badge
              rounded="full"
              borderWidth="2px"
              borderColor="green.300"
              bg="none"
              boxSize="13px"
            />
          </TimelineIcon>
        </TimelineSeparator>
        <TimelineContent>
          <Text color="muted">
            <Link color="black" _dark={{ color: 'white' }}>
              Renata
            </Link>{' '}
            completed the issue.
          </Text>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

Was this helpful?