@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/core @styloviz/icons @styloviz/timeline

Requires @angular/core and @angular/common >= 21. Also needs @styloviz/core, @styloviz/icons — listed above so no extra step is required on npm (on pnpm/yarn, list them yourself). 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 | readonly 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'. | | loading | boolean | false | True while the first page of events is being fetched. Replaces the timeline with a placeholder. For an additional page use loadingOlder or loadingNewer, which keep the events already on screen. | | error | SvDataError \| string \| null | null | Load failure. Use toSvDataError() from | |emptyMessage|string|'No events to show'| Copy for the empty state. | |hasOlder|boolean|false| Older events exist further back in history. | |loadingOlder|boolean|false| True while the previous page of history is being fetched. | |hasNewer|boolean|false| Newer events exist — for a feed that is still being written to. | |loadingNewer|boolean|false| True while newer events are being fetched. | |selectedId|string | number | null (two-way)|null| Currently selected item id (two-way). Use[(selectedId)]withdisplayMode="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. | | loadMore | TimelineLoadMoreEvent | The user asked for another page. direction says which end: 'older' for history below, 'newer' for a feed that has moved on above. | | retry | void | The host should re-run the failed load. |

Documentation

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

License

MIT