### Install Tour Component using npm

Source: https://github.com/tonghohin/tour/blob/main/content/docs/(root)/index.mdx

Installs the Tour component into your project using the shadcn/ui CLI. Ensure shadcn/ui is already set up in your project before running this command.

```bash
npx shadcn@latest add @tour/tour
```

--------------------------------

### Set up TourProvider in RootLayout

Source: https://github.com/tonghohin/tour/blob/main/content/docs/(root)/index.mdx

Wraps your application with the TourProvider to enable tour functionality. This component requires the 'Tour' type and accepts an array of 'tours' as a prop, defining the structure and content of your onboarding flows.

```tsx
import { type Tour, TourProvider } from "@/components/ui/tour"

const tours = [
    {
        id: "main",
        steps: [
            {
                id: "welcome",
                title: "Welcome",
                content: "Let's take a quick tour of the main features.",
            },
            {
                id: "feature-1",
                title: "Feature One",
                content: "This is an important feature.",
            },
        ],
    },
] satisfies Tour[]

export default function RootLayout() {
    return <TourProvider tours={tours}>{/* Your app content */}</TourProvider>
}
```

--------------------------------

### Start Tour using useTour Hook

Source: https://github.com/tonghohin/tour/blob/main/content/docs/(root)/index.mdx

Demonstrates how to use the 'useTour' hook to initiate a tour from a button click. This hook provides access to tour control functions, such as 'start', which takes the tour's ID as an argument.

```tsx
"use client"

import { Button } from "@/components/ui/button"
import { useTour } from "@/components/ui/tour"

export function StartTourButton() {
    const tour = useTour()

    return <Button onClick={() => tour.start("main")}>Start Tour</Button>
}
```

--------------------------------

### TourProvider Component Setup in React

Source: https://context7.com/tonghohin/tour/llms.txt

Sets up the `TourProvider` to manage tour context and state. It accepts an array of tour configurations, each with a unique ID and a sequence of steps. This component should wrap your application to enable tour functionality.

```tsx
import { type Tour, TourProvider } from "@/components/ui/tour"

const tours = [
    {
        id: "main",
        steps: [
            {
                id: "welcome",
                title: "Welcome",
                content: "Let's take a quick tour of the main features.",
            },
            {
                id: "feature-1",
                title: "Feature One",
                content: "This is an important feature you should know about.",
            },
            {
                id: "settings",
                title: "Settings",
                content: "Configure your preferences here.",
            },
        ],
    },
] satisfies Tour[]

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <TourProvider tours={tours}>
            {children}
        </TourProvider>
    )
}
```

--------------------------------

### Define Tour Configurations in Next.js

Source: https://context7.com/tonghohin/tour/llms.txt

Create a configuration file to define tour steps, including identifiers, content, and routing logic. This setup uses the Tour type definition to ensure type safety for onboarding sequences.

```tsx
import { type Tour } from "@/components/ui/tour"
import { ArrowUpRightIcon } from "lucide-react"

export const tours = [
    {
        id: "main",
        steps: [
            {
                id: "tour-header",
                title: "Welcome",
                content: "Tour is a component for building onboarding tours. Designed to integrate with shadcn/ui.",
                nextRoute: "/docs",
            },
            {
                id: "tour-nav",
                title: "Customization",
                content: "Easily adjust the popup's position and appearance.",
                side: "bottom",
                align: "start",
                className: "rounded-none",
                previousRoute: "/",
                nextRoute: "/",
            },
            {
                id: "tour-github",
                title: "Multiple Elements",
                content: "You can highlight several elements in a single step—just assign them the same ID.",
                align: "end",
                previousRoute: "/docs",
            },
            {
                id: "tour-end",
                title: "Multipage Tour",
                content: "As you've already seen, multipage tours are supported and easy to implement.",
                nextRoute: "/docs",
                nextLabel: (
                    <>
                        View Docs <ArrowUpRightIcon className="ml-1 h-4 w-4" />
                    </>
                ),
            },
        ],
    },
] satisfies Tour[]
```

