Tour

Introduce features in a sequence of steps.

Basic usage

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="ghost"
          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

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['popupPlacement']`	—	Layout or display placement.

Tour API

Property	Type	Default	Description
`open`	`boolean`	—	Required. Control whether the panel is open.
`steps`	`readonly 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['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.

#Tour

#Basic usage

Your workspace

#Welcome step

#TourStep