First Step

Initial tour step with a highlighted trigger element and instructions.

Step 1 of 3

Create a Project

Click here to start a new project. You can add tasks and collaborators later.

Mid Step

Middle step with Back and Next navigation buttons.

Team Members
Step 2 of 3

Invite Your Team

Add collaborators to your project. They will receive an email invitation.

Final Step

Last step in the tour with a Finish button to complete onboarding.

Dashboard
Step 3 of 3

View Your Dashboard

Your dashboard shows project progress, recent activity, and team updates.

Usage

<Tour step="1" total="3"> <h4>Create a Project</h4> <p>Click here to start a new project.</p></Tour><Tour step="2" total="3"> <h4>Invite Your Team</h4> <p>Add collaborators to your project.</p></Tour>

Props

PropTypeDefaultDescription
stepint1Current step number
totalint1Total number of steps in the tour
childrencontent-Step content (title and description)