### Install Tour Kit Core and React Packages

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/onboarding-tool-evaluation-checklist.mdx

Quick start command to install the necessary Tour Kit packages for evaluating the library. This includes the core functionality and the React integration.

```bash
# Quick start for evaluating Tour Kit
npm install @tourkit/core @tourkit/react
```

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

### Install userTourKit Core and React Bindings

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/best-product-tour-tools-react.mdx

Install the core userTourKit library and its React bindings to get started with building product tours. This is the recommended starting point for React projects.

```bash
npm install @tour-kit/core @tour-kit/react
```

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

### Basic Tour Setup with TourProvider

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/syndication/no-code-vs-library-product-tour/devto.md

Implement a product tour using Tour Kit's React components. Wrap your application with `TourProvider` and define tour steps, including target elements and content. This example shows a simple setup for a solo founder or small team.

```tsx
import { TourProvider, useTour } from '@tourkit/react';

const steps = [
  { target: '#dashboard-nav', content: 'Start here to see your metrics' },
  { target: '#create-btn', content: 'Create your first project' },
  { target: '#settings-link', content: 'Customize your workspace' },
];

export function OnboardingTour() {
  return (
    <TourProvider steps={steps} onComplete={() => console.log('done')}> 
      <YourApp /> 
    </TourProvider>
  );
}
```

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

### Install Tour Kit Contextual Hints

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/saas-onboarding-flow-free-to-paid.mdx

Include the @tourkit/hints package to implement Flow 5: contextual hints for guiding users.

```bash
npm install @tourkit/hints       # Flow 5: contextual hints
```

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

### Complete Tour Implementation Example

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/guides/nextjs.mdx

A comprehensive example demonstrating the setup of `MultiTourKitProvider`, `Tour`, `TourStep`, and associated components. It includes dynamic state management for tour visibility and completion tracking.

```tsx
'use client';

import {
  Tour,
  TourStep,
  TourCard,
  TourCardHeader,
  TourCardContent,
  TourCardFooter,
  TourOverlay,
  TourProgress,
  TourNavigation,
  TourClose,
  MultiTourKitProvider,
  useNextAppRouter,
  useTour,
  usePersistence,
} from '@tour-kit/react';
import { useEffect, useState } from 'react';

export function CompleteTour() {
  const router = useNextAppRouter();
  const persistence = usePersistence({ keyPrefix: 'myapp' });
  const [show, setShow] = useState(false);

  useEffect(() => {
    const completed = persistence.getCompletedTours().includes('onboarding');
    setShow(!completed);
  }, [persistence]);

  return (
    <MultiTourKitProvider
      router={router}
      routePersistence={{ enabled: true }}
      onTourComplete={(id) => {
        persistence.markCompleted(id);
        console.log('Tour completed:', id);
      }}
    >
      <Tour id="onboarding" autoStart={show}>
        <TourStep
          target="#hero"
          title="Welcome to Our App"
          content="Let's show you around!"
          route="/"
          routeMatch="exact"
        />
        <TourStep
          target="#features"
          title="Key Features"
          content="Here's what you can do"
          route="/features"
        />
        <TourStep
          target="#pricing"
          title="Pricing"
          content="Choose your plan"
          route="/pricing"
        />

        <TourOverlay />

        <TourCard className="w-80">
          <TourCardHeader>
            <TourClose />
          </TourCardHeader>
          <TourCardContent />
          <TourCardFooter>
            <TourProgress variant="dots" />
            <TourNavigation />
          </TourCardFooter>
        </TourCard>
      </Tour>

      <StartButton />
    </MultiTourKitProvider>
  );
}

function StartButton() {
  const { start, isActive } = useTour();

  if (isActive) return null;

  return (
    <button
      onClick={() => start('onboarding')}
      className="fixed bottom-4 right-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
    >
      Start Tour
    </button>
  );
}
```

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

### Install Tour Kit Core and Hints Packages

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/best-tooltip-libraries-react-2026.mdx

Use npm to install the necessary packages for Tour Kit's core functionality and hints feature. This is required for implementing guided onboarding flows.

