shipshapecode/shepherd
Shepherd
Shepherd is a client-side onboarding framework and interactive product tour library used to create step-by-step guided walkthroughs. It functions as a UI guided tour system and DOM element highlighting tool that displays instructional overlays and tooltips to guide users through a web application interface.
The system features a dynamic layout engine for anchoring tooltips to target elements and preventing screen overflow. It supports multi-element highlighting to draw attention to several UI components simultaneously and includes focus trapping to restrict keyboard navigation to active tour modals.
The framework provides capabilities for tour orchestration, including conditional step triggering based on application state and the persistence of user progress and completion states within the browser. It also includes customizable interaction controls for step buttons and keyboard navigation support.
Features
- Onboarding and Walkthroughs - Offers a comprehensive framework for building interactive, step-by-step guided tours and user onboarding flows.
- Interactive Walkthroughs - Provides an interactive system for building step-by-step guided walkthroughs of application workflows.
- Tour State Management - Coordinates tour progress and instance methods across the application using shared state management.
- Guided Tour Components - Provides interactive overlays and tooltips that guide users through a UI via a series of steps.
- Element Highlighting Utilities - Provides visual utilities to isolate and emphasize specific DOM elements during interactive tours.
- Element Positioning - Updates the coordinate location of tooltips relative to target elements to avoid screen overflow.
- Floating Element Positioning - Calculates coordinate offsets for tooltips relative to target elements to prevent screen overflow.
- Onboarding Frameworks - Provides a lightweight framework for managing instructional onboarding sequences for new users.
- Product Tour Libraries - Provides a comprehensive library for building interactive product tours that highlight specific UI features.
- Focus Traps - Constrains keyboard navigation to the active tour modal to prevent interaction with background page elements.
- Multi-Element Highlighting - Provides the ability to highlight several distinct UI components simultaneously to guide user attention during a single instructional step.
- Keyboard Navigation - Enables advancing or dismissing tour steps via keyboard shortcuts for improved accessibility.
- Onboarding Progress Tracking - Saves a user's tour completion state locally to prevent repetitive walkthroughs across sessions.
- Conditional Step Execution - Allows tour steps to be executed only when specific logic or application state requirements are met.
- Conditional Step Triggers - Allows tour steps to be displayed only when specific function-based triggers are met.
