antuikit's Tour is Ant Design's Tour, installed into your project as a file you own. It adds no props, so the API table below matches Ant Design's. Its close icon follows the installed icon pack.
Install
npx antuikit@latest init
npx antuikit@latest add tour
The first command installs AntuikitProvider and the theme, and the second adds Tour.
Import
From @/components/ui/tour, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Tour } from "@/components/ui/tour"
The axes
Two props are enumerated, and only one of them is a style decision.
type takes default and primary. primary inverts the whole card onto colorPrimary: light solid ink, a white Next button with primary-colored text, and the arrow tinted to match. Pick one per tour, because a type that changes mid-tour reads as a bug rather than as emphasis.
placement takes thirteen values: top, bottom, left and right, each with its two aligned variants, plus center. It defaults to bottom when the step has a target and to center when it does not, and a step's own value beats the Tour's. autoAdjustOverflow is on, so a card that will not fit flips to the opposite side by itself.
There is no size axis. The card is sized by its own content.
Flags
Tour's own booleans are few, and several of them turn off more than their name suggests.
mask (true): the dimmed overlay with the target punched out of it. false leaves the card alone on the page, and an object retints it rather than removing it.
keyboard (true): Escape closes the tour and ArrowLeft / ArrowRight walk it. false removes both at once.
closable (true): the close button. false removes the button and the Escape key with it, which leaves a tour the reader cannot leave.
disabledInteraction (false): makes the mask swallow pointer events over the cut-out too, so the highlighted control cannot be used mid-step.
arrow (true): the pointer from the card to the target. A step with no target draws none whatever this says.
animated (true): whether the cut-out slides between steps. Setting it here does not turn the slide off. Set the theme's motion to false instead.
open and defaultOpen: controlled and uncontrolled visibility. With neither, Tour treats itself as open and starts the moment it mounts.
Slots
The props that take a node. On Tour most of them live on a step rather than on the Tour, so look in the TourStep table.
title and description, on a step: the card's whole content, and the only thing naming it.
cover, on a step: an image or an illustration above the title.
closeIcon: the icon inside the close button. AntuikitProvider already supplies one from the installed icon pack, and a step's own still wins.
indicatorsRender(current, total) replaces the row of dots. Past about four steps, “3 of 7” beats counting them.
actionsRender(originNode, info) replaces the button row and hands you the default buttons, so adding a Skip is an addition rather than a rebuild.
renderPanel replaces the whole card, including its parts, locale text and indicators. Reach for it last.
Events
onChange
onClose
onFinish
Styling
classNames and styles take the same keys, one per part. The card is a portal, so a descendant selector on the page does not reach it and these keys are the way in.
1
<Tour
2
classNames={{
3
root: "…",
4
cover: "…",
5
close: "…",
6
mask: "…",
7
section: "…",
8
footer: "…",
9
actions: "…",
10
indicator: "…",
11
indicators: "…",
12
header: "…",
13
title: "…",
14
description: "…",
15
}}
16
/>
A Tailwind class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so style the part instead.