```bash
npm install @tourkit/core @tourkit/hints
```

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

### Implement Welcome Tour with Design System Components

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/best-product-tour-libraries-monorepo-design-system-teams.mdx

This example demonstrates how to set up a product tour using `@tourkit/react` and integrate it with your existing design system's Tooltip and Button components. Ensure your design system components are imported correctly.

```tsx
// packages/shared-onboarding/src/welcome-tour.tsx
// This lives in your shared package and uses YOUR design system components
import { TourProvider, useTour } from '@tourkit/react';
import { Tooltip, Button } from '@acme/design-system';

const steps = [
  {
    id: 'nav',
    target: '#sidebar',
    title: 'Navigation',
    content: 'Browse your projects here.',
  },
];

function TourTooltip() {
  const { currentStep, next, prev, isActive } = useTour();
  if (!isActive || !currentStep) return null;

  // Your design system tooltip — your tokens, your z-index, your animations
  return (
    <Tooltip>
      <Tooltip.Title>{currentStep.title}</Tooltip.Title>
      <Tooltip.Content>{currentStep.content}</Tooltip.Content>
      <Tooltip.Footer>
        <Button variant="ghost" onClick={prev}>Back</Button>
        <Button onClick={next}>Next</Button>
      </Tooltip.Footer>
    </Tooltip>
  );
}

export function WelcomeTour({ children }: { children: React.ReactNode }) {
  return (
    <TourProvider tourId="welcome" steps={steps}>
      <TourTooltip />
      {children}
    </TourProvider>
  );
}
```

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

### React Code Example for Product Tours

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/syndication/user-activation-rate-product-tour/newsletter-pitch.md

This snippet demonstrates a React code example used within the guide. No specific setup or constraints are mentioned.

```javascript
function ProductTourComponent() {
  // Component logic for product tours
  return (
    <div>
      {/* Tour UI elements */}
    </div>
  );
}
```

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

### Create an Interactive API Quickstart Tour

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/onboarding-developer-tools-cli-dashboard-api.mdx

Build a guided tour for API integration using @tourkit/react to walk users through installation, code execution, and response validation.

```tsx
// src/components/ApiQuickstart.tsx
import { useTour, type TourStep } from '@tourkit/react';

const apiSteps: TourStep[] = [
  {
    id: 'install',
    target: '[data-tour="install-cmd"]',
    title: 'Install the SDK',
    content: 'One command. No peer dependencies required.',
  },
  {
    id: 'first-call',
    target: '[data-tour="code-sample"]',
    title: 'Make your first call',
    content: 'This example is complete — paste it into a file, add your API key, and run it.',
  },
  {
    id: 'response',
    target: '[data-tour="response-preview"]',
    title: 'Expected response',
    content: 'You should see this JSON structure. If you get an error, check your API key permissions.',
  },
];

export function ApiQuickstart() {
  const { start } = useTour({ steps: apiSteps, tourId: 'api-quickstart' });

  return (
    <div className="quickstart">
      <button onClick={() => start()}>Walk me through it</button>

      <pre data-tour="install-cmd">
        npm install @yourdevtool/sdk
      </pre>

      <pre data-tour="code-sample">{`import { Client } from '@yourdevtool/sdk';

const client = new Client({ apiKey: process.env.DEVTOOL_API_KEY });

const result = await client.events.create({
  name: 'user.signup',
  properties: { plan: 'free' },
});

console.log(result);`}
      </pre>

      <pre data-tour="response-preview">{`{
  "id": "evt_abc123",
  "name": "user.signup",
  "created_at": "2026-04-09T10:00:00Z"
}`}
      </pre>
    </div>
  );
}
```

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

### Quick Start with HintsProvider and Hint

Source: https://github.com/domidex/tour-kit/blob/main/packages/hints/README.md

Set up the HintsProvider and use the Hint component for basic contextual help. Ensure the target element has the specified ID.

```tsx
import { HintsProvider, Hint } from '@tour-kit/hints'

function App() {
  return (
    <HintsProvider>
      <Hint
        id="feature-hint"
        target="#new-feature"
        content="Click here to try our new feature!"
      />
    </HintsProvider>
  )
}
```

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

