Timeline

Displays a sequence of events or milestones in chronological order.

Usage

The Timeline component is used to display a sequence of events, steps, or milestones in chronological order. It consists of items with separators containing an indicator dot and an optional connector line.

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

<Timeline>
	<Timeline.Item>
		<Timeline.Separator>
			<Timeline.Indicator />
			<Timeline.Connector />
		</Timeline.Separator>
		<Timeline.Content>
			<p>Event content</p>
		</Timeline.Content>
	</Timeline.Item>
</Timeline>

Examples

With Icon

Use custom icons as timeline indicators to add visual context to each event.

API Reference

TimelineRoot

The root element of the Timeline.

Prop	Type	Default
asChild	`boolean`	`false`

TimelineItem

The item element of the Timeline.

Prop	Type	Default
asChild	`boolean`	`false`

TimelineSeparator

The separator element of the Timeline.

Prop	Type	Default
asChild	`boolean`	`false`

TimelineIndicator

The indicator element of the Timeline.

Prop	Type	Default
asChild	`boolean`	`false`

TimelineConnector

The connector element of the Timeline.

Prop	Type	Default
asChild	`boolean`	`false`

TimelineContent

The content element of the Timeline.

Prop	Type	Default
asChild	`boolean`	`false`