# Manual installation

Learn the steps to manually integrate Croct into your React project.

The following guide gives you a step-by-step overview of how to install and initialize the SDK in your project.

> **Speed up your integration!**
>
> The CLI can fully automate the integration process for you. Check out the [integration guide](/reference/sdk/react/integration) to get started faster.

## Install the SDK \[#install]

Run the following command to install the SDK:

**Command to install the SDK**

**npm**

```sh
npm install @croct/plug-react
```

**pnpm**

```sh
pnpm add @croct/plug-react
```

**Yarn**

```sh
yarn add @croct/plug-react
```

**Bun**

```sh
bun add @croct/plug-react
```

## Initialize the provider \[#initialize]

Add the [`<CroctProvider>`](api/components/croct-provider) component to the root of your application and set the [`appId`](api/components/croct-provider#appid-prop) property to your Application ID.

**JavaScript**

```jsx
import {CroctProvider} from '@croct/plug-react';

export default function App() {
  return (
    <CroctProvider appId="APPLICATION_ID">
      <div>
        <h1>My first personalized app 🚀</h1>
      </div>
    </CroctProvider>
  );
}
```

**TypeScript**

```tsx
import type {ReactElement} from 'react';
import {CroctProvider} from '@croct/plug-react';

export default function App(): ReactElement {
  return (
    <CroctProvider appId="APPLICATION_ID">
      <div>
        <h1>My first personalized app 🚀</h1>
      </div>
    </CroctProvider>
  );
}
```

You can find the Application ID on the [Integration page](https://app.croct.com/redirect/organizations/-organization-/workspaces/-workspace-/applications/-application-/integration) of your application. For a list of all available options, refer to the [`<CroctProvider>`](api/components/croct-provider) documentation.

## Check your integration \[#check]

If you open your application now, it should start sending events.

To check if your integration is working, go to the [Integration page](https://app.croct.com/redirect/organizations/-organization-/workspaces/-workspace-/applications/-application-/integration) of your application.

![Integration status](/assets/reference/sdk/integration-status.png)

When working correctly, you should see a green bullet next to the **Status** label saying **"Received traffic in the past 24 hours"**. If you still do not see this message after a few minutes, see the [Troubleshooting](troubleshooting) reference.

## Explore

- [CLI](integration): Learn how to use our CLI to get started faster.
- [Troubleshooting](troubleshooting): Identify and resolve issues with your integration.