### Quick Start Example

Source: https://github.com/domidex/tour-kit/blob/main/packages/adoption/README.md

A quick start example demonstrating how to set up and use the AdoptionProvider, IfNotAdopted, NewFeatureBadge, and useFeature hook.

```APIDOC
## Quick Start

```tsx
import { AdoptionProvider, useFeature, IfNotAdopted, NewFeatureBadge } from '@tour-kit/adoption'

// Define features to track
const features = [
  {
    id: 'dark-mode',
    name: 'Dark Mode',
    trigger: '#dark-mode-toggle', // CSS selector for click tracking
    adoptionCriteria: { minUses: 3, recencyDays: 30 },
  },
  {
    id: 'export',
    name: 'Export Data',
    trigger: { event: 'export:complete' }, // Custom event tracking
  },
]

// Wrap your app
function App() {
  return (
    <AdoptionProvider features={features}>
      <YourApp />
    </AdoptionProvider>
  )
}

// Show nudges for unadopted features
function DarkModeToggle() {
  return (
    <IfNotAdopted featureId="dark-mode">
      <NewFeatureBadge>Try dark mode!</NewFeatureBadge>
    </IfNotAdopted>
  )
}

// Track usage programmatically
function ExportButton() {
  const { trackUsage, isAdopted } = useFeature('export')

  const handleExport = () => {
    // ... export logic
    trackUsage()
  }

  return (
    <button onClick={handleExport}>
      Export {!isAdopted && <span>(New!)</span>}
    </button>
  )
}
```
```

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

### Get Code Examples Usage

Source: https://github.com/domidex/tour-kit/blob/main/apps/tour-kit-mcp/SPEC.md

Example usage and response for the get_code_examples tool.

```json
{ "slug": "getting-started/installation", "language": "bash" }
```

```json
{
  "examples": [
    {
      "code": "pnpm add @tour-kit/react",
      "language": "bash",
      "page": { "title": "Installation", "url": "/docs/getting-started/installation" },
      "context": "Quick Install"
    }
  ]
}
```

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

### Clone and build Tour Kit

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/syndication/tour-kit-8kb-zero-dependencies/devto.md

Use these commands to set up the local environment and verify the gzipped bundle sizes of the core and React packages.

```bash
git clone https://github.com/DomiDex/tour-kit.git
cd tour-kit
pnpm install && pnpm build

gzip -c packages/core/dist/index.js | wc -c
gzip -c packages/react/dist/index.js | wc -c
gzip -c packages/react/dist/headless.js | wc -c
```

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

### Plugin Documentation Examples

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/analytics/plugins/custom.mdx

Examples for README files demonstrating installation and usage of the published plugin.

```bash
npm install @yourcompany/tourkit-analytics-plugin
```

```tsx
import { myPlugin } from '@yourcompany/tourkit-analytics-plugin'

<AnalyticsProvider
  config={{
    plugins: [myPlugin({ apiKey: 'xxx' })]
  }}
>
  {children}
</AnalyticsProvider>
```

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

### Install @tour-kit/hints with npm

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/hints/index.mdx

Use this command to add the library to your project using npm.

```bash
npm install @tour-kit/hints
```

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

### Implement Product Tour with Tour Kit

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/react-empty-state-component.mdx

This snippet demonstrates how to integrate Tour Kit into a React application to provide a guided tour for new users. It defines tour steps, uses `useTour` to start the tour from an empty state CTA, and wraps the application with `TourProvider`. Ensure `@tourkit/react` is installed and React 18+ is used.

