OnboardJS

Stop Reinventing the Onboarding Wheel. Start Building.

Your users need smooth flows. You need clean code, faster. OnboardJS handles the messy state stuff so that you can focus on building.

Get startedView on GitHub
WelcomeStep.tsx
stepsConfig.ts
function WelcomeStep() {
  const { next } = useOnboarding()
  return (
    <div>
      <button onClick={next}>Next</button>
    </div>
  )
}

Introduction

Installation

How to install and use OnboardJS in your app.

Install the packages

Get started with OnboardJS by installing the necessary packages into your project. OnboardJS is designed to be modular, allowing you to pick the parts you need. For most React applications, you'll want the core engine and the React bindings.

The two primary packages you'll need are:

  • @onboardjs/core: The main engine that handles the logic, state management, and flow control of your onboarding sequences.
  • @onboardjs/react: Provides React hooks and components (like the OnboardingProvider and useOnboarding hook) to easily integrate the core engine into your React application.
bash
1 lines
1npm install @onboardjs/core @onboardjs/react

(Optional) Typescript support

OnboardJS is written in TypeScript and includes type definitions. If you're using TypeScript in your project, you'll get type safety and autocompletion out of the box. No extra type packages are needed for @onboardjs/core and @onboardjs/react.

What's Next?

With OnboardJS installed, you're ready to start building your onboarding flows!

Previous
Getting started
Next
What is OnboardJS?