JavaScript
Guide your users through a tour of your app

Shepherd

Shepherd is maintained by Ship Shape. Contact us for Ember.js consulting, development, and training for your project.

Install

JS Framework Wrappers

We strive to make it easy to use Shepherd in all the major frameworks, and have written wrappers to facilitate this.

• angular-shepherd
• ember-shepherd
• react-shepherd
• vue-shepherd

Install Directly

Dependencies

• Tippy.js

Installing via npm will bring in the above dependencies as well.

npm

npm install shepherd.js --save

yarn

yarn add shepherd.js

Usage

let tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shadow-md bg-purple-dark',
    scrollTo: true
  }
});

tour.addStep('example', {
  title: 'Example Shepherd',
  text: 'Creating a Shepherd is easy too! Just create ...',
  attachTo: '.hero-example bottom',
  advanceOn: '.docs-link click'
});

tour.start();

API documentation

Demo

Contributing

We encourage contributions of all kinds. If you would like to contribute in some way, please review our guidelines for contributing.

License

MIT License