--------------------------------

### Target Elements for Tour Steps

Source: https://github.com/tonghohin/tour/blob/main/content/docs/(root)/index.mdx

Illustrates how to associate HTML elements with specific tour steps using the 'data-tour-step-id' attribute. This attribute can accept a single ID or an array of IDs, allowing an element to be part of multiple steps.

```html
<div data-tour-step-id="welcome">
    <h1>Welcome to My App</h1>
</div>

<div data-tour-step-id="feature-1">
    <p>This is a feature</p>
</div>

<div data-tour-step-id={["welcome", "feature-1"]}>
    <p>This element appears in both steps</p>
</div>
```

--------------------------------

### Initiate Tours with Buttons (React/TypeScript)

Source: https://context7.com/tonghohin/tour/llms.txt

This React component provides buttons to start different tours. It utilizes the `useTour` hook to access the tour functionality and triggers specific tours based on button clicks. It requires the `Button` component from `@/components/ui/button`.

```tsx
"use client"

import { Button } from "@/components/ui/button"
import { useTour } from "@/components/ui/tour"

export function TourButtons() {
    const tour = useTour()

    return (
        <div className="flex flex-wrap gap-2">
            <Button onClick={() => tour.start("onboarding")}>
                Start Onboarding Tour
            </Button>
            <Button variant="secondary" onClick={() => tour.start("settings-guide")}>
                Settings Guide
            </Button>
            <Button variant="outline" onClick={() => tour.start("admin-tour")}>
                Admin Tour
            </Button>
        </div>
    )
}
```

--------------------------------

### Start Specific Tours Using useTour Hook in React

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/multiple-tours.mdx

Demonstrates how to use the 'useTour' hook to initiate specific tours by their unique IDs. Buttons are provided to trigger the 'onboarding' and 'settings-guide' tours, showcasing the ability to start different tours on demand.

```tsx
"use client"

import { Button } from "@/components/ui/button"
import { useTour } from "@/components/ui/tour"

export function TourButtons() {
    const tour = useTour()

    return (
        <div>
            <Button onClick={() => tour.start("onboarding")}>
                Start Onboarding
            </Button>
            <Button onClick={() => tour.start("settings-guide")}>
                Settings Guide
            </Button>
        </div>
    )
}
```

--------------------------------

### useTour Hook for Tour Control in React

Source: https://context7.com/tonghohin/tour/llms.txt

Utilizes the `useTour` hook to programmatically control tour flows within your React components. It provides `start(tourId)` to initiate a tour and `close()` to dismiss it. This hook requires the component to be rendered within a `TourProvider`.

```tsx
"use client"

import { Button } from "@/components/ui/button"
import { useTour } from "@/components/ui/tour"

export function StartTourButton() {
    const tour = useTour()

    return (
        <div className="flex gap-2">
            <Button onClick={() => tour.start("main")}>
                Start Tour
            </Button>
            <Button variant="outline" onClick={() => tour.close()}>
                Close Tour
            </Button>
        </div>
    )
}
```

--------------------------------

### Define Multipage Tour Steps (TypeScript)

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/multipage.mdx

Defines an array of tour steps for a multipage tour. Each step can specify navigation routes using `nextRoute` and `previousRoute` to control the flow between pages. This example uses TypeScript and assumes the `Step` type is imported from '@/components/ui/tour'.

```tsx
import { type Step } from "@/components/ui/tour"

export const steps = [
    {
        id: "home-hero",
        title: "Welcome",
        content: "Welcome to our application! Let's start the tour.",
        nextRoute: "/dashboard", // Navigate to dashboard on next
    },
    {
        id: "dashboard-stats",
        title: "Dashboard",
        content: "Here you can see your key metrics and statistics.",
        previousRoute: "/", // Navigate back to home on previous
        nextRoute: "/settings", // Navigate to settings on next
    },
    {
        id: "settings-profile",
        title: "Settings",
        content: "Customize your profile and preferences here.",
        previousRoute: "/dashboard", // Navigate back to dashboard
    },
] satisfies Step[]
```

