Onborda
Give your application the onboarding it deserves with Onborda product tour for Next.js 🪄✨
~ pnpm install onborda
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.
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.
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>