Tour

A guided walk that dims the page, rings one element per step and explains it in a bubble beside it. Use it once after sign-up or from a Help menu; steps whose element is missing are skipped and not counted.

Tour
TourStep

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Tour

Dark theme, Tour

High contrast theme, Tour

UsageLink to the section Usage

tsx

import { Tour, TourStep } from '@skribly/ui/onboarding'

tsx

<Tour isOpen={open} onOpenChange={setOpen}
  stepLabel={(n, total) => `Step ${n} of ${total}`}
  nextLabel="Next" backLabel="Back" finishLabel="Done" closeLabel="Close the guide">
  <TourStep title="A quick look around">Four stops, about a minute.</TourStep>
  <TourStep target="search" title="Search everything">Finds views and actions.</TourStep>
</Tour>
<IconButton data-tour="search" label="Search">…</IconButton>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The bubble is a modal dialog named by the step title and described by its text: the page behind is inert for screen readers and the pointer, and Tab stays in the bubble.
Focus moves to Next on every step.
Arrow keys step, Escape closes and focus goes back to what opened it.
Each step is announced in a polite live region.
On screens under 640px the bubble docks at the bottom; motion stops under reduced motion.

This demo runs through axe in all three themes on every test run. See what the tests check.