Build faster with Premium Chakra UI Components 💎

Skip to Content

Docs Playground Guides Blog

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,
  TimelineDescription,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"
import { LuCheck, LuPackage, LuShip } from "react-icons/lu"

const Demo = () => {
  return (
    <TimelineRoot maxW="400px">
      <TimelineItem>
        <TimelineConnector>
          <LuShip />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Product Shipped</TimelineTitle>
          <TimelineDescription>13th May 2021</TimelineDescription>
          <Text 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>
          <TimelineTitle textStyle="sm">Order Confirmed</TimelineTitle>
          <TimelineDescription>18th May 2021</TimelineDescription>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <LuPackage />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle textStyle="sm">Order Delivered</TimelineTitle>
          <TimelineDescription>20th May 2021, 10:30am</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </TimelineRoot>
  )
}

Setup

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

npx @chakra-ui/cli 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.

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

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

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["sm", "md", "lg", "xl"]}>
        {(size) => (
          <TimelineRoot key={size} size={size}>
            <TimelineItem>
              <TimelineConnector>
                <Avatar
                  size="full"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </TimelineConnector>
              <TimelineContent textStyle="xs">
                <TimelineTitle>
                  <Span fontWeight="medium">sage</Span>
                  created a new project
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector>
                <LuCheck />
              </TimelineConnector>
              <TimelineContent textStyle="xs">
                <TimelineTitle 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>
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </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

import { Badge, For, Span, Stack } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} 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="full"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </TimelineConnector>
              <TimelineContent>
                <TimelineTitle>
                  <Span fontWeight="medium">sage</Span>
                  created a new project
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector>
                <LuCheck />
              </TimelineConnector>
              <TimelineContent>
                <TimelineTitle>
                  <Span fontWeight="medium">sage</Span>
                  changed status from <Badge>In progress</Badge> to{" "}
                  <Badge colorPalette="teal">Completed</Badge>
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </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.

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

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <TimelineRoot size={size} key={size}>
            <TimelineItem>
              <TimelineContent width="auto">
                <TimelineTitle whiteSpace="nowrap">Nov 1994</TimelineTitle>
              </TimelineContent>
              <TimelineConnector>1</TimelineConnector>
              <Timeline.Content>
                <TimelineTitle>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </TimelineTitle>
              </Timeline.Content>
            </TimelineItem>

            <TimelineItem>
              <TimelineContent width="auto">
                <TimelineTitle whiteSpace="nowrap">Nov 2010</TimelineTitle>
              </TimelineContent>
              <TimelineConnector>2</TimelineConnector>
              <TimelineContent>
                <TimelineTitle>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </For>
    </Stack>
  )
}

Alternating Content

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

Placed Order

Prepared Order

Order Delivered

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

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

      <TimelineItem>
        <TimelineContent flex="1" alignItems="flex-end">
          <TimelineTitle>Prepared Order</TimelineTitle>
        </TimelineContent>
        <TimelineConnector />
        <TimelineContent flex="1" />
      </TimelineItem>

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

Composition

Here's an example of how to compose the timeline with other components to create a consistent-looking timeline.

Lucas Moras has changed3 labels onJan 1, 2024

Jenna Smith removedEnason Jan 12, 2024

Erica commentedon Jan 12, 2024

Lorem ipsum odor amet, consectetuer adipiscing elit. Sodales. Sodales velit sodales. Augue nostra praesent. Gravida posuere? Tempor senectus. Inceptos. Vehicula id morbi. Mollis purus.

import { Button, Card, Icon, Input, Span } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"
import { LuPen, LuX } from "react-icons/lu"
import LoremIpsum from "react-lorem-ipsum"

const Demo = () => {
  return (
    <TimelineRoot size="lg" variant="subtle" maxW="md">
      <TimelineItem>
        <TimelineConnector>
          <Icon fontSize="xs">
            <LuPen />
          </Icon>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>
            <Avatar size="2xs" src="https://i.pravatar.cc/150?u=a" />
            Lucas Moras <Span color="fg.muted">has changed</Span>
            <Span fontWeight="medium">3 labels</Span> on
            <Span color="fg.muted">Jan 1, 2024</Span>
          </TimelineTitle>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <Icon fontSize="xs">
            <LuX />
          </Icon>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>
            <Avatar size="2xs" src="https://i.pravatar.cc/150?u=x" />
            Jenna Smith <Span color="fg.muted">removed</Span>
            <Span fontWeight="medium">Enas</Span>
            <Span color="fg.muted">on Jan 12, 2024</Span>
          </TimelineTitle>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector bg="teal.solid" color="teal.contrast">
          <Icon fontSize="xs">
            <LuX />
          </Icon>
        </TimelineConnector>
        <TimelineContent gap="4">
          <TimelineTitle>
            <Avatar size="2xs" src="https://i.pravatar.cc/150?u=y" />
            Erica <Span color="fg.muted">commented</Span>
            <Span color="fg.muted">on Jan 12, 2024</Span>
          </TimelineTitle>
          <Card.Root size="sm">
            <Card.Body textStyle="sm" lineHeight="tall">
              <LoremIpsum p={1} avgWordsPerSentence={2} />
            </Card.Body>
            <Card.Footer>
              <Button size="xs" variant="surface" rounded="md">
                👏 2
              </Button>
            </Card.Footer>
          </Card.Root>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <Avatar size="full" src="https://i.pravatar.cc/150?u=o" />
        </TimelineConnector>
        <TimelineContent gap="4" mt="-1" w="full">
          <Input size="sm" placeholder="Add comment..." />
        </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

Previous

Next