Tour
Step-by-step guided product tour with highlighted targets and popover explanations.
Examples
Step indicator
Multi-step tour with back/next navigation and a step counter.
With progress dots
Pill-shaped active dot expands to show current position.
Dismissible
Contextual tip that can be closed by the user.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Tour } from "@rokle/components";import { Tour } from "@rokle/components";
export function Example() {
return <Tour />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | TourStep[] | - | Ordered tour steps with target selector and content. |
| open | boolean | - | Whether the tour is active. |
| onComplete | () => void | - | Called when the last step is dismissed. |