Timeline

Usage

STimeline renders an ordered sequence of events. It is display-only; use Stepper when people need to navigate or advance through a workflow.

<script setup lang="ts">
const items = [
  { id: 'created', date: '9:15 AM', title: 'Request created', description: 'A new request was submitted.' },
  { id: 'approved', date: '10:30 AM', title: 'Approved', color: 'success' },
]
</script>

<template>
  <STimeline :items="items" />
</template>

Each item can provide a stable id, a display date, an ISO datetime, a title, a description, an icon, a semantic color, and a custom slot name. Caller order is preserved. Dates are displayed as supplied so the component does not assume a locale or time zone.

Set icon to any registered icon name to replace the solid dot with a larger outlined marker. A per-item color changes that marker's accent:

<STimeline :items="[
  { date: '9:15 AM', title: 'Request submitted', icon: 'hugeicons:file-01' },
  { date: '10:30 AM', title: 'Review completed', icon: 'hugeicons:checkmark-circle-01', color: 'success' },
]" />

Orientation and alignment

The default is a vertical feed aligned to the start. align accepts start, end, or alternate; the same choices place horizontal content below, above, or alternately around the marker line.

<STimeline :items="milestones" orientation="horizontal" align="alternate" />

Custom content

Use #marker, #date, #title, and #description to replace individual parts, or #content to build each event body. A #item slot replaces all default content for every event. An item's slot field can choose a named slot for just that event. Scoped slots receive { item, index }, including any custom fields supplied in the item data.

<STimeline :items="activity" align="alternate">
  <template #marker="{ item }">
    <SAvatar :name="item.actor" :text="item.initials" size="sm" />
  </template>
  <template #content="{ item }">
    <strong>{{ item.title }}</strong>
    <SBadge :label="item.action" :color="item.color" variant="soft" />
  </template>
</STimeline>

The marker and connector remain decorative; put links and buttons in the content slots so they keep their native interaction and accessibility.

Styling

size accepts sm, md, or lg; color sets the default marker color and each item can override it. ui can override root, item, track, marker, icon, connector, content, date, title, and description. An item may also provide its own class and partial ui overrides. The theme can be configured globally under ui.timeline.

Props

TimelineItem supports id, date, datetime, title, description, icon, color, slot, class, per-item ui, and custom application data.

Slots