@gfazioli/mantine-onboarding-tour
Advanced tools
A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.
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-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';
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>
);
}
1.0.16 (2024-06-10)
FAQs
A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.
The npm package @gfazioli/mantine-onboarding-tour receives a total of 7 weekly downloads. As such, @gfazioli/mantine-onboarding-tour popularity was classified as not popular.
We found that @gfazioli/mantine-onboarding-tour demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.