Skip to Content

Docs Resources Showcase

Timeline

Used to display a list of events in chronological order

Source Storybook Recipe

Product Shipped

13th May 2021

We shipped your product via FedEx and it should arrive within 3-5 business days.

Order Confirmed

18th May 2021

Order Delivered

20th May 2021, 10:30am

'use client'

import { Text } from '@chakra-ui/react'
import { Timeline } from '@saas-ui/react'
import { LuCheck, LuPackage, LuShip } from 'react-icons/lu'

export const TimelineBasic = () => {
  return (
    <Timeline.Root maxW="400px">
      <Timeline.Item>
        <Timeline.Connector>
          <LuShip />
        </Timeline.Connector>
        <Timeline.Content>
          <Timeline.Title>Product Shipped</Timeline.Title>
          <Timeline.Description>13th May 2021</Timeline.Description>
          <Text textStyle="sm">
            We shipped your product via <strong>FedEx</strong> and it should
            arrive within 3-5 business days.
          </Text>
        </Timeline.Content>
      </Timeline.Item>

      <Timeline.Item>
        <Timeline.Connector>
          <LuCheck />
        </Timeline.Connector>
        <Timeline.Content>
          <Timeline.Title textStyle="sm">Order Confirmed</Timeline.Title>
          <Timeline.Description>18th May 2021</Timeline.Description>
        </Timeline.Content>
      </Timeline.Item>

      <Timeline.Item>
        <Timeline.Connector>
          <LuPackage />
        </Timeline.Connector>
        <Timeline.Content>
          <Timeline.Title textStyle="sm">Order Delivered</Timeline.Title>
          <Timeline.Description>20th May 2021, 10:30am</Timeline.Description>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline.Root>
  )
}

Anatomy

import { Timeline } from '@saas-ui/react/timeline'

<Timeline.Root>
  <Timeline.Item />
  <Timeline.Item />
</Timeline.Root>

Examples

Sizes

Use the size prop to change the size of the timeline.

S

sagecreated a new project

sagechanged status from In progress to Completed

S

sagecreated a new project

sagechanged status from In progress to Completed

S

sagecreated a new project

sagechanged status from In progress to Completed

S

sagecreated a new project

sagechanged status from In progress to Completed

'use client'

import { Badge, For, Span, Stack } from '@chakra-ui/react'
import { Avatar, Timeline } from '@saas-ui/react'
import { LuCheck } from 'react-icons/lu'

export const TimelineWithSizes = () => {
  return (
    <Stack gap="8">
      <For each={['sm', 'md', 'lg', 'xl']}>
        {(size) => (
          <Timeline.Root key={size} size={size}>
            <Timeline.Item>
              <Timeline.Connector>
                <Avatar
                  size="full"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </Timeline.Connector>
              <Timeline.Content textStyle="xs">
                <Timeline.Title>
                  <Span fontWeight="medium">sage</Span>
                  created a new project
                </Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>

            <Timeline.Item>
              <Timeline.Connector>
                <LuCheck />
              </Timeline.Connector>
              <Timeline.Content textStyle="xs">
                <Timeline.Title mt={size === 'sm' ? '-2px' : undefined}>
                  <Span fontWeight="medium">sage</Span>
                  changed status from <Badge size="sm">
                    In progress
                  </Badge> to{' '}
                  <Badge colorPalette="teal" size="sm">
                    Completed
                  </Badge>
                </Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>
          </Timeline.Root>
        )}
      </For>
    </Stack>
  )
}

Variants

Use the variant prop to change the variant of the timeline.

S

sagecreated a new project

sagechanged status from In progress to Completed

S

sagecreated a new project

sagechanged status from In progress to Completed

S

sagecreated a new project

sagechanged status from In progress to Completed

S

sagecreated a new project

sagechanged status from In progress to Completed

'use client'

import { Badge, For, Span, Stack } from '@chakra-ui/react'
import { Avatar, Timeline } from '@saas-ui/react'
import { LuCheck } from 'react-icons/lu'

export const TimelineWithVariants = () => {
  return (
    <Stack gap="16">
      <For each={['subtle', 'solid', 'outline', 'plain']}>
        {(variant) => (
          <Timeline.Root variant={variant} key={variant}>
            <Timeline.Item>
              <Timeline.Connector>
                <Avatar
                  size="full"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </Timeline.Connector>
              <Timeline.Content>
                <Timeline.Title>
                  <Span fontWeight="medium">sage</Span>
                  created a new project
                </Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>

            <Timeline.Item>
              <Timeline.Connector>
                <LuCheck />
              </Timeline.Connector>
              <Timeline.Content>
                <Timeline.Title>
                  <Span fontWeight="medium">sage</Span>
                  changed status from <Badge>In progress</Badge> to{' '}
                  <Badge colorPalette="teal">Completed</Badge>
                </Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>
          </Timeline.Root>
        )}
      </For>
    </Stack>
  )
}

Content Before

Here's an example of a timeline with content before the timeline indicator.

Nov 1994

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 2010

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 1994

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 2010

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 1994

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 2010

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

'use client'

import { For, Stack } from '@chakra-ui/react'
import { Timeline } from '@saas-ui/react'

export const TimelineWithContentBefore = () => {
  return (
    <Stack gap="8">
      <For each={['sm', 'md', 'lg']}>
        {(size) => (
          <Timeline.Root size={size} key={size}>
            <Timeline.Item>
              <Timeline.Content width="auto">
                <Timeline.Title whiteSpace="nowrap">Nov 1994</Timeline.Title>
              </Timeline.Content>
              <Timeline.Connector>1</Timeline.Connector>
              <Timeline.Content>
                <Timeline.Title>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>

            <Timeline.Item>
              <Timeline.Content width="auto">
                <Timeline.Title whiteSpace="nowrap">Nov 2010</Timeline.Title>
              </Timeline.Content>
              <Timeline.Connector>2</Timeline.Connector>
              <Timeline.Content>
                <Timeline.Title>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>
          </Timeline.Root>
        )}
      </For>
    </Stack>
  )
}

Alternating Content

Here's an example of a timeline with alternating content.

Placed Order

Prepared Order

Order Delivered

'use client'

import { Timeline } from '@saas-ui/react'

export const TimelineAlternating = () => {
  return (
    <Timeline.Root size="sm" variant="outline">
      <Timeline.Item>
        <Timeline.Content flex="1" />
        <Timeline.Connector />
        <Timeline.Content flex="1">
          <Timeline.Title>Placed Order</Timeline.Title>
        </Timeline.Content>
      </Timeline.Item>

      <Timeline.Item>
        <Timeline.Content flex="1" alignItems="flex-end">
          <Timeline.Title>Prepared Order</Timeline.Title>
        </Timeline.Content>
        <Timeline.Connector />
        <Timeline.Content flex="1" />
      </Timeline.Item>

      <Timeline.Item>
        <Timeline.Content flex="1" />
        <Timeline.Connector />
        <Timeline.Content flex="1">
          <Timeline.Title>Order Delivered</Timeline.Title>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline.Root>
  )
}

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`variant`	`'solid'`	`'subtle' \| 'solid' \| 'outline' \| 'plain'` The variant of the component
`size`	`'md'`	`'sm' \| 'md'` The size of the component

Previous

Next