Package Exports

onboarder
onboarder/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (onboarder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Onboarder

A modern, customizable onboarding package for React applications using Tailwind CSS and Origin UI.

Features

🎨 Modern and clean UI design
🎯 Easy to implement step-by-step guides
🎭 Customizable themes and styles
⌨️ Keyboard navigation support
📱 Mobile-friendly
🔄 Smooth transitions and animations
🎮 Game-like experience

Installation

npm install onboarder
# or
yarn add onboarder

Quick Start

import { OnboardingManager } from "onboarder";

function App() {
  const steps = [
    {
      target: "#welcome",
      content: "Welcome to our app! Let's get started.",
      title: "Welcome",
    },
    {
      target: "#features",
      content: "Here are our main features.",
      title: "Features",
    },
    // Add more steps as needed
  ];

  return (
    <OnboardingManager
      steps={steps}
      onComplete={() => console.log("Onboarding completed!")}
    />
  );
}

Props

Prop	Type	Default	Description
`steps`	`Step[]`	`[]`	Array of steps for the onboarding tour
`onComplete`	`() => void`	-	Callback function when onboarding is completed
`theme`	`Theme`	`defaultTheme`	Custom theme object for styling
`showProgress`	`boolean`	`true`	Whether to show progress indicator
`showSkip`	`boolean`	`true`	Whether to show skip button
`showBack`	`boolean`	`true`	Whether to show back button

Step Object

interface Step {
  target: string; // CSS selector for the target element
  content: string; // Content to display
  title?: string; // Optional title
  placement?: "top" | "bottom" | "left" | "right"; // Tooltip placement
  disableBeacon?: boolean; // Whether to show beacon
}

Customization

Theme

const customTheme = {
  primary: "#007bff",
  secondary: "#6c757d",
  backgroundColor: "#ffffff",
  textColor: "#333333",
  // Add more theme properties
};

<OnboardingManager steps={steps} theme={customTheme} />;

Styling

You can customize the appearance using Tailwind CSS classes:

<OnboardingManager steps={steps} className="custom-onboarding" />

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

onboarder