<TourStep
  id="welcome"
  target="#hero"
  title="Welcome!"
  content="This is step one."
  placement="bottom"
  spotlightPadding={8}
/>

// Side placements
placement="top"
placement="bottom"
placement="left"
placement="right"

// With alignment
placement="top-start"
placement="top-end"
placement="bottom-start"
placement="bottom-end"
placement="left-start"
placement="left-end"
placement="right-start"
placement="right-end"

import { useRef } from 'react';

function MyComponent() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <Tour id="my-tour">
      <TourStep
        target={buttonRef}
        title="Click me"
        content="This button does something cool."
      />
      <button ref={buttonRef}>My Button</button>
    </Tour>
  );
}

<TourStep
  target="#form"
  title="Fill the form"
  content="Complete this form to continue."
  beforeLeave={async (context) => {
    // Validate form before moving to next step
    const isValid = await validateForm();
    if (!isValid) {
      throw new Error('Please complete the form');
    }
  }}
/>

<TourStep
  target="#input"
  title="Enter your name"
  content="Type your name in this field."
  interactive={true}
/>

<TourStep
  target="#video"
  title="Watch the video"
  content="Learn more by watching this tutorial."
  data={{
    videoUrl: 'https://example.com/tutorial.mp4',
    duration: 120,
  }}
/>

const { currentStep } = useTour('my-tour');
const videoUrl = currentStep?.data?.videoUrl;