Onborda

Give your application the onboarding it deserves with Onborda product tour for Next.js 🪄✨

~ pnpm install onborda

Next.js 13^

Onborda is built for Next.js applications and is designed to work with all projects using v13^ seemlessly and easily navigate between steps in your tour across routes.

Customisable

Onborda pointers are fully customizable, you can use the default styles out of the box or customize it to fit your application, works perfectly with Shadcn UI and Tailwind CSS.

Framer Motion

By taking advantage of framer motion animations, Onborda provides users with an immersive experience as they tour your application.

Steps

Steps are the core of Onborda, they are the features you wish to introduce your users to when showcasing your application for the first time. To give you more control over the look and feel, Onborda provides you with an array of options to customize each step.

[
  {
    icon: <>👋</>,
    title: "Step 1",
    content: <>This is the first step</>,
    selector: "#onborda-step1",
    side: "top",
    showControls: true,
    pointerPadding: 10,
    pointerRadius: 10,
    nextRoute: "/foo",
    prevRoute: "/bar"
  }
]

// YourCard.tsx
<div>
  <h1>{step.icon} {step.title}</h1>
  <h2>{currentStep} of {totalSteps}</h2>
  <p>{step.content}</p>
  <button onClick={prevStep}>Previous</button>
  <button onClick={nextStep}>Next</button>
  {arrow}
</div>

Custom pointer

Pointers are the visual indicators (or tooltips) that guide users through the application. Onborda let's you specify a custom component to give you full control over the look and feel of the pointer.

Provider

The Onborda provider is a wrapper component that provides the context for the Onborda component to work. It takes in the steps array and other options to customize the look and feel of the tour. You can set the visibility and define a custom card.

// layout.tsx
<OnbordaProvider>
  <Onborda  
    showOnborda
    steps={steps} 
    cardComponent={YourCard}
    shadowRgb="255, 0, 0"
    shadowOpacity="0.5"
  >
    {children}
  </Onborda>
</OnbordaProvider>

Made by uixmat