```tsx
"use client";

import { useState } from "react";
import { TourProvider, useTour } from "@tourkit/react";
import { EmptyState } from "@/components/empty-state/empty-state";
import { ProjectsIllustration } from "@/components/illustrations";

const projectTourSteps = [
  {
    target: "[data-tour='project-name']",
    title: "Name your project",
    content: "Pick something descriptive. You can change it later.",
  },
  {
    target: "[data-tour='project-template']",
    title: "Choose a starting point",
    content: "Templates save setup time. Blank works too.",
  },
  {
    target: "[data-tour='project-create']",
    title: "Create and go",
    content: "Hit create. Your project dashboard loads next.",
  },
];

function ProjectsEmptyState() {
  const { startTour } = useTour();

  return (
    <EmptyState variant="first-use">
      <EmptyState.Illustration>
        <ProjectsIllustration />
      </EmptyState.Illustration>
      <EmptyState.Title>Create your first project</EmptyState.Title>
      <EmptyState.Description>
        Projects organize your work into separate spaces. We will walk
        you through creating one.
      </EmptyState.Description>
      <EmptyState.Action onClick={() => startTour("new-project-tour")}>
        Get started
      </EmptyState.Action>
    </EmptyState>
  );
}

export default function ProjectsPage() {
  const [projects, setProjects] = useState([]);

  return (
    <TourProvider
      tours={{
        "new-project-tour": { steps: projectTourSteps },
      }}
    >
      {projects.length === 0 ? (
        <ProjectsEmptyState />
      ) : (
        <ProjectsList projects={projects} />
      )}
    </TourProvider>
  );
}

```

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

### Install Tour Kit dependencies

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/ai-onboarding-future.mdx

Install the core and React packages to begin building the onboarding component layer.

```bash
npm install @tourkit/core @tourkit/react
```

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

### Get Code Examples Parameters

Source: https://github.com/domidex/tour-kit/blob/main/apps/tour-kit-mcp/SPEC.md

Parameters for the get_code_examples tool.

```typescript
{
  /** Filter by page slug (optional, returns all if omitted) */
  slug?: string

  /** Filter by language: "tsx", "typescript", "bash", "json" */
  language?: string

  /** Maximum examples to return */
  limit?: number
}
```

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

### Basic Tour Setup with TourKitProvider

Source: https://github.com/domidex/tour-kit/blob/main/plan/mobile-sdk-prd.md

Demonstrates setting up the TourKitProvider and NativeTourProvider with a sample tour and integrating tour UI components. Ensure accessibility and animation configurations are set as needed.

```tsx
import {
  TourKitProvider,
  NativeTourProvider,
  Tour,
  TourOverlay,
  TourCard,
  TourNavigation,
  useTour,
} from '@tour-kit/react-native';
import { useExpoRouter } from '@tour-kit/react-native/adapters';

// Define tours
const welcomeTour = {
  id: 'welcome',
  steps: [
    {
      id: 'step-1',
      target: 'home-button', // or ref
      title: 'Welcome!',
      content: 'This is your home screen.',
      placement: 'bottom',
    },
    {
      id: 'step-2',
      target: 'settings-button',
      title: 'Settings',
      content: 'Customize your experience here.',
      placement: 'left',
    },
  ],
  onComplete: (context) => {
    console.log('Tour completed!', context);
  },
};

// App setup
export default function App() {
  const router = useExpoRouter();

  return (
    <TourKitProvider
      config={{
        accessibility: { announceStepChanges: true },
        animation: { reducedMotion: 'auto' },
      }}
    >
      <NativeTourProvider
        tours={[welcomeTour]}
        router={router}
      >
        <RootLayout />

        {/* Tour UI */}
        <Tour tourId="welcome">
          <TourOverlay>
            <TourCard>
              <TourNavigation />
            </TourCard>
          </TourOverlay>
        </Tour>
      </NativeTourProvider>
    </TourKitProvider>
  );
}

// In a screen component
function HomeScreen() {
  const { start } = useTour();
  const homeButtonRef = useRef<View>(null);

  useEffect(() => {
    // Auto-start tour for new users
    start('welcome');
  }, []);

  return (
    <View>
      <Pressable
        ref={homeButtonRef}
        // Register target by ID
        accessibilityHint="home-button"
        nativeID="home-button"
      >
        <Text>Home</Text>
      </Pressable>
    </View>
  );
}

```

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

### GET /api/docs/examples/[pkg]

Source: https://github.com/domidex/tour-kit/blob/main/plan/Discoverability-phase-4.md

Retrieves code examples for a specific package.

