> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/onboarding.md).

# Onboarding

A great way to increase engagement and retention is to provide an onboarding flow that guides users through completing the key actions needed to get maximum benefit from your application.

The `Onboarding` component is a flow to help users set up the app. It accepts multiple views and marks the user as onboarded when the process is completed if the `save` prop is true.

### Preview

<div align="left"><figure><img src="/files/EDJKK8ji7vpHdjE8OzEh" alt="Gravity onboarding component" width="563"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Onboarding } from 'components/lib';

function MyComponent({ ...props }){

  const views = [
    { 
      name: 'Welcome', 
      description: 'Introduction to the app', 
      component: <Welcome /> 
    },
    { 
      name: 'Profile Setup', 
      description: 'Set up your profile', 
      component: <ProfileSetup /> 
    },
    { 
      name: 'Preferences', 
      description: 'Set your preferences', 
      component: <Preferences /> 
    },
  ];

  return (
    <Onboarding views={ views } onFinish='/dashboard' save={ true } />
  );
}
```

### Props

| Prop     | Description                                                 | Required | Value                                                                          |
| -------- | ----------------------------------------------------------- | -------- | ------------------------------------------------------------------------------ |
| onFinish | url to navigate to when finished                            | required | string, default: /dashboard                                                    |
| save     | Set onboarded column in user database to true on completion | optional | boolean                                                                        |
| views    | array of child views                                        | required | array of objects ({ name: string, description: string, component: component }) |

### Notes

* The `Onboarding` component uses `CheckList`, `Button`, `Logo`, `useNavigate`, `Event`, `Pagination`, `useLocation`, and `useTranslation` from `'components/lib'`.
* The `views` prop specifies the list of views for the onboarding process, each containing a `name`, `description`, and `component`.
* The `onFinish` prop specifies the URL to navigate to when the onboarding process is finished.
* The `save` prop indicates whether to set the `onboarded` column in the user database to true upon completion.
* The `PaginationNav` function handles the pagination navigation between views.