Onborda

Navigation

Using the app router

Import onborda

Simply import Onborda and the Provider directly into your layout.tsx file.

import { Onborda, OnbordaProvider } from "onborda";

Using the provider

Wrap your app in the OnbordaProvider and Onborda components.

<OnbordaProvider>
  <Onborda
    steps={steps}
    showOnborda={true}
    shadowRgb="55,48,163"
    shadowOpacity="0.8"
    cardComponent={FooCard}
    cardTransition={{ duration: 2, type: "tween" }}
  >
    {children}
  </Onborda>
</OnbordaProvider>

Property	Type
`children`	`React.ReactNode`
`steps`	`Array[]`
`showOnborda`	`boolean`
`shadowRgb`	`string`
`shadowOpacity`	`string`
`customCard`	`React.ReactNode`
`cardTransition`	`Transition`

Components

Target anything in your app using the elements id attribute.

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