```APIDOC
## GET /api/docs/examples/[pkg]

### Description
Fetches all code examples associated with a specific package.

### Method
GET

### Endpoint
/api/docs/examples/{pkg}

### Parameters
#### Path Parameters
- **pkg** (string) - Required - The package name (e.g., 'core', 'react', 'hints').

### Response
#### Success Response (200)
- **package** (string) - The package name.
- **examples** (array) - List of code examples.
- **count** (number) - Total number of examples returned.
```

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

### Install @tour-kit/media

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/media/index.mdx

Add the @tour-kit/media package to your project using your preferred package manager.

```bash
pnpm add @tour-kit/media
```

```bash
npm install @tour-kit/media
```

```bash
yarn add @tour-kit/media
```

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

### Install @tour-kit/hints

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/public/context/hints.txt

Installation commands for npm and pnpm package managers.

```bash
npm install @tour-kit/hints
```

```bash
pnpm add @tour-kit/hints
```

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

### Setup Analytics Package

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/adoption/analytics/index.mdx

Install the necessary analytics package for @tour-kit/adoption.

```APIDOC
## Install Analytics Package

```bash
pnpm add @tour-kit/analytics
```
```

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

### Blog Announcement: Minimal Code Example

Source: https://github.com/domidex/tour-kit/blob/main/marketing-strategy/content-templates.md

A minimal React code example demonstrating how to use Tour-Kit. Ensure you have the necessary imports and setup for your React application.

```tsx
import { TourKit } from "@tour-kit/core";

function App() {
  const steps = [
    { content: "Welcome to Tour-Kit!", target: "#element1" },
    { content: "This is the second step.", target: "#element2" },
  ];

  return (
    <div>
      <div id="element1">Element 1</div>
      <div id="element2">Element 2</div>
      <TourKit steps={steps} />
    </div>
  );
}

export default App;
```

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

### Get Code Examples Tool

Source: https://github.com/domidex/tour-kit/blob/main/plan/Discoverability-phase-3.md

Registers a tool to extract code examples from the Tour Kit documentation for a specified package. It returns code blocks along with their source page information, which is useful for finding usage patterns and implementation examples.

```APIDOC
## POST /register_tool get_code_examples

### Description
Extract code examples from Tour Kit documentation for a specific package. Returns code blocks with language tags, source page, and context. Useful for finding usage patterns and implementation examples.

### Method
POST

### Endpoint
/register_tool

### Parameters
#### Request Body
- **tool_name** (string) - Required - The name of the tool to register, which is 'get_code_examples'.
- **package** (string) - Required - Package name to get examples for (e.g., "core", "react", "hints", "adoption").
- **language** (string) - Optional - Filter by language (e.g., "typescript", "tsx", "bash").
- **limit** (number) - Optional - Max examples to return (default 20, max 100).

### Request Example
```json
{
  "tool_name": "get_code_examples",
  "package": "react",
  "language": "typescript",
  "limit": 10
}
```

### Response
#### Success Response (200)
- **content** (array) - An array containing the tool's response.
  - **type** (string) - The type of content, expected to be 'text'.
  - **text** (string) - A JSON string containing the extracted code examples. It includes:
    - **package** (string) - The requested package name.
    - **totalExamples** (number) - The total number of examples found.
    - **examples** (array) - An array of code example objects, each containing:
      - **language** (string) - The language of the code block.
      - **code** (string) - The actual code snippet.
      - **source** (string) - The title and slug of the page where the code was found (e.g., "Component Example (component-example)").

#### Response Example
```json
{
  "content": [
    {
      "type": "text",
      "text": "{\n  \"package\": \"react\",\n  \"totalExamples\": 3,\n  \"examples\": [\n    {\n      \"language\": \"typescript\",\n      \"code\": \"// Example code snippet\nconsole.log('Hello, Tour Kit!');\n\n      \",\n      \"source\": \"React Component Basics (react-component-basics)\"\n    },\n    {\n      \"language\": \"tsx\",\n      \"code\": \"function MyComponent() { return <div>Hello</div>; }\n      \",\n      \"source\": \"Advanced React Patterns (advanced-react-patterns)\"\n    }\n  ]\n}"
    }
  ]
}
```

#### Error Response (e.g., Package Not Found)
- **content** (array) - An array containing the error message.
  - **type** (string) - The type of content, expected to be 'text'.
  - **text** (string) - A message indicating that no documentation was found for the specified package, suggesting the use of `list_sections`.

#### Error Response Example
```json
{
  "content": [
    {
      "type": "text",
      "text": "No documentation found for package \"nonexistent_package\". Use list_sections to see available packages."
    }
  ]
}
```
```

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

