> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Onboarding

> Onboarding component

## Prebuilt Onboarding Pages

You will have 5 prebuilt onboarding pages.

<Frame className="flex flex-row w-full h-full gap-2">
  <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/screens/onboarding/onboarding1.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=a8dd70b0a7608cee933b4959cd97207d" alt="Onboarding 1" className="rounded-lg mr-4" width="1290" height="2796" data-path="images/screens/onboarding/onboarding1.png" />

  <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/screens/onboarding/onboarding2.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=ef83418556591194f307b88db82e7641" alt="Onboarding 2" className="rounded-lg mr-4" width="1290" height="2796" data-path="images/screens/onboarding/onboarding2.png" />

  <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/screens/onboarding/onboarding3.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=1aebf6d318ce30bedd57ea246e58c7dc" alt="Onboarding 3" className="rounded-lg mr-4" width="1290" height="2796" data-path="images/screens/onboarding/onboarding3.png" />

  <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/screens/onboarding/onboarding4.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=f5f610b9d5e7f429b83838dbf1b0f53a" alt="Onboarding 4" className="rounded-lg mr-4" width="1290" height="2796" data-path="images/screens/onboarding/onboarding4.png" />

  <img src="https://mintcdn.com/shipmobilefast-51a499dc/0OITnrSFpxUQjTf4/images/screens/onboarding/onboarding5.png?fit=max&auto=format&n=0OITnrSFpxUQjTf4&q=85&s=84adc651b983981cc7d4bd5eb7a64c77" alt="Onboarding 5" className="rounded-lg" width="1290" height="2796" data-path="images/screens/onboarding/onboarding5.png" />
</Frame>

## Onboarding Components

### Usage

Onboarding basically work with these data:

<Tip>
  If you want to change the title and descriptions, follow this steps:
</Tip>

<Steps>
  <Step>
    Go to the `i18n/locales/en-US.ts` file and create the `onboarding` key.

    ```tsx theme={null}
    onboarding: {
      title1: 'Onboarding 1',
      desc1: 'Onboarding 1 description',
      title2: 'Onboarding 2',
      desc2: 'Onboarding 2 description',
      title3: 'Onboarding 3',
      desc3: 'Onboarding 3 description',
    },
    ```
  </Step>

  <Step>
    Go to the Onboarding Slide and import translation.

    ```tsx components/common/onboarding/onboarding-slide.tsx theme={null}
    import { useTranslation } from 'react-i18next';
    ```
  </Step>

  <Step>
    Thats it! You don't need to write single line of code.
  </Step>
</Steps>

```tsx data/Onboarding.ts theme={null}
export const onboardingData: OnboardingItem[] = [
  {
    id: '1',
    title: 'onboarding.title1',
    description: 'onboarding.desc1',
    lottie: require('@/assets/lotties/onboarding.json'),
    // If you want to use an image instead of a lottie, uncomment the following lines 👇
    // Lottie and Image can not work together. You need to choose one of them.   
    // image: require('@/assets/images/logo.png'),
  },
  ...
];
```

<Info>
  You can even add 20 onboarding slides. You don't have any limitation.
</Info>

<Warning>
  Go to the `data/Onboarding.ts` file to add your own onboarding images and animations.
</Warning>