Timeline

Usage

import { Timeline } from "@chakra-ui/react"

<Timeline.Root>
  <Timeline.Item>
    <Timeline.Connector>
      <Timeline.Separator />
      <Timeline.Indicator />
    </Timeline.Connector>
    <Timeline.Content>
      <Timeline.Title />
      <Timeline.Description />
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>

Examples

Sizes

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

Variants

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

Content Before

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

Alternating Content

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

Composition

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

Props

Root

Explorer

Explore the Timeline component parts interactively. Click on parts in the sidebar to highlight them in the preview.