Shepherd

Shepherd is a JavaScript library for guiding users through a tour of a web app. It can be used with React, Ember, Angular, Vue and plain JavaScript projects.

You create a tour object, add steps that attach to elements on the page, and start the tour. Each step can show buttons such as Back and Next, and each button can run your own action. The library handles the positioning of each step, and its styles are kept minimal so you can match the tour to your own design.

• Steps attached to page elements
• Buttons for back, next and custom actions
• Keyboard navigation and focus trapping
• ARIA attributes for accessibility
• Minimal styles that are easy to customize

Shepherd suits front end developers who want to add onboarding tours to a web application. It is a good fit for teams that need tours to work with keyboards and screen readers, and for teams that build in several frameworks and want one library for all of them.

Shepherd is a library you add to your own project, so there is no hosted fee for the library itself. The project's site lists documentation, a demo and a contact page. Check the repository for license terms before you use it in a commercial product, and plan how the tour steps will be kept in sync as the interface changes.