onborda Documentation

Onborda supports multiple tours. You can define an object containing multiple tours, where each tour has its own steps array.

{
  tour: "firsttour",
  steps: [
    Step
  ],
  tour: "secondtour",
  steps: [
    Step
  ]
}

To use Onborda, wrap your application in the OnbordaProvider and then wrap your content with the Onborda component, passing in your defined steps.

<OnbordaProvider>
  <Onborda steps={steps}>
    {children}
  </Onborda>
 </OnbordaProvider>

Onborda uses the id attribute of HTML elements to identify where tooltips/pointers should be positioned. Ensure the selector in your step object matches the id of the target element.

<div id="onborda-step1">Onboard Step</div

Install the onborda package using your preferred package manager.

# npm
npm i onborda
# pnpm
pnpm add onborda
# yarn
yarn add onborda

If you are not using a custom component, you must update your tailwind.config.ts to include the Onborda node module in the content array so that the required styles are generated.

const config: Config = {
  content: [
    './node_modules/onborda/dist/**/*.{js,ts,jsx,tsx}' // Add this
  ]
}

You can replace the default TailwindCSS card with a custom component by passing it to the cardComponent prop of <Onborda />. Your component must accept CardComponentProps.

"use client"
import type { CardComponentProps } from "onborda";

export const CustomCard = ({
  step,
  currentStep,
  totalSteps,
  nextStep,
  prevStep,
  arrow,
}: CardComponentProps) => {
  return (
    <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>
  )
}

A Step object defines the content and behavior for a single point in a tour.

Properties:

• icon: (Optional) React.ReactNode, string, or null. Icon displayed with the title.
• title: string. The step title.
• content: React.ReactNode. The main body text.
• selector: string. The CSS selector (e.g., #id) to target.
• side: (Optional) `

The following types are exported to help you define your onboarding configuration and custom components:

• OnbordaProps: The props accepted by the Onborda component.
• Step: The definition of an individual step in the onboarding flow.
• OnbordaContextType: The shape of the context provided by OnbordaProvider.
• CardComponentProps: The props passed to custom card components.

The OnbordaProps interface defines the configuration for the main onboarding component.

Key properties:

• steps: An array of Tour objects. Each Tour contains a tour name (string) and an array of Step objects.
• children: The React children to be wrapped by the onboarding logic.
• interact: Boolean to enable/disable interaction.
• showOnborda: Boolean to control visibility.
• shadowRgb: String for the shadow color.
• shadowOpacity: String for the shadow opacity.
• cardTransition: A Transition object from framer-motion to control card animations.
• cardComponent: A custom React component to replace the default card UI, which must accept CardComponentProps.

To customize the visual appearance of the onboarding cards, provide a custom component to the cardComponent prop in Onborda. Your component must accept the following props:

• step: The current Step object.
• currentStep: The index of the current step.
• totalSteps: The total number of steps in the tour.
• nextStep: Function to advance to the next step.
• prevStep: Function to go back to the previous step.
• arrow: A JSX.Element representing the pointer arrow.