Preview Updated 2026-05-10

Timeline

Sequential event stream with dots, connectors, and timestamps. Common in changelogs, audit trails, and release notes.

Basic usage

Each entry in items is a node. color controls the dot color (primary / success / warning / danger / neutral).

<CfTimeline :items="items" />

<CfTimeline items={items} />

Prop	Type	Default	Description
`items`	`TimelineItem[]`	`—`	Node list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Node font size and dot size
`mode`	`'left' \| 'right' \| 'alternate'`	`'left'`	Content position relative to the connector
`reverse`	`boolean`	`false`	Reverse order (newest first)

Field	Type	Description
`key`	`string \| number`	Unique key, used for v-for / map key
`title`	`string`	Main title
`content`	`string`	Detailed description
`time`	`string`	Timestamp text
`color`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	Dot color