--------------------------------

### Initialize TourProvider in Layout

Source: https://context7.com/tonghohin/tour/llms.txt

Wrap the application root layout with the TourProvider to enable global tour state management and context access.

```tsx
import { TourProvider } from "@/components/ui/tour"
import { tours } from "@/lib/tours"

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <TourProvider tours={tours}>
                    {children}
                </TourProvider>
            </body>
        </html>
    )
}
```

--------------------------------

### Configure Step Positioning and Styling

Source: https://context7.com/tonghohin/tour/llms.txt

Demonstrates how to customize tour step positioning using Radix UI-like properties and apply custom CSS classes or React elements for navigation buttons.

```tsx
import { type Step } from "@/components/ui/tour"
import { ArrowRightIcon, CheckIcon } from "lucide-react"

export const customizedSteps = [
    {
        id: "positioning",
        title: "Positioning Example",
        content: "This step demonstrates custom positioning options.",
        side: "bottom",        // "top" | "bottom" | "left" | "right"
        sideOffset: 10,        // distance in pixels from the anchor
        align: "start",        // "start" | "center" | "end"
        alignOffset: 10,       // offset from alignment position
    },
    {
        id: "styling",
        title: "Custom Styling",
        content: "Apply custom CSS classes to style the tour card.",
        className: "w-96 bg-destructive text-destructive-foreground",
    },
    {
        id: "buttonLabels",
        title: "Custom Button Labels",
        content: "Use custom labels or React elements for navigation buttons.",
        previousLabel: <>← Go Back</>,
        nextLabel: (
            <>
                Complete Tour <CheckIcon className="ml-2 h-4 w-4" />
            </>
        ),
    },
] satisfies Step[]
```

--------------------------------

### Implement Multipage Tour Navigation

Source: https://context7.com/tonghohin/tour/llms.txt

Configures tours that span across different application routes by utilizing the nextRoute and previousRoute properties to trigger navigation.

```tsx
import { type Step } from "@/components/ui/tour"

export const multipageTourSteps = [
    {
        id: "home-hero",
        title: "Welcome",
        content: "Welcome to our application! Let's explore the main features.",
        nextRoute: "/dashboard", // Navigate to dashboard when clicking Next
    },
    {
        id: "dashboard-stats",
        title: "Dashboard Overview",
        content: "Here you can see your key metrics and statistics at a glance.",
        previousRoute: "/",       // Navigate to home when clicking Previous
        nextRoute: "/settings",   // Navigate to settings when clicking Next
    },
    {
        id: "settings-profile",
        title: "Profile Settings",
        content: "Customize your profile and application preferences here.",
        previousRoute: "/dashboard", // Navigate back to dashboard
    },
] satisfies Step[]
```

--------------------------------

### Highlight Multiple Elements in a Single Step

Source: https://context7.com/tonghohin/tour/llms.txt

Groups multiple UI elements under a single tour step by assigning them the same data-tour-step-id attribute, causing them to be spotlighted simultaneously.

```tsx
// Page component with multiple elements sharing the same tour step ID
export default function Page() {
    return (
        <div className="min-h-screen">
            {/* Header navigation - will be highlighted */}
            <header data-tour-step-id="navigation" className="border-b p-4">
                <nav className="flex gap-4">
                    <a href="/">Home</a>
                    <a href="/about">About</a>
                    <a href="/contact">Contact</a>
                </nav>
            </header>

            {/* Sidebar navigation - will also be highlighted in the same step */}
            <aside data-tour-step-id="navigation" className="w-64 border-r p-4">
                <ul className="space-y-2">
                    <li>Dashboard</li>
                    <li>Settings</li>
                    <li>Help</li>
                </ul>
            </aside>

            <main className="p-8">
                <h1>Main Content</h1>
            </main>
        </div>
    )
}

// Step configuration for highlighting multiple elements
import { type Step } from "@/components/ui/tour"

export const steps = [
    {
        id: "navigation",
        title: "Navigation Areas",
        content: "Both the header and sidebar navigation will be highlighted together.",
    },
] satisfies Step[]
```

