🧭 NFSFU234TourGuide

NFSFU234TourGuide is your plug-and-play React library for building clean, interactive, and customizable onboarding experiences. Skip the hassle of building tooltips or modals from scratch — this library does the heavy lifting, so you can focus on building dope UIs.

🚀 Why Use It?

• 🎯 Zero to onboarding in minutes
• 🧱 Modular & composable tour steps
• 🌈 Built with Tailwind for easy styling
• 🌓 Dark mode support baked in
• 🔧 Fully customizable — control what shows, when, and how
• 🧠 Smart positioning & user experience design built in

📋 Prerequisites

Before installing nfsfu234-tour-guide, make sure your project has the following peer dependencies installed:

npm install react@^19.0.0 react-dom@^19.0.0 tailwindcss@^4 framer-motion@^12.12.1 lucide-react@^0.511.0

Or with Yarn:

yarn add react@^19.0.0 react-dom@^19.0.0 tailwindcss@^4 framer-motion@^12.12.1 lucide-react@^0.511.0

⚠️ Note: These are peer dependencies and are required for the library to work properly. They will not be automatically installed with nfsfu234-tour-guide.

If you're using Tailwind CSS, ensure it's properly configured in your project. See the Tailwind CSS docs for setup guidance.

📦 Installation

npm install nfsfu234-tour-guide

or

yarn add nfsfu234-tour-guide

⚙️ Basic Usage with Callbacks

import Tour from 'nfsfu234-tour-guide';

const steps = [
  { target: '#step1', content: 'This is the first step of your tour.' },
  { target: '#step2', content: 'Here’s another cool feature!' },
  { target: '#submit-btn', content: 'Click here when you’re done.' },
];

export default function MyApp() {
  return (
    <div>
      <TourGuide
        steps={steps}
        start={true}
        theme="light"
        onFinish={() => {
          console.log('Tour finished — trigger follow-up actions or analytics.');
        }}
        onSkip={() => {
          console.log('Tour skipped — clean up or log event here.');
        }}
        onStepChange={(currentStep) => {
          console.log(`Moved to step ${currentStep} — update state or UI accordingly.`);
        }}
      />
      {/* Your app UI below */}
    </div>
  );
}

☝️ Heads up: Wrap TourGuide around your app or the relevant UI section. Use IDs or classes that exist in the DOM before the tour starts for reliable targeting.

🧩 Props

📚 Docs & Examples

• 🔗 Documentation Site: Coming soon
• 🛠️ Examples Repo: Coming soon
• 📦 NPM Package: nfsfu234-tour-guide

🧪 Dev Tips

• Target elements by id or className that exist before the tour starts.
• Use callbacks to hook in analytics, UI updates, or state management.
• You can dynamically control tour visibility with start.

📝 License

MIT — free to use, tweak, and contribute.
See the LICENSE for details.

💡 Final Word

NFSFU234TourGuide is built for devs who want onboarding done right — clean UX, no clutter, full control.
Stop wasting time on half-baked solutions. Plug in, guide your users, and get back to building your vision.