TourKit
@tour-kit/coreProviders

TourKitProvider

TourKitProvider: wrap your app to enable global tour management, shared configuration, and multi-tour coordination

TourKitProvider

Global provider that manages multiple tours across your application.

Usage

import { TourKitProvider } from '@tour-kit/core';

function App() {
  return (
    <TourKitProvider>
      <YourApp />
    </TourKitProvider>
  );
}

Props

Prop

Type

With Global Config

<TourKitProvider
  defaultConfig={{
    keyboard: true,
    spotlight: {
      padding: 8,
    },
  }}
  persistence={{
    strategy: 'localStorage',
    key: 'tour-kit-state',
  }}
>
  <App />
</TourKitProvider>

Multiple Tours

When using TourKitProvider, you can define multiple tours:

<TourKitProvider>
  <TourProvider tour={onboardingTour}>
    <TourProvider tour={featureTour}>
      <App />
    </TourProvider>
  </TourProvider>
</TourKitProvider>

On this page