--------------------------------

### Target Elements and Trigger Tours

Source: https://context7.com/tonghohin/tour/llms.txt

Use the data-tour-step-id attribute to mark elements for highlighting and the useTour hook to programmatically trigger tours from UI components.

```tsx
"use client"

import { Button } from "@/components/ui/button"
import { useTour } from "@/components/ui/tour"

export default function HomePage() {
    const tour = useTour()

    return (
        <div className="min-h-screen">
            <header data-tour-step-id="tour-header" className="border-b p-4">
                <h1 className="text-2xl font-bold">My Application</h1>
            </header>

            <nav data-tour-step-id="tour-nav" className="border-b p-4">
                <a href="/docs">Docs</a>
                <a href="/examples">Examples</a>
            </nav>

            <main className="p-8">
                <div data-tour-step-id="tour-github" className="mb-4">
                    <a href="https://github.com">GitHub Link</a>
                </div>

                <div data-tour-step-id="tour-end">
                    <Button onClick={() => tour.start("main")}>
                        Start Tour
                    </Button>
                </div>
            </main>
        </div>
    )
}
```

--------------------------------

### Define Multiple Independent Tours (TypeScript)

Source: https://context7.com/tonghohin/tour/llms.txt

This snippet defines an array of tour configurations, each with a unique ID and a series of steps. It uses the `Tour` type for type safety and is designed to be imported and used in other parts of the application.

```tsx
import { type Tour } from "@/components/ui/tour"

export const tours = [
    {
        id: "onboarding",
        steps: [
            {
                id: "welcome",
                title: "Welcome!",
                content: "Welcome to our app. Let's get you started with the basics.",
            },
            {
                id: "dashboard",
                title: "Your Dashboard",
                content: "This is your main dashboard where you can see everything.",
            },
            {
                id: "profile",
                title: "Your Profile",
                content: "Click here to customize your profile settings.",
            },
        ],
    },
    {
        id: "settings-guide",
        steps: [
            {
                id: "general-settings",
                title: "General Settings",
                content: "Configure general application settings here.",
            },
            {
                id: "notifications",
                title: "Notification Preferences",
                content: "Set up how and when you receive notifications.",
            },
            {
                id: "security",
                title: "Security Settings",
                content: "Manage your password and two-factor authentication.",
            },
        ],
    },
    {
        id: "admin-tour",
        steps: [
            {
                id: "user-management",
                title: "User Management",
                content: "Add, remove, and manage user accounts from here.",
            },
            {
                id: "analytics",
                title: "Analytics Dashboard",
                content: "View detailed analytics and reports.",
            },
        ],
    },
] satisfies Tour[]
```

--------------------------------

### Targeting Tour Elements with data-tour-step-id in React

Source: https://context7.com/tonghohin/tour/llms.txt

Highlights elements during a tour step by adding the `data-tour-step-id` attribute to them. The tour system automatically matches these IDs with the current step's ID to apply a spotlight effect.

```tsx
export default function DashboardPage() {
    return (
        <div className="p-8">
            {/* This element will be highlighted during the "welcome" step */}
            <header data-tour-step-id="welcome">
                <h1>Welcome to My App</h1>
                <p>Your personalized dashboard</p>
            </header>

            {/* This element will be highlighted during the "feature-1" step */}
            <section data-tour-step-id="feature-1">
                <h2>Key Metrics</h2>
                <div className="grid grid-cols-3 gap-4">
                    <div>Users: 1,234</div>
                    <div>Revenue: $56,789</div>
                    <div>Growth: 23%</div>
                </div>
            </section>

            {/* This element will be highlighted during the "settings" step */}
            <aside data-tour-step-id="settings">
                <button>Settings</button>
            </aside>
        </div>
    )
}
```

--------------------------------

