build69
build69  /  Components  /  Overlays  /  Tour

Tour

v1.0.17Updated 20 Oct 2026

Product tour / spotlight overlay. Dims the page with an SVG-masked scrim, cuts a rounded spotlight over each step's target, and shows a card with next / back / skip / finish controls and step dots.

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedtouronboardingspotlightwalkthrough+3

The default, out-of-the-box Tour.

Recommended for+14
  • ✓First-run onboarding walkthroughs
  • ✓Announcing new features in place
  • ✓Guided setup over real UI
Tags+6
touronboardingspotlightwalkthroughcoachmarkoverlaydefault
Features+4
  • SVG mask scrim with rounded spotlight cutout
  • Targets by CSS selector or React ref
  • Scrolls target into view (reduced-motion aware)
  • Collision-aware placement (top / bottom / left / right, auto flip + viewport clamp)
  • Repositions on resize / scroll / target resize
  • Next / back / skip / finish + clickable step dots
  • Focus trap; Arrow / Home / End / Escape keys
  • aria-live step announcements, dialog semantics
  • Controlled or uncontrolled open + stepIndex
  • Localizable labels (e.g. Thai UI)
  • Centered-card fallback when a target is missing
Not recommended for−2
  • ✕Blocking confirmations (use Dialog)
  • ✕A single contextual hint (use Tooltip or Popover)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Tour" })

Usage

import { Tour, type TourStep } from '@/components/overlays/tour';

const steps: TourStep[] = [
  { target: '#create-invoice', title: 'Create your first invoice', content: 'Issue a full tax invoice from here.', placement: 'bottom' },
  { target: '#sales-card', title: 'Track daily sales', content: 'Updated in real time across channels.', placement: 'right' },
];

<Tour steps={steps} open={open} onOpenChange={setOpen} onFinish={markOnboarded} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
steps

Ordered steps: { target: selector | ref, title, content, placement? }

TourStep[]yes
open

Controlled open state (defaultOpen for uncontrolled)

boolean—
stepIndex

Controlled active step (defaultStepIndex for uncontrolled)

number—
onStepChange

Active step callback

(index: number) => void—
onClose

Dismissed early (Esc / skip / close button)

() => void—
onFinish

User completed the final step

() => void—
tone

Accent tone for the primary action and active dot

'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'—
size

Card width

'sm' | 'md' | 'lg'—
labels

Localized button / progress labels (e.g. Thai)

Partial<TourLabels>—
spotlightPadding

Extra px around the spotlight cutout

number—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files