Timeline
Used to display a list of events in chronological order
We shipped your product via FedEx and it should arrive within 3-5 business days.
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.
Lorem ipsum. Quisque faucibus. In id. Tempus leo. Pulvinar vivamus. Iaculis massa. Ut hendrerit. Ad litora.
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | gray | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | solid | 'subtle' | 'solid' | 'outline' | 'plain'The variant of the component |
size | md | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |
Explorer
Explore the Timeline component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
We shipped your product via FedEx and it should arrive within 3-5 business days.
Component Anatomy
Hover to highlight, click to select parts
root
item
content
separator
indicator
connector
title
description