### Install @tour-kit/adoption and @tour-kit/core

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/adoption/index.mdx

Install the necessary packages for feature adoption tracking using your preferred package manager.

```bash
pnpm add @tour-kit/adoption @tour-kit/core
```

```bash
npm install @tour-kit/adoption @tour-kit/core
```

```bash
yarn add @tour-kit/adoption @tour-kit/core
```

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

### GitHub Actions CI/CD Setup

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/licensing/index.mdx

Configure GitHub Actions to install dependencies and build your project. Requires `NPM_TOKEN` to be set in repository secrets for installing restricted pro packages.

```yaml
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      # Required for installing restricted @tour-kit/* pro packages
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
    steps:
      - uses: actions/checkout@v4
      - run: pnpm install --frozen-lockfile
      - run: pnpm build
```

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

### Basic Tour Setup with React

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/no-code-vs-library-product-tour.mdx

Set up a simple onboarding tour using Tour Kit's React provider. Define tour steps with target element IDs and content. Ensure your application component is rendered within the TourProvider.

```tsx
// src/components/OnboardingTour.tsx
import { TourProvider, useTour } from '@tourkit/react';

const steps = [
  { target: '#dashboard-nav', content: 'Start here to see your metrics' },
  { target: '#create-btn', content: 'Create your first project' },
  { target: '#settings-link', content: 'Customize your workspace' },
];

export function OnboardingTour() {
  return (
    <TourProvider steps={steps} onComplete={() => console.log('done')}> 
      <YourApp />
    </TourProvider>
  );
}
```

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

### Get Code Examples Return Type

Source: https://github.com/domidex/tour-kit/blob/main/apps/tour-kit-mcp/SPEC.md

Return type definition for the get_code_examples tool.

```typescript
{
  examples: {
    code: string
    language: string
    page: { title: string; url: string }
    /** Context: heading above the code block */
    context?: string
  }[]
}
```

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

### Implement Onboarding Tour with Custom Tooltip

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/what-is-headless-ui-guide-onboarding.mdx

This example demonstrates setting up an onboarding tour using `TourProvider` and `Tour` components from `@tourkit/react`. It defines tour steps and uses a `CustomTooltip` component, which leverages the `useTour` hook to display progress and navigation controls, integrating with a custom design system.

```tsx
import { TourProvider, Tour, useTour } from '@tourkit/react';

const steps = [
  { id: 'welcome', target: '#dashboard-header', title: 'Welcome', content: 'This is your dashboard.' },
  { id: 'sidebar', target: '#nav-sidebar', title: 'Navigation', content: 'Browse sections here.' },
  { id: 'create', target: '#create-button', title: 'Create', content: 'Start your first project.' },
];

function CustomTooltip() {
  const { currentStep, next, back, progress, totalSteps } = useTour();
  if (!currentStep) return null;

  return (
    <YourDesignSystemCard>
      <YourBadge>{progress} of {totalSteps}</YourBadge>
      <h3>{currentStep.title}</h3>
      <p>{currentStep.content}</p>
      <YourButtonGroup>
        <YourButton variant="ghost" onClick={back}>Back</YourButton>
        <YourButton variant="primary" onClick={next}>Continue</YourButton>
      </YourButtonGroup>
    </YourDesignSystemCard>
  );
}

function App() {
  return (
    <TourProvider>
      <Tour steps={steps} render={() => <CustomTooltip />} />
      <YourApp />
    </TourProvider>
  );
}
```

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

### Install Headless Onboarding Libraries

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/syndication/best-headless-ui-libraries-onboarding/twitter-thread.md

