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

import { Text } from "@chakra-ui/react"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
} from "@/components/ui/timeline"
import { LuCheck, LuPackage, LuShip } from "react-icons/lu"

const Demo = () => {
  return (
    <TimelineRoot maxW="400px">
      <TimelineItem>
        <TimelineConnector>
          <LuShip />
        </TimelineConnector>
        <TimelineContent>
          <Text textStyle="sm">Product Shipped</Text>
          <Text fontSize="xs" color="fg.subtle">
            13th May 2021
          </Text>
          <Text mt="5" textStyle="sm">
            We shipped your product via <strong>FedEx</strong> and it should
            arrive within 3-5 business days.
          </Text>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <LuCheck />
        </TimelineConnector>
        <TimelineContent>
          <Text textStyle="sm">Order Confirmed</Text>
          <Text fontSize="xs" color="fg.subtle">
            18th May 2021
          </Text>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <LuPackage />
        </TimelineConnector>
        <TimelineContent>
          <Text textStyle="sm">Order Delivered</Text>
          <Text fontSize="xs" color="fg.subtle">
            20th May 2021, 10:30am
          </Text>
        </TimelineContent>
      </TimelineItem>
    </TimelineRoot>
  )
}

Setup

If you don't already have the snippet, run the following command to add the timeline snippet

chakra snippet add timeline

The snippet includes a closed component composition for the Timeline component.

Usage

import { TimelineItem, TimelineRoot } from "@/components/ui/timeline"

<TimelineRoot>
  <TimelineItem />
  <TimelineItem />
</TimelineRoot>

Examples

Sizes

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

sage

created a new project

sage

changed status from In progress to Completed

sage

created a new project

sage

changed status from In progress to Completed

import { Badge, HStack, Stack, Text } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
} from "@/components/ui/timeline"
import { LuCheck } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack gap="8">
      <TimelineRoot size="sm">
        <TimelineItem>
          <TimelineConnector>
            <Avatar size="xs" name="Sage" src="https://bit.ly/sage-adebayo" />
          </TimelineConnector>
          <TimelineContent textStyle="xs">
            <HStack>
              <Text fontWeight="medium">sage</Text>
              created a new project
            </HStack>
          </TimelineContent>
        </TimelineItem>

        <TimelineItem>
          <TimelineConnector>
            <LuCheck />
          </TimelineConnector>
          <TimelineContent textStyle="xs">
            <HStack>
              <Text fontWeight="medium">sage</Text>
              changed status from <Badge>In progress</Badge> to{" "}
              <Badge colorPalette="teal">Completed</Badge>
            </HStack>
          </TimelineContent>
        </TimelineItem>
      </TimelineRoot>

      <TimelineRoot size="md">
        <TimelineItem>
          <TimelineConnector>
            <Avatar size="sm" name="Sage" src="https://bit.ly/sage-adebayo" />
          </TimelineConnector>
          <TimelineContent>
            <HStack>
              <Text fontWeight="medium">sage</Text>
              created a new project
            </HStack>
          </TimelineContent>
        </TimelineItem>

        <TimelineItem>
          <TimelineConnector>
            <LuCheck />
          </TimelineConnector>
          <TimelineContent>
            <HStack>
              <Text fontWeight="medium">sage</Text>
              changed status from <Badge>In progress</Badge> to{" "}
              <Badge colorPalette="teal">Completed</Badge>
            </HStack>
          </TimelineContent>
        </TimelineItem>
      </TimelineRoot>
    </Stack>
  )
}

Variants

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

sage

created a new project

sage

changed status from In progress to Completed

sage

created a new project

sage

changed status from In progress to Completed

sage

created a new project

sage

changed status from In progress to Completed

sage

created a new project

sage

changed status from In progress to Completed

import { Badge, For, HStack, Stack, Text } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
} from "@/components/ui/timeline"
import { LuCheck } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack gap="16">
      <For each={["subtle", "solid", "outline", "plain"]}>
        {(variant) => (
          <TimelineRoot variant={variant} key={variant}>
            <TimelineItem>
              <TimelineConnector>
                <Avatar
                  size="sm"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </TimelineConnector>
              <TimelineContent>
                <HStack textStyle="sm">
                  <Text fontWeight="medium">sage</Text>
                  created a new project
                </HStack>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector>
                <LuCheck />
              </TimelineConnector>
              <TimelineContent>
                <HStack textStyle="sm">
                  <Text fontWeight="medium">sage</Text>
                  changed status from <Badge>In progress</Badge> to{" "}
                  <Badge colorPalette="teal">Completed</Badge>
                </HStack>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </For>
    </Stack>
  )
}

Content Before

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

Nov 1994

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 2010

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 1994

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nov 2010

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

import { Stack, Timeline } from "@chakra-ui/react"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
} from "@/components/ui/timeline"

const Demo = () => {
  return (
    <Stack gap="8">
      <TimelineRoot size="sm">
        <TimelineItem>
          <TimelineContent fontSize="xs">Nov 1994</TimelineContent>
          <TimelineConnector>1</TimelineConnector>
          <Timeline.Content fontSize="xs">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Timeline.Content>
        </TimelineItem>

        <TimelineItem>
          <TimelineContent fontSize="xs">Nov 2010</TimelineContent>
          <TimelineConnector>2</TimelineConnector>
          <TimelineContent fontSize="xs">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </TimelineContent>
        </TimelineItem>
      </TimelineRoot>

      <TimelineRoot size="md">
        <TimelineItem>
          <TimelineContent fontSize="sm">Nov 1994</TimelineContent>
          <TimelineConnector>1</TimelineConnector>
          <Timeline.Content fontSize="sm">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Timeline.Content>
        </TimelineItem>

        <Timeline.Item>
          <Timeline.Content fontSize="sm">Nov 2010</Timeline.Content>
          <TimelineConnector>2</TimelineConnector>
          <Timeline.Content fontSize="sm">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Timeline.Content>
        </Timeline.Item>
      </TimelineRoot>
    </Stack>
  )
}

Alternating Content

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

Placed Order

Prepared Order

Order Delivered

import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
} from "@/components/ui/timeline"

const Demo = () => {
  return (
    <TimelineRoot size="sm" variant="outline">
      <TimelineItem>
        <TimelineContent flex="1" />
        <TimelineConnector />
        <TimelineContent flex="1">Placed Order</TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineContent flex="1" textAlign="right">
          Prepared Order
        </TimelineContent>
        <TimelineConnector />
        <TimelineContent flex="1" />
      </TimelineItem>

      <TimelineItem>
        <TimelineContent flex="1" />
        <TimelineConnector />
        <TimelineContent flex="1">Order Delivered</TimelineContent>
      </TimelineItem>
    </TimelineRoot>
  )
}

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

Timeline

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup