> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/tour.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.

# Tour

Introduce features in a sequence of steps.

## Basic usage


### Your workspace

Create projectSettingsStart tour

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/tour/basic.tsx"
import { Button, Card, Space, Tour } from '@ifhover/leaf-ui';

import { useRef, useState } from 'react';

export function TourBasic() {
  const [open, setOpen] = useState(false),
    [current, setCurrent] = useState(0);
  const create = useRef<HTMLButtonElement>(null),
    settings = useRef<HTMLButtonElement>(null);
  return (
    <Card title={'Your workspace'}>
      <Space wrap>
        <Button ref={create}>{'Create project'}</Button>
        <Button ref={settings} variant="outline">
          {'Settings'}
        </Button>
        <Button
          variant="soft"
          onClick={() => {
            setCurrent(0);
            setOpen(true);
          }}
        >
          {'Start tour'}
        </Button>
      </Space>
      <Tour
        open={open}
        current={current}
        onChange={setCurrent}
        onClose={() => setOpen(false)}
        steps={[
          {
            key: 'create',
            title: 'Create your first project',
            description: 'Keep related tasks in one place.',
            target: () => create.current,
          },
          {
            key: 'settings',
            title: 'Make it yours',
            description: 'Adjust preferences in workspace settings.',
            target: () => settings.current,
          },
        ]}
      />
    </Card>
  );
}
```

Expand code

## Welcome step


Show welcome

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/tour/basic.tsx"
import { Button, Tour } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TourCentered() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        {'Show welcome'}
      </Button>
      <Tour
        open={open}
        onClose={() => setOpen(false)}
        steps={[
          {
            title: 'Welcome to Leaf',
            description: 'A step without a target is displayed in the center.',
          },
        ]}
      />
    </>
  );
}
```

Expand code

## TourStep

| Property      | Type                                                                                                         | Default | Description                                                 |
| ------------- | ------------------------------------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------- |
| `key`         | `string`                                                                                                     | —       | Stable, unique identifier.                                  |
| `title`       | `ReactNode`                                                                                                  | —       | Required. Title content.                                    |
| `description` | `ReactNode`                                                                                                  | —       | Additional description.                                     |
| `target`      | `string \| (() => HTMLElement \| null)`                                                                      | —       | Target selector or element getter; omit to center the step. |
| `placement`   | [`PopupOptions`](https://ifhover.github.io/leaf-ui/en/api/popup-options.md#popupoptions)`['popupPlacement']` | —       | Layout or display placement.                                |

## Tour API

| Property            | Type                                                                                                            | Default    | Description                                       |
| ------------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------- |
| `open`              | `boolean`                                                                                                       | —          | Required. Control whether the panel is open.      |
| `steps`             | `readonly `[`TourStep`](#tourstep)`[]`                                                                          | —          | Required. Steps in the guided tour.               |
| `current`           | `number`                                                                                                        | —          | Controlled current step index.                    |
| `defaultCurrent`    | `number`                                                                                                        | `0`        | Initial step index.                               |
| `onChange`          | `(current: number) => void`                                                                                     | —          | Called when the value changes.                    |
| `onClose`           | `() => void`                                                                                                    | —          | Called when closing is requested.                 |
| `onFinish`          | `() => void`                                                                                                    | —          | Called once on completion.                        |
| `missingTarget`     | `'center' \| 'skip' \| 'close'`                                                                                 | `'center'` | Center, skip or close when a target is missing.   |
| `mask`              | `boolean`                                                                                                       | `true`     | Show a tour mask.                                 |
| `padding`           | `number`                                                                                                        | `8`        | Padding for content or a highlighted target.      |
| `getPopupContainer` | [`PopupOptions`](https://ifhover.github.io/leaf-ui/en/api/popup-options.md#popupoptions)`['getPopupContainer']` | —          | Return a popup container, including a ShadowRoot. |

## Types and interaction

Import the props and data types when creating reusable configuration.

```ts
import type { TourStep, TourProps } from '@ifhover/leaf-ui';
```

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.