Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uixmat/onborda
An onboarding wizard flow for Next.js powered by framer motion
https://github.com/uixmat/onborda
framer-motion next nextjs onboarding product react setup tailwindcss tour wizard
Last synced: 28 days ago
JSON representation
An onboarding wizard flow for Next.js powered by framer motion
- Host: GitHub
- URL: https://github.com/uixmat/onborda
- Owner: uixmat
- Created: 2024-03-05T15:12:47.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-03-11T23:41:49.000Z (4 months ago)
- Last Synced: 2024-06-13T07:08:02.203Z (29 days ago)
- Topics: framer-motion, next, nextjs, onboarding, product, react, setup, tailwindcss, tour, wizard
- Language: TypeScript
- Homepage: https://onborda.dev
- Size: 203 KB
- Stars: 374
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Lists
- awesome-shadcn-ui - uixmat/onborda - Give your application the onboarding it deserves with Onborda product tour for Next.js (Libs and Components)
README
# Onborda - Next.js onboarding flow
Onborda is a lightweight onboarding flow that utilises [framer-motion](https://www.framer.com/motion/) for animations and [tailwindcss](https://tailwindcss.com/) for styling. Fully customisable pointers (tooltips) that can easily be used with [shadcn/ui](https://ui.shadcn.com/) for modern web applications.
- **Demo - [onborda.vercel.app](https://onborda.vercel.app)**
- **[Demo repository](https://github.com/uixmat/onborda-demo)**
## Getting started
```bash
# npm
npm i onborda
# pnpm
pnpm add onborda
# yarn
yarn add onborda
```
### Global `layout.tsx`
```tsx
{children}
```
### Components & `page.tsx`
Target anything in your app using the elements `id` attribute.
```tsx
Onboard Step
```
### Tailwind config
Tailwind CSS will need to scan the node module in order to include the classes used. See [configuring source paths](https://tailwindcss.com/docs/content-configuration#configuring-source-paths) for more information about this topic.
> **Note** _You only require this if you're **not using** a custom component.
```ts
const config: Config = {
content: [
'./node_modules/onborda/dist/**/*.{js,ts,jsx,tsx}' // Add this
]
}
```
### 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.
| Prop | Type | Description |
|---------------|------------------|----------------------------------------------------------------------|
| `step` | `Object` | The current `Step` object from your steps array, including content, title, etc. |
| `currentStep` | `number` | The index of the current step in the steps array. |
| `totalSteps` | `number` | The total number of steps in the onboarding process. |
| `nextStep` | | A function to advance to the next step in the onboarding process. |
| `prevStep` | | A function to go back to the previous step in the onboarding process.|
| `arrow` | | Returns an SVG object, the orientation is controlled by the steps side prop |
```tsx
"use client"
import type { CardComponentProps } from "onborda";
export const CustomCard = ({
step,
currentStep,
totalSteps,
nextStep,
prevStep,
arrow,
}: CardComponentProps) => {
return (
{step.icon} {step.title}
{currentStep} of {totalSteps}
{step.content}
Previous
Next
{arrow}
)
}
```
### Step object
| Prop | Type | Description |
|----------------|-------------------------------|---------------------------------------------------------------------------------------|
| `icon` | `React.ReactNode`, `string`, `null` | An icon or element to display alongside the step title. |
| `title` | `string` | The title of your step |
| `content` | `React.ReactNode` | The main content or body of the step. |
| `selector` | `string` | A string used to target an `id` that this step refers to. |
| `side` | `"top"`, `"bottom"`, `"left"`, `"right"` | Optional. Determines where the tooltip should appear relative to the selector. |
| `showControls` | `boolean` | Optional. Determines whether control buttons (next, prev) should be shown if using the default card. |
| `pointerPadding` | `number` | Optional. The padding around the pointer (keyhole) highlighting the target element. |
| `pointerRadius` | `number` | Optional. The border-radius of the pointer (keyhole) highlighting the target element. |
| `nextRoute` | `string` | Optional. The route to navigate to using `next/navigation` when moving to the next step. |
| `prevRoute` | `string` | Optional. The route to navigate to using `next/navigation` when moving to the previous step. |
> **Note** _Both `nextRoute` and `prevRoute` have a `500`ms 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`
```tsx
[
{
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"
}
]
```
### Onborda Props
| Property | Type | Description |
|-----------------|----------------------------|---------------------------------------------------------------------------------------|
| `children` | `React.ReactNode` | Your website or application content. |
| `steps` | `Array[]` | An array of `Step` objects defining each step of the onboarding process. |
| `showOnborda` | `boolean` | Optional. Controls the visibility of the onboarding overlay, eg. if the user is a first time visitor. Defaults to `false`. |
| `shadowRgb` | `string` | Optional. The RGB values for the shadow color surrounding the target area. Defaults to black `"0,0,0"`. |
| `shadowOpacity` | `string` | Optional. The opacity value for the shadow surrounding the target area. Defaults to `"0.2"` |
| `customCard` | `React.ReactNode` | Optional. A custom card (or tooltip) that can be used to replace the default TailwindCSS card. |
```tsx
{children}
```