### Customize Tour Step Appearance with TypeScript

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/customization.mdx

This snippet demonstrates how to customize individual tour steps in a React application using TypeScript. It defines an array of step configurations, specifying properties for positioning, styling, and button labels. The `Step` type is imported from '@/components/ui/tour'.

```tsx
import { type Step } from "@/components/ui/tour"
import { ArrowRightIcon, CheckIcon } from "lucide-react"

export const steps = [
    {
        id: "positioning",
        title: "Positioning",
        content:
            "Each tour step uses the Popover component, so you can pass any props supported by Popover Content.",
        side: "bottom",
        sideOffset: 10,
        align: "start",
        alignOffset: 10,
    },
    {
        id: "styling",
        title: "Custom Styling",
        content: "Apply your own styles to the tour step using className.",
        className: "w-96 bg-destructive",
    },
    {
        id: "buttonLabels",
        title: "Custom Button Labels",
        content:
            "Customize the labels of the next and previous buttons on each step.",
        previousLabel: <>← Previous Step</>,
        nextLabel:
            <>
                Complete Tour <CheckIcon />
            </>,
    },
] satisfies Step[]

```

--------------------------------

### Define Multiple Tours in TypeScript

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/multiple-tours.mdx

Defines an array of tour configurations, each with a unique ID and a series of steps. This structure allows for the creation of multiple independent tours, such as 'onboarding' and 'settings-guide'. Each step includes an ID, title, and content.

```tsx
import { type Tour } from "@/components/ui/tour"

export const tours = [
    {
        id: "onboarding",
        steps: [
            {
                id: "welcome",
                title: "Welcome!",
                content: "Welcome to our app. Let's get you started.",
            },
            {
                id: "dashboard",
                title: "Your Dashboard",
                content: "This is your main dashboard.",
            },
        ],
    },
    {
        id: "settings-guide",
        steps: [
            {
                id: "profile",
                title: "Profile Settings",
                content: "Customize your profile here.",
            },
            {
                id: "preferences",
                title: "Preferences",
                content: "Set your app preferences.",
            },
        ],
    },
] satisfies Tour[]
```

--------------------------------

### Define Tour Step for Multiple Elements (TypeScript)

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/multiple-elements.mdx

This TypeScript code defines a tour step configuration. It uses the `id` property, which corresponds to the `data-tour-step-id` attribute used in the HTML, to specify which elements should be highlighted together. The `content` provides descriptive text for the tour step.

```typescript
import { type Step } from "@/components/ui/tour"

export const steps = [
    {
        "id": "navigation",
        "title": "Navigation Areas",
        "content": "Both the header and sidebar will be highlighted.",
    },
] satisfies Step[]
```

--------------------------------

### Integrate TourProvider with Multiple Tours in React

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/multiple-tours.mdx

Integrates multiple tours into the application by wrapping the app's content with the TourProvider component. The 'tours' prop is passed the array of tour definitions, making them available throughout the application.

```tsx
import { TourProvider } from "@/components/ui/tour"
import { tours } from "@/lib/tours"

export default function RootLayout() {
    return <TourProvider tours={tours}>{/* Your app content */}</TourProvider>
}
```

--------------------------------

### Highlight Multiple Elements with `data-tour-step-id` (TSX)

Source: https://github.com/tonghohin/tour/blob/main/content/docs/examples/multiple-elements.mdx

This TSX code snippet shows how to assign the same `data-tour-step-id` attribute to different HTML elements (header and aside) to group them for highlighting in a single tour step. This allows for simultaneous visual emphasis on related UI components.

```tsx
export default function Page() {
    return (
        <div>
            <header data-tour-step-id="navigation">
                <nav>
                    <a href="/">Home</a>
                    <a href="/about">About</a>
                </nav>
            </header>

            <aside data-tour-step-id="navigation">
                <ul>
                    <li>Dashboard</li>
                    <li>Settings</li>
                </ul>
            </aside>

            <main>
                <h1>Welcome</h1>
            </main>
        </div>
    )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.