Guide your users through a tour of your app.





npm install shepherd.js --save


yarn add shepherd.js

Install with Eager

Note: Eager is now Cloudflare Apps

We will eventually make this work again, but it probably currently does not.


First create a new Tour instance for your tour:

const tour = new Shepherd.Tour({
  defaults: { 
    classes: 'shepherd-theme-arrows',
    scrollTo: true

The defaults option allows you to specify any options which should be applied to all this tour’s steps by default.

Next, add your steps:

tour.addStep('example-step', {
  text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.',
  attachTo: '.example-css-selector bottom',
  classes: 'example-step-extra-class',
  buttons: [
      text: 'Next',

Finally, to start the tour, just call start on your Tour instance:



Global Shepherd Object

Shepherd exposes a single object onto the window, Shepherd.

That global object fires several events to let you link up actions with events occurring in any tour:


The global Shepherd fires the following events whenever a Tour instance fires them. It adds to the object passed to the event handlers a tour key pointing to the instance which fired the event:

Current Tour

The global Shepherd includes a property which is always set to the currently active tour, or null if there is no active tour:

Tour Instances


You create a Tour object for each tour you’d like to create.

Tour’s constructor accepts a hash of options:

const myTour = new Shepherd.Tour(options);
Tour Options
Tour Methods
Tour Events

Steps are instances of the Step object. They are generally created by the Tour::addStep method, which returns the Step instance it created.


Step Options
Step Methods
Step Events

Please note that complete and cancel are only ever triggered if you call the associated methods in your code.

Advancing on Actions

You can use the advanceOn option, or the Next button, to advance steps. If you would like however to have a step advance on a complex user action, you can do the following:

const myStep = myTour.addStep('my-step', options);

yourApp.on('some-event', () => {
  if (myStep.isOpen()){;

It’s strongly recommended that you use some sort of event mediator to connect your app’s actions with Shepherd, to prevent having to sprinkle Shepherd code throughout your codebase, and to keep things loosely coupled. You can create a basic mediator if need be using the Evented object which is provided with Shepherd:

const mediator = new Shepherd.Evented();

You can then trigger events in one part of your app:


And listen for them in other areas:

mediator.on('user-create', () => {});

Browser Support

IE9+ and all modern browsers

Projects Using Shepherd

Here we showcase some of the awesome libraries built using Shepherd.


Ember addon for the site tour library Shepherd


SimplePlanner uses Shepherd to help new users get familiar with its collaborative scheduling approach. You do need to sign up via OAuth or email to see the scheduling tour. Check out the Envato Tuts+ Startup Series on its codebase which describes how Simple Planner was built.

Your Project Here

If you have a cool open-source library built on Shepherd, PR this doc.