@tour-kit/coreProviders
TourProvider
TourProvider: context provider that manages state, steps, and lifecycle for an individual product tour instance
domidex01Published
Provides context for a single tour.
Usage
import { TourProvider } from '@tour-kit/core';
function App() {
return (
<TourProvider
tour={{
id: 'onboarding',
steps: [{ id: 'step-1', target: '#btn', content: 'Click here' }],
}}
>
<MyApp />
</TourProvider>
);
}Props
Prop
Type
With Options
<TourProvider
tour={{
id: 'onboarding',
steps: steps,
autoStart: false,
startAt: 0,
keyboard: true,
spotlight: {
padding: 8,
borderRadius: 4,
},
onComplete: () => console.log('Tour completed!'),
}}
>
<App />
</TourProvider>Related
<TourKitProvider>— global wrapper for multiple tours; nest<TourProvider>inside.useTour— read tour state and call actions from descendants of this provider.useTourContext— low-level context accessor when you need more thanuseTourexposes.- Diagnostic engine — set
diagnoseon this provider to see why a tour didn't fire. - Tour types reference — every field on the
tourprop. - Persistence guide — configure how completion state survives reloads.
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.