Component
Tour
Guides users through the UI by spotlighting targets with a step card.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/tourExamples
Live previews render through the docs app's PandaCSS codegen.
<TaskTourDemo />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `steps` | `readonly TourStep[]` | Yes | - | - |
| `open` | `boolean` | Yes | - | - |
| `onOpenChange` | `(open: boolean) => void` | Yes | - | - |
| `step` | `number` | No | - | Active step index (controlled); uncontrolled when omitted. |
| `onStepChange` | `(step: number) => void` | No | - | - |
| `arrow` | `boolean` | No | - | Point an arrow from the step card at the spotlit target. Defaults to \`true\`. |
| `nextLabel` | `string` | No | - | - |
| `previousLabel` | `string` | No | - | - |
| `skipLabel` | `string` | No | - | - |
| `doneLabel` | `string` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/tour.json`
- Recipe: `tour`
- Files: `src/components/ui/tour.tsx`