shepherd.js

Guide your users through a tour of your app.

Usage no npm install needed!

<script type="module">
  import shepherdJs from 'https://cdn.skypack.dev/shepherd.js';
</script>

README

Shepherd.js Logo

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

Download count all time npm npm bundle size

Guide your users through a tour of your app

Browsers support

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

Documentation

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

Projects Using Shepherd

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

JS Framework Wrappers

ember-shepherd

Ember addon for the site tour library Shepherd

angular-shepherd

An Angular wrapper for the site tour library Shepherd

react-shepherd

A React wrapper for the site tour library Shepherd

vue-shepherd

A Vue wrapper for the site tour library Shepherd

Rails gems

abraham

Rails engine that generates and tracks Shepherd tours within an application

Websites and Apps

SimplePlanner

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.

Brokermate

Brokermate uses Shepherd to guide users through initial setup steps.

Snapsure

Snapsure uses Shepherd to help photographers learn how to set up alerts for their desired picture-perfect weather conditions.

Drupal

The Drupal CMS uses Shepherd to offer tours of it's core modules, and allows developers to add Tours to their custom and contributed modules.

Your Project Here

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

License