import { Tour, TourStep } from '@tour-kit/react';

<Tour
  id="onboarding"
  onComplete={() => console.log('Done!')}
>
  <TourStep target="#btn" content="Click here" />
  <YourAppContent />
</Tour>

import { Tour, TourStep, TourCard, TourOverlay } from '@tour-kit/react';

function App() {
  return (
    <Tour
      id="welcome-tour"
      autoStart={false}
      keyboard={{ enabled: true, trapFocus: true }}
      spotlight={{ padding: 8, borderRadius: 4 }}
      onStart={() => analytics.track('tour_started')}
      onComplete={() => analytics.track('tour_completed')}
      onSkip={() => analytics.track('tour_skipped')}
    >
      <TourStep
        target="#header"
        title="Welcome!"
        content="Let's get started with a quick tour."
        placement="bottom"
      />
      <TourStep
        target="#sidebar"
        title="Navigation"
        content="Use the sidebar to explore features."
        placement="right"
      />
      <TourOverlay />
      <TourCard />
      <MainContent />
    </Tour>
  );
}

import { useTour } from '@tour-kit/react';

function StartButton() {
  const { start, isActive } = useTour('welcome-tour');

  return (
    <button onClick={() => start()} disabled={isActive}>
      Start Tour
    </button>
  );
}