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

Guide your users through a tour of your app

Accessibility

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!

Demo

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' }
		}
	});

	tour.addStep({
		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() {
					return this.next();
				},
				text: 'Next'
			}
		],
		id: 'creating'
	});

	tour.start();
					

Brands that use Shepherd