Timeline
@xui/timelineA vertical timeline of events — colored dots on a connecting axis with projected content and optional labels. Place the axis on the left or right.
Install
pnpm add @xui/timeline Add the barrel to a standalone component's imports:
import { XuiTimelineImports } from '@xui/timeline';
@Component({
imports: [XuiTimelineImports],
// …
})Examples
Basic
Loading preview…
<xui-timeline class="w-[360px]">
<xui-timeline-item color="success" label="2026-07-20 09:00">Order created</xui-timeline-item>
<xui-timeline-item color="primary" label="2026-07-20 12:30">Payment confirmed</xui-timeline-item>
<xui-timeline-item color="warning" label="2026-07-21">Awaiting shipment</xui-timeline-item>
<xui-timeline-item color="muted">Delivered</xui-timeline-item>
</xui-timeline>Right axis
Loading preview…
<xui-timeline mode="right" class="w-[360px]">
<xui-timeline-item color="primary">Design</xui-timeline-item>
<xui-timeline-item color="primary">Build</xui-timeline-item>
<xui-timeline-item color="error">Blocked on review</xui-timeline-item>
<xui-timeline-item color="success">Shipped</xui-timeline-item>
</xui-timeline>API
One entry on a {@link XuiTimeline}: a colored dot on the axis and projected content beside it, with an optional label.
Inputs
colorXuiTimelineColorIntent colour of the item's dot — how this event reads at a glance.this.config.colorlabelstringSmall text above the item's content, usually the timestamp.''A vertical timeline. Wrap <xui-timeline-item> entries; each renders a colored dot on a connecting axis with its projected content beside it. mode places the axis on the left (default) or right.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''modeXuiTimelineModeWhich side of the rail the content sits on.this.config.mode