# antuikit / Tour

> Tour. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/tour

## Install

npx antuikit@latest init
npx antuikit@latest add tour

## Import

import { Tour, type TourProps } from "@/components/ui/tour";

## Demos

- [Basic](https://ui.antuikit.com/embed/tour/basic.md): Pass `steps`, each with a `title`, `description`, `target` and an optional `cover` image, and open the tour with `open`.
- [Primary type](https://ui.antuikit.com/embed/tour/type-primary.md): Set `type` to `"primary"` to fill the step card with the primary color, so it stands out on a busy page.
- [Placement](https://ui.antuikit.com/embed/tour/placement.md): Set `placement` on a step to put its card on one side of the target, or leave out `target` to center the step on screen.
- [Mask style](https://ui.antuikit.com/embed/tour/mask-style.md): Pass `mask` a `style` and `color` to restyle the overlay, and set `mask` on a step to override it or `false` to hide it there.
- [Non-modal](https://ui.antuikit.com/embed/tour/non-modal.md): Set `mask` to `false` to drop the overlay and keep the page usable, so a reader can fill in the form while the tour points at it.
- [Indicators](https://ui.antuikit.com/embed/tour/indicators.md): Pass `indicatorsRender` to replace the step dots, here with a count like 2 / 5 that stays readable on a longer tour.
- [Custom actions](https://ui.antuikit.com/embed/tour/actions-render.md): Pass `actionsRender` to change the buttons in the card footer, here adding a Skip button to every step but the last.
- [Spotlight gap](https://ui.antuikit.com/embed/tour/gap.md): Set `gap.offset` and `gap.radius` to change the padding and the corner radius of the spotlight around the target.
- [classNames and styles](https://ui.antuikit.com/embed/tour/semantic-slots.md): Pass `classNames` or `styles` to style one part of the tour, like `section` for the card, `mask`, `close` or `indicator`.
- [Dashboard onboarding](https://ui.antuikit.com/embed/tour/dashboard-onboarding.md): A dashboard walkthrough that opens with a centered welcome, spotlights each metric card in turn and ends on the invite button.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tour`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Tour` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.