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

  • 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.

Examples

Bottom Side Only

  • First Macintosh computer


  • iMac


  • iPod


  • iPhone


  • Apple Watch
Code Example
BottomSideOnly.vue

Top Side Only

  • First Macintosh computer


  • iMac


  • iPod


  • iPhone


  • Apple Watch
Code Example
TopSideOnly.vue

Different Sides

  • First Macintosh computer
    iMac


  • iMac


  • iPod
    iPhone


  • Apple Watch
    iPhone


  • Apple Watch
    iPhone
Code Example
DifferentSides.vue

Colorful Lines

  • First Macintosh computer
    iMac


  • iMac


  • iPod


  • iPhone


  • Apple Watch
    iPhone
Code Example
ColorfulLines.vue

Without Icons

  • First Macintosh computer


  • iMac


  • iPod


  • iPhone


  • Apple Watch
Code Example
WithoutIcons.vue