OnboardJS
Github

Headless Onboarding for React. No Overlays. Full Control.

State management, analytics, and persistence built-in. Skip the tour library limitations. Deploy custom flows in minutes.

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

Progress Example

This example demonstrates how to use the Progress component to display the current progress of the onboarding process. The progress is updated based on the state of the onboarding flow.

Dependencies

@shadcn/progress

With step number

You can also display the current step number alongside the progress bar.

Step 3 of 4

With segments

You can modify the Shadcn Progress component to support segmented progress bars, which can be useful for displaying multiple steps or stages in a process.

Step 4 of 4