Timeline

Timeline is a flexible family of components for displaying events, steps, or progress in a vertical or horizontal layout. It supports boxed labels, icons, compact mode, snapping, and full slot-based composition for content, icons, and labels.

Basic Usage

Vertical

1984
First Macintosh computer
1998
iMac
2001
iPod
2007
iPod
2007
iPhone
2015
Apple Watch

Code Example

Basic.vue

Components

The Timeline components include the following:

Timeline - The root wrapper. Its props control layout and appearance.
TimelineItem - Represents an event or step in the timeline.
TimelineStart - Wrapper for the timeline start label.
TimelineMiddle - Wrapper for the timeline icon or marker.
TimelineEnd - Wrapper for the timeline end label.
TimelineLine - Horizontal or vertical line between timeline items, with color options.

Timeline

The Timeline component is the root wrapper. Its props control the layout, orientation, compactness, and icon snapping.

Timeline Props	Type	Description
vertical	boolean	Enables vertical timeline layout.
horizontal	boolean	Enables horizontal timeline layout.
compact	boolean	Reduces spacing for a more compact timeline.
snapIcon	boolean	Enables icon snapping for each timeline item.
class	string	Additional classes for the root element.

Timeline Slots	Description
default	The default slot. Must contain one or more `TimelineItem` components as children.

TimelineItem

The TimelineItem component represents a single event or step in the timeline. It provides named slots for start, middle, end, and optional horizontal rules.

TimelineItem Props	Type	Description
hr	boolean	Adds a horizontal rule above and below the item (can be overridden via slots).
class	string	Additional classes for the item.

TimelineItem Slots	Description
start	Content for the start label (usually a date or step label).
middle	Content for the timeline icon or marker.
end	Content for the end label or description.
hr-top	Slot for customizing the horizontal rule above the item.
hr-bottom	Slot for customizing the horizontal rule below the item.

TimelineStart

The TimelineStart component wraps the start label (often a date or step name) and supports boxed styling.

TimelineStart Props	Type	Description
box	boolean	Applies the `timeline-box` class for boxed styling.
class	string	Additional classes for the start label.

TimelineStart Slots	Description
default	The label or content to display at the start.

TimelineMiddle

The TimelineMiddle component wraps the icon or marker for the timeline item.

TimelineMiddle Props	Type	Description
class	string	Additional classes for the middle marker.

TimelineMiddle Slots	Description
default	The icon or marker content.

TimelineEnd

The TimelineEnd component wraps the end label (often a description or event name) and supports boxed styling.

TimelineEnd Props	Type	Description
box	boolean	Applies the `timeline-box` class for boxed styling.
class	string	Additional classes for the end label.

TimelineEnd Slots	Description
default	The label or content to display at the end.

TimelineLine

The TimelineLine component renders an <hr> between timeline items. It supports semantic color props or a color prop for customizing the line color.

TimelineLine Props	Type	Description
color	string	Semantic color for the line. One of `neutral`, `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `error`.
neutral	boolean	Applies the neutral color to the line.
primary	boolean	Applies the primary color to the line.
secondary	boolean	Applies the secondary color to the line.
accent	boolean	Applies the accent color to the line.
info	boolean	Applies the info color to the line.
success	boolean	Applies the success color to the line.
warning	boolean	Applies the warning color to the line.
error	boolean	Applies the error color to the line.