@gfazioli/mantine-onboarding-tour

Mantine OnboardingTour Component

https://github.com/user-attachments/assets/93d39052-90be-45d7-a470-67f8727bc096

Overview

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.

Installation

npm install @gfazioli/mantine-onboarding-tour

or

yarn add @gfazioli/mantine-onboarding-tour

After installation import package styles at the root of your application:

import '@gfazioli/mantine-onboarding-tour/styles.css';

Usage

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>
  );
}