Shepherd — Guide your users through a tour of your app.

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

	<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
	<script type="module" src="shepherd.js/dist/shepherd.mjs"></script>

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