Onboarding Tour
NewPro
A guided tour that dims the page, cuts out each target and walks a tooltip from one to the next.
Customize
#ff784f
0.72
14px
Auto-advance
Cover the page
When to use it
- First-run walkthroughs in a new dashboard or editor
- Announcing a redesigned screen or a new feature to existing users
- Guided setup that points at the next thing to click
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 486
Installation
Onboarding Tour is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy onboarding-tour.tsx into components/ui and run npm install motion.
Usage
import { OnboardingTour } from "@/components/ui/onboarding-tour";
const [open, setOpen] = useState(true);
<OnboardingTour
open={open}
onOpenChange={setOpen}
steps={[
{ target: "#new-report", title: "Start here", content: "Create a report from any saved view." },
{ target: "#stats", title: "Your numbers", content: "These update every minute.", placement: "bottom" },
]}
/>Props
20 properties| Property | Type | Default | Description |
|---|---|---|---|
| steps | TourStep[] | — | Steps in order: { target?, title, content?, placement?, padding?, radius? }. Target is a selector, element or ref; without one the step is centered. |
| open | boolean | — | Whether the tour is running. |
| onOpenChange | (open: boolean) => void | — | Called when the tour finishes or is quit. |
| step | number | — | Current step, for controlled use. |
| defaultStep | number | 0 | First step when uncontrolled. Each opening starts here. |
| onStepChange | (step: number) => void | — | Called when the user moves to another step. |
| onFinish | () => void | — | Called when the last step is confirmed. |
| onSkip | (step: number) => void | — | Called with the current step when the tour is quit early. |
| color | string | "#ff784f" | Accent for the ring, progress and primary button. |
| overlayColor | string | "#070606" | Color of the dimmed page. |
| dim | number | 0.72 | How strongly the page is dimmed, from 0 to 1. |
| padding | number | 8 | Space between the target and the cut-out, in pixels. |
| radius | number | 14 | Corner radius of the cut-out, in pixels. |
| interactive | boolean | false | Let the pointer reach the highlighted element. |
| closeOnOverlay | boolean | false | Clicking the dimmed area quits the tour. |
| scrollIntoView | boolean | true | Scroll a target that is out of view to the middle of the screen. |
| autoFocus | boolean | true | Move focus to the tooltip when the tour opens. |
| container | HTMLElement | null | — | Portal target. Defaults to document.body and covers the viewport; an element covers only that element. |
| labels | TourLabels | — | Button and progress text: { next?, back?, done?, skip?, progress? }. |
| className | string | — | Extra classes for the tooltip. |
Dependencies: motion