Onborda

An onboarding wizard flow for Next.js powered by framer motion

Tour - GuideNext.js
uixmat/onbordaonborda.devonborda

README

Onborda - Next.js onboarding flow

Onborda is a lightweight onboarding flow that utilises framer-motion for animations and tailwindcss for styling. Fully customisable pointers (tooltips) that can easily be used with shadcn/ui for modern web applications.

- Demo - onborda.vercel.app
- Demo repository


Getting started

  1. ```bash
  2. # npm
  3. npm i onborda
  4. # pnpm
  5. pnpm add onborda
  6. # yarn
  7. yarn add onborda
  8. ```

Global layout.tsx

  1. ```tsx
  2. <OnbordaProvider>
  3.   <Onborda steps={steps}>
  4.     {children}
  5.   </Onborda>
  6. </OnbordaProvider>
  7. ```

Components & page.tsx

Target anything in your app using the elements id attribute.
  1. ```tsx
  2. <div id="onborda-step1">Onboard Step</div>
  3. ```

Tailwind config

Tailwind CSS will need to scan the node module in order to include the classes used. See configuring source paths for more information about this topic.

Note _You only require this if you're not using a custom component.


  1. ```ts
  2. const config: Config = {
  3.   content: [
  4.     './node_modules/onborda/dist/**/*.{js,ts,jsx,tsx}' // Add this
  5.   ]
  6. }
  7. ```

Custom Card

If you require greater control over the card design or simply wish to create a totally custom component then you can do so easily.

PropTypeDescription
|---------------|------------------|----------------------------------------------------------------------|
`step``Object`The
`currentStep``number`The
`totalSteps``number`The
`nextStep`|
`prevStep`|
`arrow`|

  1. ```tsx
  2. "use client"
  3. import type { CardComponentProps } from "onborda";

  5. export const CustomCard = ({
  6.   step,
  7.   currentStep,
  8.   totalSteps,
  9.   nextStep,
  10.   prevStep,
  11.   arrow,
  12. }: CardComponentProps) => {
  13.   return (
  14.     <div>
  15.       <h1>{step.icon} {step.title}</h1>
  16.       <h2>{currentStep} of {totalSteps}</h2>
  17.       <p>{step.content}</p>
  18.       <button onClick={prevStep}>Previous</button>
  19.       <button onClick={nextStep}>Next</button>
  20.       {arrow}
  21.     </div>
  22.   )
  23. }
  24. ```


Step object


PropTypeDescription
|----------------|-------------------------------|---------------------------------------------------------------------------------------|
`icon``React.ReactNode`,An
`title``string`The
`content``React.ReactNode`The
`selector``string`A
`side``"top"`,Optional.
`showControls``boolean`Optional.
`pointerPadding``number`Optional.
`pointerRadius``number`Optional.
`nextRoute``string`Optional.
`prevRoute``string`Optional.

Note _Both nextRoute and prevRoute have a 500ms delay before setting the next step, a function will be added soon to control the delay in case your application loads slower than this._


Example steps


  1. ```tsx
  2. [
  3.   {
  4.     icon: <>��</>,
  5.     title: "Step 1",
  6.     content: <>This is the first step</>,
  7.     selector: "#onborda-step1",
  8.     side: "top",
  9.     showControls: true,
  10.     pointerPadding: 10,
  11.     pointerRadius: 10,
  12.     nextRoute: "/foo",
  13.     prevRoute: "/bar"
  14.   }
  15. ]
  16. ```

Onborda Props


PropertyTypeDescription
|-----------------|----------------------------|---------------------------------------------------------------------------------------|
`children``React.ReactNode`Your
`steps``Array[]`An
`showOnborda``boolean`Optional.
`shadowRgb``string`Optional.
`shadowOpacity``string`Optional.
`customCard``React.ReactNode`Optional.


  1. ```tsx
  2. <Onborda
  3.   steps={steps}
  4.   showOnborda={true}
  5.   shadowRgb="55,48,163"
  6.   shadowOpacity="0.8"
  7.   cardComponent={CustomCard}
  8. >
  9.   {children}
  10. </Onborda>
  11. ```