Guided Tour

Beta

Get Ritla UI

Short steps that point at parts of the screen and explain them, with the part spotlit and the rest dimmed.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add guided-tour
Also works with shadcn: npx shadcn@latest add @ritla/guided-tour
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

guided-tour.tsx

import { GuidedTour } from "@/components/ui/guided-tour";<GuidedTour open={open} onOpenChange={setOpen} steps={[{ target: balanceRef, title: "Your balance", description: "See all your accounts in one place." }]} />

API reference

GuidedTour

Prop	Type	Default	Description
`steps`	`TourStepData[]`	None	Each step: `target` (an element ref), `title`, `description` and `shape`.
`open / onOpenChange`	`boolean / (open) => void`	None	The tour's state.
`labels`	`TourLabels`	None	The counter and buttons in the page's language.

TourStep

Prop	Type	Default	Description
`placement`	`"top" \| "bottom"`	`"bottom"`	Figma's Placement.
`arrow`	`"start" \| "center" \| "end"`	`"center"`	Figma's Arrow.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Escape`	Closes the tour at any step.
`Tab`	Moves through the step's buttons.

ARIA

Each step is a non-modal dialog named by its title, and focus moves to it.
Keep it to four steps or fewer, and show it once.

Arabic and RTL notes

Mirrors

Buttons and dots follow the page direction.

Does not mirror

The spotlight follows the element's place on screen.

Numerals: The counter as labels gives it.
Arabic typography: Title body-16 Semibold, text body-14.