Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
November 9, 2023 10:37
November 9, 2023 10:37
October 6, 2023 10:04
October 6, 2023 10:04
October 6, 2023 10:04
November 9, 2023 10:37
November 9, 2023 10:37
October 6, 2023 10:04
March 19, 2018 22:06
November 9, 2023 10:37
April 17, 2018 22:16
October 23, 2023 11:51
November 9, 2023 10:38
November 9, 2023 10:38

React Joyride

CI Quality Gate Status Coverage

Joyride example image

Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses react-floater for positioning and styling.
And you can use your own components too!

View the demo here (or the codesandbox examples)

Read the docs

Talk about it on the Discussions board.


npm i react-joyride

Getting Started

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
        target: '.my-first-step',
        content: 'This is my awesome feature!',
        target: '.my-other-step',
        content: 'This another awesome feature!',

  render () {
    const { steps } = this.state;

    return (
      <div className="app">

If you need to support legacy browsers you need to include the scrollingelement polyfill.

Sponsored by


React Joyride is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.


Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes

Now clone and run:

npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start

Start coding! 🎉