Mantine OnboardingTour

Responsive Demo

Resize the browser!

Sidebar

Responsive Onboarding Tour

Each step in this tour uses different responsive breakpoints for popover position. Resize the browser window and navigate through the steps to see the popover jump between positions at different screen widths.

base: bottom, sm: right

Feature Card

The popover appears at the bottom on mobile and to the right on sm+.

base: top, md: bottom

Analytics Card

The popover is on top on small screens, at the bottom on md+.

base: bottom, lg: left

Settings Card

The popover only switches at the lg breakpoint.

Multi-breakpoint positioning

This step uses three breakpoints: top on base, right on sm, top again on lg. Widen and narrow the browser to see all three positions.

base: top / sm: right / lg: top

This Mantine UI extension component has been created to extend the capabilities of Mantine UI. Feel free to use it and contribute to it. Don't forget to star it on GitHub. And if you wish, you can also follow me on Twitter. Obviously, you can also donate to support the development of this component.