nextstepjs_multi_step_onboarding_walkthrough_in_nextjs.ts

1import React from 'react';
2import { NextStep, NextStepProvider, Step } from 'nextstepjs';
3
4const steps: Step[] = [
5  {
6    icon: <div>👋</div>,
7    title: 'Welcome to NextStepJS',
8    content: (
9      <div>
10        <p>This is a quickstart guide to get you started with NextStepJS.</p>
11      </div>
12    ),
13    selector: '#step1',
14    side: 'right',
15    showControls: true,
16    showSkip: true,
17  },
18  {
19    icon: <div>🚀</div>,
20    title: 'Fast and Reliable',
21    content: (
22      <div>
23        <p>NextStepJS is designed to be lightweight and easy to use.</p>
24      </div>
25    ),
26    selector: '#step2',
27    side: 'left',
28    showControls: true,
29    showSkip: true,
30  },
31];
32
33const App: React.FC = () => {
34  return (
35    <NextStepProvider>
36      <div className="flex flex-col items-center justify-center min-h-screen">
37        <h1 id="step1" className="text-4xl font-bold mb-8">
38          Welcome to my App
39        </h1>
40        <button
41          id="step2"
42          className="px-4 py-2 bg-blue-500 text-white rounded-md"
43        >
44          Get Started
45        </button>
46        <NextStep steps={steps} />
47      </div>
48    </NextStepProvider>
49  );
50};
51
52export default App;