New users do not know where to look. The third Mantine Extensions tutorial is about mantine-onboarding-tour, one of my open-source React components for Mantine: it dims the page and lights up one element at a time, with a popover that explains it. In under two minutes:
install it, and import its styles once
a tour is a list of steps, each with an id, a title and some content
wrap your page in OnboardingTour, and give it the steps and a started value
mark each element with data-onboarding-tour-id; a step that matches no element shows in the middle of the screen
after End, started is still true, so the same button does nothing: pass onOnboardingTourEnd={close} and the tour can run again
withStepCounter shows “1 of 3”; the arrow keys move between steps, and Escape skips the tour
Docs and live demos: gfazioli.github.io/mantine-onboarding-tour
GitHub: gfazioli/mantine-onboarding-tour
All the tutorials, in order: Mantine Extensions Tutorials
Which component should get the next one? Reply and tell me.
