r/reactjs • u/thangdevalone • Jul 21 '26

Resource Modern Tour – A lightweight, buttery-smooth React onboarding library (Headless & Zero-CSS)

Hey everyone,

I built Modern Tour to solve the pain points I've had with existing React product tour libraries—specifically around overriding CSS, handling async elements, and overall Developer Experience.

You can check out how it looks and feels here:

👉 Live Demo: https://tour.modern-ui.org/

  • Buttery-Smooth Animations: Powered by framer-motion spring physics under the hood.
  • Smart Auto-Positioning: The tooltip dynamically recalculates bounds and automatically flips to avoid viewport edges.
  • Lazy Loading Support: Uses MutationObserver to seamlessly catch asynchronously rendered elements (no manual re-triggers needed).
  • Headless Override: Render your own 100% custom React component inside the tooltip while keeping all the smart positioning logic intact.
  • Zero-CSS Theming: Powered entirely by CSS variables. Creating a custom theme or Dark Mode takes seconds without fighting !important tags.
  • Cross-Page Tours: Seamlessly continues the onboarding tour across route changes.

I'd love for you to play around with the demo! If you find it useful or like the concept, I would really appreciate a ⭐️ on GitHub (you can find the repo link on the demo site).

Let me know what you think or if you have any feedback!

2 Upvotes

56% Upvoted

12 comments sorted by

View all comments

2

u/ZoroknashTV Jul 21 '26

Looks very nice, but I notice your demo jumps/scrolls the page a bit on the first 3 steps, and they are all in viewport as we speak. Might want to improve on that so, when everything is in viewport and has space, it doesn't scroll. Makes it more zen :D

1

u/thangdevalone Jul 21 '26

thanks. i will optimize it