Quick start

Install and use the Tour


This documentation is for the latest releases, which uses npm scoped package (opens in a new tab) @reactour. The original reactour package is now on branch v1 and its documentation can be found here (opens in a new tab).

Install @reactour/tour (opens in a new tab)

npm i @reactour/tour


1. Add the TourProvider

This should be at the root of your Application, passing the steps of the elements to highlight during the Tour.

import { TourProvider } from '@reactour/tour'
  <TourProvider steps={steps}>
    <App />
const steps = [
    selector: '.first-step',
    content: 'This is my first Step',
  // ...

2. Control the Tour

Then somewhere down the Application tree, control the Tour using useTour hook.

import { useTour } from '@reactour/tour'
function App() {
  const { setIsOpen } = useTour()
  return (
      <p className="first-step">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      <button onClick={() => setIsOpen(true)}>Open Tour</button>