Tour

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/tour.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/tour.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/tour.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/tour.json
    

Usage

      Copy
      <script setup lang="ts">
import { Tour, useTour } from "@/components/ui/tour";
</script>

<template>
  <Tour.Root :tour="tour">
    <!-- … -->
  </Tour.Root>
</template>
    

Composition

      Copy
      Tour.Root
├── Tour.ActionTrigger
├── Tour.Actions
├── Tour.ArrowTip
├── Tour.Arrow
├── Tour.Backdrop
├── Tour.CloseTrigger
├── Tour.Content
├── Tour.Context
├── Tour.Control
├── Tour.Description
├── Tour.Positioner
├── Tour.ProgressText
├── Tour.Spotlight
├── Tour.Title
    

Examples

Step Types

Demonstrate all three step types in a single tour: dialog for welcome/completion, tooltip anchored to elements, and floating for fixed-position content.

Progress

Display a visual progress indicator at the bottom of the tour content showing how far along the user is.

Skip

Allow users to skip the entire tour at any step by adding a skip action.

Keyboard Navigation

Enable arrow key navigation between tour steps using the keyboardNavigation prop.

Events

Listen to tour lifecycle events like onStepChange and onStatusChange to track user progress.

Wait for Click

Use the effect function with waitForEvent to wait for user interaction before proceeding to the next step.

Wait for Input

Create form tutorials that wait for users to enter valid input before advancing.

Wait for Element

Wait for dynamically rendered elements to appear in the DOM before showing a step.

Async

Load data asynchronously and update step content before displaying it using the effect function with show() and update().

API

See Ark UI Tour docs for full props and examples.