import { Component } from '@angular/core';
import { WrTimeline, WrTimelineItem } from 'ngwr/timeline';
@Component({ imports: [WrTimeline, WrTimelineItem] })
export class MyComponent {}Timeline
A list of events in order, vertical or horizontal.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Vertical
<wr-timeline>
<wr-timeline-item title="Created" time="2026-05-01">Initial commit.</wr-timeline-item>
<wr-timeline-item title="Archived" time="2026-05-02" color="neutral">Branch deleted.</wr-timeline-item>
<wr-timeline-item title="Deployed" time="2026-05-03" color="success">Live.</wr-timeline-item>
</wr-timeline>Horizontal
<wr-timeline orientation="horizontal">
<wr-timeline-item title="Plan" time="Q1">Scope agreed.</wr-timeline-item>
<wr-timeline-item title="Ship" time="Q3" color="success">Released.</wr-timeline-item>
</wr-timeline>API
<wr-timeline> inputs.
| Name | Description | Type | Default |
|---|---|---|---|
orientation | Layout direction. | 'vertical' | 'horizontal' | 'vertical' |
Item API
<wr-timeline-item> inputs.
| Name | Description | Type | Default |
|---|---|---|---|
title | Bold event title. | string | '' |
time | Muted timestamp shown above the title. | string | '' |
color | Dot colour; each has its own shape too. neutral is a hollow ring. | 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'primary' |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/timeline's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-timeline-font-family | var(--wr-font-family-base) | .wr-timeline |
--wr-timeline-gap | var(--wr-space-xl) | .wr-timeline +1 variant override |
--wr-timeline-item-body-margin-top | var(--wr-space-sm) | .wr-timeline-item |
--wr-timeline-item-connector | var(--wr-border-base) | .wr-timeline-item |
--wr-timeline-item-content-font-size | var(--wr-text-sm) | .wr-timeline-item__content |
--wr-timeline-item-content-line-height | var(--wr-leading-relaxed) | .wr-timeline-item__content |
--wr-timeline-item-content-margin-top | var(--wr-space-xs) | .wr-timeline-item__content |
--wr-timeline-item-gap | var(--wr-space-md) | .wr-timeline-item |
--wr-timeline-item-padding-bottom | var(--wr-space-sm) | .wr-timeline-item |
--wr-timeline-item-time-font-size | var(--wr-text-xs) | .wr-timeline-item__time |
--wr-timeline-item-time-font-weight | var(--wr-font-weight-medium) | .wr-timeline-item__time |
--wr-timeline-item-time-line-height | var(--wr-text-xs-leading) | .wr-timeline-item__time |
--wr-timeline-item-time-margin-bottom | var(--wr-space-xs) | .wr-timeline-item__time |
--wr-timeline-item-title-font-size | var(--wr-text-sm) | .wr-timeline-item__title |
--wr-timeline-item-title-font-weight | var(--wr-font-weight-semibold) | .wr-timeline-item__title |
--wr-timeline-item-title-line-height | var(--wr-leading-snug) | .wr-timeline-item__title |