Timeline

Display a list of events in chronological order. Useful for activity feeds, order tracking, changelogs, and step-by-step processes.

Basic

Use the convenience TimelineConnector which composes the separator line and indicator together. Pass icons as children.

Variants

The variant prop controls the indicator style. Available variants are solid, subtle, and outline.

Sizes

The size prop controls the indicator size, icon size, and title text size. Available sizes are sm, md, lg, and xl.

Horizontal

Set orientation="horizontal" for a left-to-right timeline layout.

With content before

Place a TimelineContent before the connector to show dates or labels on the left side.

With last separator

By default, the separator line is hidden on the last item. Set showLastSeparator to keep it visible.

Composition

For full control, use the primitives directly: TimelineConnectorPrimitive, TimelineSeparator, and TimelineIndicator.