This component is created on top of the Mantine library.
Mantine OnboardingTour is a flexible onboarding system for React apps built on Mantine. You declare an array of steps (OnboardingTourStep) where header, title, content, and footer can be strings, React nodes, or functions that receive the tour controller for dynamic rendering. Each step can customize focus and reveal behavior via FocusReveal props, including overlay, scroll-into-view, transitions, and popover configuration. Targets can be matched with data-onboarding-tour-id or wrapped using OnboardingTour.Target when elements live outside the tour’s children. A controller exposes current step state and actions (start, next, prev, end), while advanced hooks let you swap popover content, implement custom steppers, and tailor overlays or scroll containers for complex layouts, making product tours both accessible and highly customizable.
npm install @gfazioli/mantine-onboarding-touror
yarn add @gfazioli/mantine-onboarding-tourAfter installation import package styles at the root of your application:
import '@gfazioli/mantine-onboarding-tour/styles.css';import { OnboardingTour, type OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
function Demo() {
const onboardingSteps: OnboardingTourStep[] = [
{
id: 'welcome',
title: 'Welcome to the Onboarding Tour Component',
content:
'This is a demo of the Onboarding Tour component, which allows to create onboarding experiences for your users.',
},
{
id: 'my-button',
title: 'Features',
content: 'You can select any component by using the `data-onboarding-tour-id` attribute',
},
];
return (
<OnboardingTour tour={onboardingSteps} started={started}>
<Title data-onboarding-tour-id="welcome" order={4}>
A simple example of the Onboarding Tour component
</Title>
<Button data-onboarding-tour-id="my-button">See all testimonials</Button>
</OnboardingTour>
);
}