🌏 Translated with the assistance of DeepSeek and ChatGPT
Timeline
A component that displays a series of events or steps in chronological order.
Basic Usage
Use the theme prop of TimelineItem to set the theme color of a time point, and the color prop to customize it. Use the lineVariant prop to set the style of the connector line.
2026-01
Primary theme
Use the `theme` prop to set the theme color.
2026-03
Success theme
Different theme colors are available.
2026-06
Warning theme
Or use the `color` prop to set a custom color.
2026-09
Custom color
A custom color overrides the theme color.
2026-11
Dashed line
The `line-variant` prop controls the connector line style.
2026-12
Solid line
The last item does not draw a connector line.
Hide source code
Direction
Use the direction prop to set the arrangement direction of Timeline, supporting both vertical and horizontal orientations.
2026-01
Vertical
Arranged vertically by default.
2026-03
Vertical
Set the `direction` prop to `'horizontal'` to switch.
2026-01
Horizontal
Time points extend along the horizontal axis.
2026-03
Horizontal
Good for horizontal steps or flows.
2026-06
Horizontal
Content sits below the axis.
Hide source code
Content Placement
Use the contentPlacement prop to set the position of the content relative to the Timeline axis.
2026-01
Content on the right
Rendered when `contentPlacement` is `'end'`.
2026-03
Content on the right
In vertical mode, content sits to the right of the dot.
2026-01
Content on the left
Rendered when `contentPlacement` is `'start'`.
2026-03
Content on the left
In vertical mode, content sits to the left of the dot.
Hide source code
Size
Use the size prop to adjust the size of Timeline, available in both vertical and horizontal orientations.
2026-01
Medium size
The `size` prop is `'medium'`, good for regular content.
2026-03
Medium size
Dot, font, and spacing all use the default sizes.
2026-06
Large size
The `size` prop is `'large'`, good for emphasized timelines.
2026-09
Large size
Dot, font, and spacing all increase accordingly.
Hide source code
Mark
Set the mark prop on TimelineItem to display marker text beside the time point. The mark slot can be used to customize the marker content.
2026-01
Released
The `mark` prop shows marker text beside the time point.
⭐ 2026-03
Released
Markers are displayed on every item once any item has one.
2026-06
Released
The `mark` slot can customize the marker content.
Hide source code
Custom Node
Use the icon slot of TimelineItem to customize the content of the node at a time point.
2026-01
With icon
The `icon` slot replaces the default dot with an icon.
2026-03
With icon
Any icon from the icon library can be placed inside the slot.
2026-06
With icon
The icon inherits the theme color of the item.
Hide source code
Custom Content
TimelineItem provides the header, footer, and default slots for customizing the header, footer, and body content respectively.
2026-01
First release
Initial version published 🎉
2026-03
Feature update
Added custom dot, mark and slot support.
2026-06
Major release
Rewrote the rendering engine with better performance.
Hide source code
API
TimelineProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| direction | 'horizontal' | 'vertical' | True | 'vertical' | The arrangement direction of Timeline. | 0.2.0 |
| contentPlacement | 'start' | 'end' | True | 'end' | The position of the Timeline content relative to the axis. | 0.2.0 |
| size | 'medium' | 'large' | True | 'medium' | The size of Timeline. | 0.2.0 |
| pollSizeChange | boolean | True | false | Whether to poll for size changes of Timeline. | 0.2.0 |
| smooth | boolean | True | false | Whether the Timeline nodes are drawn smoothly. | 0.2.0 |
| contentSpan | number | ValueWithDeviceWidth<number> | True | 70 | The proportion (0-100) of the content area within the combined mark and content width, supports responsive values. | 0.2.0 |
TimelineSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The content of Timeline, used to place TimelineItem. | 0.2.0 |
TimelineItemProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| color | string | True | | Custom color of the TimelineItem node. | 0.2.0 |
| content | string | True | | The body content of TimelineItem. | 0.2.0 |
| footer | string | True | | The footer content of TimelineItem. | 0.2.0 |
| lineVariant | 'solid' | 'dashed' | True | 'solid' | The style of the TimelineItem connector line. | 0.2.0 |
| mark | string | True | | The marker text of TimelineItem. | 0.2.0 |
| title | string | True | | The title of TimelineItem. | 0.2.0 |
| theme | 'primary' | 'notice' | 'success' | 'info' | 'warning' | 'danger' | 'sakura' | True | 'primary' | The theme color of TimelineItem. | 0.2.0 |
TimelineItemSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The body content of TimelineItem. | 0.2.0 |
| icon | | The icon at the node of TimelineItem. | 0.2.0 |
| mark | | The marker content of TimelineItem. | 0.2.0 |
| footer | | The footer content of TimelineItem. | 0.2.0 |
| header | | The header content of TimelineItem. | 0.2.0 |
ValueWithDeviceWidth
ts
enum SCREEN_SIZE_TYPE {
XS = 'xs',
SM = 'sm',
MD = 'md',
LG = 'lg',
XL = 'xl',
XXL = 'xxl'
}
type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>