@kit-ng-ui/timeline

Vertical event timeline with ant-design feature parity. Supports data-driven [items] or projected <kit-timeline-item> children, four built-in colors plus custom CSS colors, optional icons, pending slot, reverse ordering, and left/right/alternate modes.

Install

pnpm add @kit-ng-ui/timeline

@use '@kit-ng-ui/timeline/styles';

Example

<kit-timeline [items]="events" />

<kit-timeline mode="alternate" pending="Recording…">
  <kit-timeline-item color="green">Created</kit-timeline-item>
  <kit-timeline-item color="red" icon="error">Build failed</kit-timeline-item>
  <kit-timeline-item color="#a855f7">Custom color</kit-timeline-item>
</kit-timeline>

API

<kit-timeline>

| Input | Type | Default | Description | | ------------- | ------------------------------------------ | -------- | ------------------------------------------ | | items | readonly KitTimelineItem[] \| null | null | Data-driven entries. | | mode | 'left' \| 'right' \| 'alternate' | 'left' | Layout for the head/tail. | | reverse | boolean | false | Reverse data order (newest first). | | pending | string \| null | null | Trailing pending entry text. | | pendingDot | string \| null | null | Icon for the pending row. |

<kit-timeline-item>

| Input | Type | Default | Description | | ---------- | ------------------------------------------ | -------- | ------------------------------------------ | | color | 'blue' \| 'red' \| 'green' \| 'gray' \| string | 'blue' | Named color, or any CSS color string. | | icon | string \| null | null | Icon name; replaces the default dot. | | label | string \| null | null | Secondary label above the content. | | position | 'left' \| 'right' \| null | null | Override for alternate mode. |