Install the core userTourKit library and its React integration, along with Radix UI Popover for UI components.

```bash
npm install @tourkit/core @tourkit/react
npm install @radix-ui/react-popover
```

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

### Installing Tour Kit Hints Package

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/replace-intro-js-react.mdx

Shows the command to install the `@tour-kit/hints` package, which provides persistent beacon-style hints for Tour Kit.

```bash
npm install @tourkit/hints
```

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

### Complete Onboarding Flow with Checklist and Tours

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/guides/checklists-tours.mdx

This example integrates Tour Kit's Checklist and Tour components to create a guided onboarding experience. It requires importing necessary providers and components from '@tour-kit/core', '@tour-kit/checklists', and '@tour-kit/react'. Use this for a full onboarding implementation.

```tsx
'use client';

import { useState } from 'react';
import { ChecklistProvider, Checklist, ChecklistItem } from '@tour-kit/checklists';
import { TourKitProvider } from '@tour-kit/core';
import { Tour, TourStep, TourCard, TourOverlay } from '@tour-kit/react';
import { usePersistence } from '@tour-kit/core';

const checklistConfig = {
  id: 'onboarding',
  title: 'Welcome to Acme Corp',
  description: 'Get started in 3 simple steps',
  items: [
    {
      id: 'profile',
      label: 'Set up your profile',
      description: 'Add your details',
      action: { type: 'tour', tourId: 'profile-tour', label: 'Start' },
      completedWhen: { tourCompleted: 'profile-tour' },
    },
    {
      id: 'team',
      label: 'Invite your team',
      description: 'Collaborate with teammates',
      requires: ['profile'],
      action: { type: 'tour', tourId: 'team-tour', label: 'Start' },
      completedWhen: { tourCompleted: 'team-tour' },
    },
    {
      id: 'workspace',
      label: 'Create a workspace',
      description: 'Organize your projects',
      requires: ['team'],
      action: { type: 'tour', tourId: 'workspace-tour', label: 'Start' },
      completedWhen: { tourCompleted: 'workspace-tour' },
    },
  ],
};

export default function OnboardingPage() {
  const persistence = usePersistence({ keyPrefix: 'acme' });
  const [dismissed, setDismissed] = useState(false);

  const handleComplete = () => {
    persistence.markCompleted('onboarding');
    // Redirect to dashboard or show success message
    window.location.href = '/dashboard';
  };

  if (dismissed) return null;

  return (
    <TourKitProvider>
      <ChecklistProvider
        checklists={[checklistConfig]}
        onChecklistComplete={handleComplete}
      >
        <div className="min-h-screen bg-gray-50 p-8">
          <div className="max-w-4xl mx-auto">
            {/* Header */}
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold text-gray-900">
                Welcome to Acme Corp
              </h1>
              <p className="text-gray-600 mt-2">
                Let's get you set up in just a few minutes
              </p>
            </div>

            {/* Checklist */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <Checklist id="onboarding" onDismiss={() => setDismissed(true)}>
                <ChecklistItem id="profile" />
                <ChecklistItem id="team" />
                <ChecklistItem id="workspace" />
              </Checklist>
            </div>

            {/* Tours */}
            <OnboardingTours />
          </div>
        </div>
      </ChecklistProvider>
    </TourKitProvider>
  );
}

function OnboardingTours() {
  return (
    <>
      <Tour id="profile-tour">
        <TourStep target="#name" title="Your Name" content="Enter your name" />
        <TourStep target="#email" title="Email" content="Verify your email" />
        <TourStep target="#avatar" title="Photo" content="Upload a photo" />
        <TourOverlay />
        <TourCard />
      </Tour>

      <Tour id="team-tour">
        <TourStep target="#invite" title="Invite" content="Add teammates" />
        <TourStep target="#roles" title="Roles" content="Set permissions" />
        <TourOverlay />
        <TourCard />
      </Tour>

      <Tour id="workspace-tour">
        <TourStep target="#new-workspace" title="Create" content="New workspace" />
        <TourStep target="#workspace-name" title="Name" content="Choose a name" />
        <TourOverlay />
        <TourCard />
      </Tour>
    </>
  );
}

```

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

