> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/timeline.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Timeline

Present events and progress in sequence.

## Basic usage


1. 09:00

Project created
1. 10:30

Review complete
1. 12:00

Published

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/timeline/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' },
      ]}
    />
  );
}
```

Expand code

## More examples


1. 2026-10-01

Requirements approved
1. 2026-10-03

Design started
1. Waiting for the next step

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/timeline/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' },
      ]}
    />
  );
}
```

Expand code

## 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.

```ts
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[]`](#timelineitem-api) | 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                    |