# Installation

To install the Quadrata SDK, you can use the following commands:

```shell
npm i --save @quadrata/sdk
npm i --save @quadrata/contracts
```

## Optional Peer Dependencies

The SDK has optional peer dependencies that you will need to install, depending on which SDK libraries you want to use.

{% hint style="info" %}
If you are not using the [SDK Client Libraries](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries.md), then you do not need to consider any of the peer dependencies for installation.
{% endhint %}

If you are using client libraries at `@quadrata/sdk/client` then you will need to install the following packages in your project:

* `@quadrata/core-react`
* `@tanstack/react-query`
* `react`
* `react-dom`

```sh
npm i --save react
npm i --save react-dom
npm i --save @quadrata/core-react
npm i --save @tanstack/react-query
```

Each client onboarding application has its own package that you need to install in order to take advantage of the SDK for client onboarding, and all of them require `@quadrata/core-react`.

***

### KYC Onboarding

For KYC onboarding, you need to install the following dependencies:

* `@quadrata/core-react`
* `@quadrata/client-react`

```sh
npm i --save @quadrata/core-react
npm i --save @quadrata/client-react
```

{% hint style="info" %}
You can find more information about installing `@quadrata/client-react on` the [*Individual Passport Onboarding > Installation*](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/1.-installation.md) page.
{% endhint %}

***

### KYB Onboarding

For KYB onboarding, you need to install the following dependencies:

* `@quadrata/core-react`
* `@quadrata/kyb-react`

```sh
npm i --save @quadrata/core-react
npm i --save @quadrata/kyb-react
```

{% hint style="info" %}
You can find more information about installing `@quadrata/kyb-react` on the [Business Passport Onboarding > Installation](/integration/how-to-integrate/onboard-users/business-passport-onboarding/1.-installation.md) page.
{% endhint %}

***

### With Wagmi Connect

If you want to use the built-in [With Wagmi Connect ](#with-wagmi-connect)abstraction to connect wallets and sign transactions, you need to install the following dependencies:

* `wagmi@2.X`
* `viem@2`

```sh
npm i --save wagmi
npm i --save viem
```

### Notes on optional dependencies

Due to the static analysis performed by the bundler (like Webpack or Parcel) during the build process, when a module is imported, the bundler tries to resolve these modules at build time and not run time.

If you are using the SDK client libraries and you do not wish to install all of the peer dependencies, you need to tell your bundler how to handle packages that are not installed or you will receive `Module not found` errors.

{% tabs %}
{% tab title="NextJS / Webpack Config" %}
NextJS uses Webpack and allows you to configure a fallback package for modules by name.

If you only need Individual Onboarding (KYC), for instance, and do not wish to install the Business Onboarding (KYB) react packages, you can tell webpack not to attempt to load the KYB package.

An example of this configuration would like like the following:

```javascript
// next.config.mjs

const nextConfig = {
    // ...
    webpack: config => {
        config.resolve.fallback = {
            ...config.resolve.fallback,
            
            // do not attemp to load @quadrata/kyb-react
            '@quadrata/kyb-react': false
        };
        return config;
    },
};

export default nextConfig;
```

{% endtab %}

{% tab title="ViteJS Config" %}
ViteJS uses esbuild and allows you to configure a fallback package for modules by name.

If you only need Individual Onboarding (KYC), for instance, and do not wish to install the Business Onboarding (KYB) react packages, you can tell webpack not to attempt to load the KYB package.

An example of this configuration would like like the following:

```javascript
// vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      // do not attempt to load @quadrata/kyb-react
      '@quadrata/kyb-react': false
    }
  }
});
```

{% endtab %}
{% endtabs %}

## Typescript Configuration

In order for typescript to find the type definitions in `@quadrata/sdk/types` you might need to update your `tsconfig.json`.

Specifically, `moduleResolution` may need to be set to `bundler`.

Here are some example `tsconfig.json` files for different environments.

{% tabs %}
{% tab title="NextJS" %}
Here is an example `tsconfig.json` for a NextJS Application:

```json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```

{% endtab %}

{% tab title="ViteJS" %}
Here is an example `tsconfig.json` for a ViteJS Application:

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.