Guide your users through a tour of your app.


Shepherd has full keyboard navigation support, focus trapping, and a11y compliance via aria attributes.

Highly Customizable

Shepherd's styles are kept minimal, allowing you to easily customize the look and feel, but still give you enough to drop in and be ready to go quickly.

Framework Ready

Shepherd is ready to drop into your application using React, Ember, Angular, Vue.js, ES Modules, or plain Javascript!


01. How to Include

02. Example

            const tour = new Shepherd.Tour({
              defaultStepOptions: {
                cancelIcon: {
                  enabled: true
                classes: 'class-1 class-2',
                scrollTo: { behavior: 'smooth', block: 'center' }

              title: 'Creating a Shepherd Tour',
              text: `Creating a Shepherd tour is easy. too!\
              Just create a \`Tour\` instance, and add as many steps as you want.`,
              attachTo: {
                element: '.hero-example',
                on: 'bottom'
              buttons: [
                  action() {
                    return this.back();
                  classes: 'shepherd-button-secondary',
                  text: 'Back'
                  action() {
                  text: 'Next'
              id: 'creating'


Brands that use Shepherd