Timeline

Present events and progress in sequence.

Basic usage

09:00
Project created
10:30
Review complete
12:00
Published

basic.tsx

import { Timeline } from '@ifhover/leaf-ui';

export function TimelineBasic() {
  return (
    <Timeline
      items={[
        { key: 'create', label: '09:00', children: 'Project created', color: 'success' },
        { key: 'review', label: '10:30', children: 'Review complete' },
        { key: 'release', label: '12:00', children: 'Published', color: 'info' },
      ]}
    />
  );
}

More examples

2026-10-01
Requirements approved
2026-10-03
Design started
Waiting for the next step

advanced.tsx

import { Timeline } from '@ifhover/leaf-ui';

export function TimelineAlternate() {
  return (
    <Timeline
      mode="alternate"
      pending="Waiting for the next step"
      items={[
        { key: 'one', label: '2026-10-01', children: 'Requirements approved' },
        { key: 'two', label: '2026-10-03', children: 'Design started', color: 'warning' },
      ]}
    />
  );
}

Usage

items presents events with individual colors and icons. mode controls alignment, reverse flips the order, and pending indicates an event is still in progress.

Types

Import these types for data, callbacks and refs.

import type { TimelineItem, TimelineProps } from '@ifhover/leaf-ui';

TimelineItem API

Property	Type	Default	Description
`key`	`string`	Required	Unique stable identifier
`label`	`ReactNode`	—	Display label
`children`	`ReactNode`	Required	Content or child items
`dot`	`ReactNode`	—	Custom timeline dot
`color`	`'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| (string & {})`	—	Color

TimelineProps API

Property	Type	Default	Description
`items`	`readonly TimelineItem[]`	Required	Items; keep keys unique and stable
`mode`	`'left' \| 'right' \| 'alternate'`	`'left'`	Display mode or allowed characters
`reverse`	`boolean`	`false`	Reverse order
`pending`	`ReactNode`	—	Pending content

#Timeline

#Basic usage

#More examples

#Usage

#Types

#TimelineItem API