Shepherd is an open source, fully featured, digital adoption platform (DAP) and user on-boarding service.

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

Shepherd makes it simple to create custom user on-boarding tours, trainings and announcements to drive user adoption.

Shepherd enables you to guide users through a custom tour or journey within your app or website. Highly customizable with minimal styles, Shepherd allows for powerful customization while being easy to use. Various frameworks supported including React, Ember, Angular, Vue.js, ES Modules, or plain JavaScript.

See Shepherd Live on our website by clicking on the image:

npm install shepherd.js

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

const tour = new Shepherd.Tour({ useModalOverlay: true });

tour.addStep({
  title: 'Welcome',
  text: 'This step points at the save button.',
  attachTo: { element: '#save', on: 'bottom' },
  buttons: [{ text: 'Done', action: 'complete' }]
});

tour.start();

Steps position themselves with a small built-in engine. Tune the gap, edge distance and flipping with positionOptions: { offset, padding, strategy, flip }. Upgrading from Shepherd 15, which took Floating UI middleware in floatingUIOptions? See the upgrade notes.

Coding agents: read shepherd.js/AGENTS.md, which is also in the npm package.

The Shepherd Standalone Library has been open source since the very beginning. Check out our tutorials here:

If you have an idea or project in mind and would like to engage our team to build a custom tour, training or on-boarding experience, get in touch!

• Website
• Documentation
• Demo
• Discord

We encourage contributions of all kinds. If you would like to contribute in some way, please review our guidelines for contributing. Our release process is mostly automated. For more details, see RELEASE.md.

Rails engine that generates and tracks Shepherd tours within an application

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.

LogSeq uses Shepherd to guide users through initial setup steps.

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

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.

Budibase is an open source application which allows you develop low code applications rapidly and efficiently.This Budibase Shepherd tour plugin allows you to create interative walkthroughs for your application.

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

Shepherd.js is dual-licensed under AGPL-3.0 and a Commercial License.

• Free for open source and non-commercial use under AGPL-3.0
• Commercial license required for commercial products and revenue-generating companies

See LICENSE.md for complete details or visit shepherdjs.dev/pricing to purchase a commercial license.