Timeline
A vertical or horizontal timeline for displaying chronological events.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'vertical' | 'horizontal' | 'vertical' | The direction the timeline flows. |
variant | 'default' | 'outline' | 'default' | Visual variant of the timeline dots and connectors. |
activeIndex | number | - | Index of the currently active item (zero-based). Items up to this index appear in an active state. |
contentPosition | 'right' | 'left' | 'alternate' | 'right' | Which side of the line the content appears on. |
Sub-components
Timeline
Root container. Provides orientation and variant context
TimelineItem
Wraps a single event (separator + content)
TimelineSeparator
Container for the dot and connector
TimelineDot
The circular indicator
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | - | Dot size |
TimelineConnector
The line between dots
| Prop | Type | Default | Description |
|---|---|---|---|
thickness | number | - | Line thickness |
TimelineContent
The text/body area for an event
TimelineTitle
Heading text for the event
TimelineDescription
Supporting description text
TimelineTime
Timestamp display
| Prop | Type | Default | Description |
|---|---|---|---|
dateTime | string | - | ISO 8601 date string |