mantine-onboarding-tour-configuration.mp4
This component is created on top of the Mantine library.
It allows you to create a onboarding-tour effect with overlays, popovers, and onboarding tours, enhancing element visibility and interactivity.
👉 You can find more components on the Mantine Extensions Hub library.
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>
);
}