Annotate
Code walkthrough builder for devrels, educators, and engineers
Open-Source Projects
Discover top open-source software, updated regularly with real-world adoption signals.
Discover top open-source software, updated regularly with real-world adoption signals.
Guided tours and onboarding for React applications
A modular toolkit for building interactive product tours and user onboarding flows in React, with customizable masks, popovers, and step-by-step walkthroughs.
Reactour is a composable library that helps developers create guided tours and onboarding experiences for React applications. Built as a collection of modular packages, it provides the building blocks needed to highlight UI elements, display contextual information, and walk users through features step-by-step.
The toolkit consists of four core packages: @reactour/tour orchestrates multi-step tours from configuration arrays; @reactour/mask creates customizable overlays to focus attention on specific elements; @reactour/popover attaches content to elements or viewport positions; and @reactour/utils provides shared helper functions. This separation allows developers to use only what they need or compose custom solutions.
Whether you're building first-run experiences, feature announcements, or contextual help systems, Reactour adapts to your workflow. The TypeScript-first codebase ensures type safety, while the customizable components integrate seamlessly with existing design systems. Ideal for SaaS platforms, dashboards, and complex web applications where user guidance improves adoption and reduces support overhead.
When teams consider Reactour, these hosted platforms usually appear on the same shortlist.
Looking for a hosted option? These are the services engineering teams benchmark against before choosing open source.
SaaS Product Onboarding
Guide new users through core features on first login, reducing support tickets and improving activation rates
Feature Announcement Tours
Highlight new functionality to existing users with contextual popovers that drive feature adoption
Admin Dashboard Walkthroughs
Help administrators navigate complex interfaces with step-by-step tours of critical workflows
Contextual Help Systems
Provide on-demand guidance by triggering tours from help icons or menu items throughout the application
The repository uses TypeScript and modern React patterns, but specific version requirements should be verified in the package.json files or official documentation at reactour.dev.
Yes, the modular architecture allows you to use @reactour/mask or @reactour/popover independently for custom implementations without the tour orchestration.
Both the mask and popover components are designed to be customizable, accepting props and styles to match your design system. Refer to the documentation for specific customization options.
The components work with viewport positioning and element attachment, making them compatible with responsive designs, though testing across breakpoints is recommended.
Reactour emphasizes modularity and composability, allowing developers to use individual packages or build custom solutions rather than relying on a monolithic tour framework.
Project at a glance
ActiveLast synced 4 days ago
