#Tour

A guided walk through the interface, for a feature the reader would not find on their own — configured with useTour({ steps }) and one rendered Tour. It owns how a step looks, not when the tour runs: deciding who sees it and how often is the application's job.

Source · Storybook

#Usage

import { Badge } from '@wallarm-org/design-system/Badge';
import { Button } from '@wallarm-org/design-system/Button';
import { Info } from '@wallarm-org/design-system/icons';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { Tour, type TourStepDetails, useTour } from '@wallarm-org/design-system/Tour';

#Examples

#Placement

Where a step sits relative to its target. Choose the side that leaves the target visible, since the target is the point.

#Beacon triggered

A beacon the reader opens themselves, which turns the tour from an interruption into an offer.

#Wait for interaction

A step that waits for the reader to act before advancing, for teaching by doing rather than by reading.

#Wait for input

The same, gated on input rather than a click — for a step where the reader has to type something real to continue.

#Props

#TourClose