@styloviz/product-tour

8 onboarding variants: modal (free) plus slideshow, tooltip, spotlight, beacon, checklist, progress steps and announcement (Pro). Portal-based overlay with keyboard navigation.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/product-tour

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvProductTourComponent } from '@styloviz/product-tour';

@Component({
  standalone: true,
  imports: [SvProductTourComponent],
  template: `
    <sv-product-tour [steps]="steps" [active]="touring" (complete)="finish()" (skip)="finish()" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | steps | TourStep[] | [] | Step definitions. | | variant | TourVariant | 'modal' | Visual variant. Free tier supports 'modal' only. | | active | boolean (two-way) | false | Two-way: controls tour visibility. Set to true to launch the tour. | | stepIndex | number (two-way) | 0 | Two-way: current step index. | | nextLabel | string | 'Next' | — | | prevLabel | string | 'Back' | — | | skipLabel | string | 'Skip tour' | — | | doneLabel | string | 'Done' | — | | allowSkip | boolean | true | Show the skip / close controls. | | showStepCount | boolean | true | Show the "step X of N" counter. | | showProgress | boolean | true | Show the dot progress indicator. |

Outputs

| Output | Type | Description | | --- | --- | --- | | stepChange | number | Fires with the new step index whenever navigation occurs. | | complete | void | Fires when the last step is confirmed (Next on final step). | | skip | void | Fires when the user explicitly skips the tour. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/product-tour

License

MIT