### Complete Application Example with ChecklistProvider

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/checklists/components/checklist-panel.mdx

A full example demonstrating the integration of ChecklistProvider, ChecklistPanel, ChecklistLauncher, and Checklist within a React application. This setup initializes the checklist data and renders the components.

```tsx
import {
  ChecklistProvider,
  ChecklistPanel,
  ChecklistLauncher,
  Checklist,
} from '@tour-kit/checklists';

const checklist = {
  id: 'onboarding',
  title: 'Get Started',
  tasks: [
    { id: 'step1', title: 'Create account' },
    { id: 'step2', title: 'Add profile' },
    { id: 'step3', title: 'Invite team' },
  ],
};

function App() {
  return (
    <ChecklistProvider checklists={[checklist]}>
      <YourApp />

      <ChecklistPanel
        checklistId="onboarding"
        position="bottom-right"
      >
        <Checklist checklistId="onboarding" />
      </ChecklistPanel>

      <ChecklistLauncher
        checklistId="onboarding"
        position="bottom-right"
      />
    </ChecklistProvider>
  );
}
```

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

### Example BusinessHours Object

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/scheduling/types.mdx

An example of a BusinessHours configuration. It sets specific hours for Monday through Wednesday, includes a lunch break on Wednesday, and lists holidays. This demonstrates a detailed business hours setup.

```typescript
const hours: BusinessHours = {
  default: { open: false },
  days: {
    1: { open: true, hours: [{ start: '09:00', end: '17:00' }] },
    2: { open: true, hours: [{ start: '09:00', end: '17:00' }] },
    3: {
      open: true,
      hours: [
        { start: '09:00', end: '12:00' },
        { start: '13:00', end: '17:00' }, // Lunch break
      ],
    },
  },
  holidays: ['2024-12-25', '2024-01-01'],
}
```

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

### Complete Tour Kit Hints Example

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/docs/hints/components.mdx

A full example demonstrating the integration of HintsProvider with multiple Hint components for feature announcements, action reminders, and help tips. Includes programmatic control of hints using the useHint hook.

```tsx
import { HintsProvider, Hint, useHint } from '@tour-kit/hints';

function FeatureDiscovery() {
  return (
    <HintsProvider>
      {/* New feature announcement */}
      <Hint
        id="export-feature"
        target="#export-btn"
        content="New! Export your data to multiple formats"
        color="success"
        persist={true}
      />

      {/* Important action hint */}
      <Hint
        id="save-warning"
        target="#save-btn"
        content="Don't forget to save your changes"
        color="warning"
        position="bottom-right"
      />

      {/* Subtle help hint */}
      <Hint
        id="help-hint"
        target="#help-icon"
        content="Click for documentation"
        size="sm"
        pulse={false}
      />

      <Dashboard />
    </HintsProvider>
  );
}

// Control hints programmatically
function HintControls() {
  const exportHint = useHint('export-feature');

  return (
    <div>
      <button onClick={exportHint.show}>Show Hint</button>
      <button onClick={exportHint.dismiss}>Dismiss Forever</button>
      <button onClick={exportHint.reset}>Reset Hint</button>
      <p>Status: {exportHint.isDismissed ? 'Dismissed' : exportHint.isOpen ? 'Open' : 'Hidden'}</p>
    </div>
  );
}
```

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

### Playwright CI Configuration Example

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/test-product-tour-ci-cd.mdx

Example of Playwright configuration for CI environments, specifically mentioning GitHub Actions. This setup is crucial for running E2E tests reliably in a continuous integration pipeline.

```yaml
mcr.microsoft.com/playwright:v1.58.2-noble
```

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

### Install Tour Kit and LaunchDarkly React SDK

Source: https://github.com/domidex/tour-kit/blob/main/apps/docs/content/blog/tour-kit-launchdarkly-feature-flagged-onboarding.mdx

Install the necessary packages for Tour Kit and the LaunchDarkly React client SDK using npm.

```bash
npm install @tourkit/core @tourkit/react launchdarkly-react-client-sdk
```