Shepherd.js Demo

Highly customizable tours with advanced positioning powered by Floating UI

Welcome to Shepherd.js

Shepherd.js is known for its flexibility and powerful positioning engine. Built on top of Floating UI (formerly Popper.js), it can handle even the most complex layouts with ease.

Customization

Shepherd.js allows deep customization of every aspect of your tour. You can style buttons, add custom classes, and even inject your own HTML content.

Smart Positioning

Floating UI automatically adjusts tooltip positions to stay visible, even when elements are near screen edges. This follows the Constraint-Based Design principle.

Interactive Features

Modal Overlays

Darken everything except the highlighted element to focus user attention

Custom Buttons

Define any number of buttons with custom actions and styles

Step Hooks

Execute custom code before/after each step for advanced workflows

🎊 Excellent Work!

You've experienced Shepherd.js's powerful features. Its flexibility makes it ideal for complex applications that need fine-grained control over the onboarding experience.

Advanced Feature: Shepherd.js uses Floating UI for intelligent positioning, which implements Fitts's Law by ensuring tooltips are always easily accessible.

Best For: Complex enterprise applications, custom styling requirements, and scenarios where you need maximum control over tour behavior.