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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/tour.md.
Leaf UIReact components
GitHub

Tour

Introduce features in a sequence of steps.

Basic usage

Your workspace

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>
  );
}

Welcome step

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.',
          },
        ]}
      />
    </>
  );
}

TourStep

PropertyTypeDefaultDescription
keystring—Stable, unique identifier.
titleReactNode—Required. Title content.
descriptionReactNode—Additional description.
targetstring | (() => HTMLElement | null)—Target selector or element getter; omit to center the step.
placementPopupOptions['popupPlacement']—Layout or display placement.

Tour API

PropertyTypeDefaultDescription
openboolean—Required. Control whether the panel is open.
stepsreadonly TourStep[]—Required. Steps in the guided tour.
currentnumber—Controlled current step index.
defaultCurrentnumber0Initial 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.
maskbooleantrueShow a tour mask.
paddingnumber8Padding for content or a highlighted target.
getPopupContainerPopupOptions['getPopupContainer']—Return a popup container, including a ShadowRoot.

Types and interaction

Import the props and data types when creating reusable configuration.

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.