Skip to content
Pinky UI

onboarding

Spotlight Tour

A skippable, focus-managed target tour with next, back and Escape paths.

  • onboarding
  • tour
  • focus

Quick usage

usage
import { SpotlightTour } from "@pinky-ui/systems";

<SpotlightTour steps={tourSteps} open={open} onOpenChange={setOpen} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for a short, skippable sequence that points to a few product targets.

Use when

A new workflow needs context that cannot be explained beside the target.

Avoid

Long forced tours, cursor-dependent behavior, or blocking the whole product indefinitely.

Accessibility

Manage dialog focus, provide Back/Next/Skip, support Escape, and scroll targets into view.

Keyboard and touch

All tour controls are buttons; the target need not be hovered or clicked.

Reduced motion and performance

Use a static spotlight and avoid per-frame position tracking.

Composition and anti-patterns

Use Coach Mark for one contextual hint and Progressive Disclosure for optional detail.

Open this skill on its own page