@styloviz/timeline

9 premium variations: horizontal, alternate zigzag, numbered stepper, check stepper, activity feed, status tracker, rich card, date-grouped and interactive (clickable rows).

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/timeline

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvTimelineComponent } from '@styloviz/timeline';

@Component({
  standalone: true,
  imports: [SvTimelineComponent],
  template: `
    <sv-timeline [items]="events" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | items | TimelineItem[] | [] | Array of timeline events to render. | | layout | TimelineLayout | 'left' | Structural layout direction. | | size | TimelineSize | 'md' | Component size preset. | | showConnector | boolean | true | Show connector lines between dots. | | customClass | string | '' | Additional CSS classes on the root element. | | dotStyle | TimelineDotStyle | 'dot' | Dot rendering style. | | displayMode | TimelineDisplayMode | 'default' | Content display mode. | | activeIndex | number | -1 | Zero-based index of the currently active step. Items before → complete; this item → active; after → pending. Defaults to -1 (uses each item's own itemStatus). | | groupByDate | boolean | false | Auto-group items under date header separators using their groupDate field. | | horizontalAlign | TimelineHorizontalAlign | 'alternate' | Content placement for layout='horizontal'. | | selectedId | string \| number \| null (two-way) | null | Currently selected item id (two-way). Use [(selectedId)] with displayMode="interactive" for a selectable timeline. |

Outputs

| Output | Type | Description | | --- | --- | --- | | itemClick | TimelineItem | Emitted when an interactive row is activated (click / Enter / Space). Only fires when displayMode='interactive'. | | actionClick | TimelineItem | Emitted when a rich-card CTA button is activated. Fires alongside any actionUrl navigation so you can handle the action in code. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/timeline

License

MIT