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

# Installation

# Installation

## Package Installation

Install both the React SDK and the underlying TypeScript SDK:

```bash theme={null}
# npm
npm install @sunnyside-io/privacy-boost @sunnyside-io/privacy-boost-react

# yarn
yarn add @sunnyside-io/privacy-boost @sunnyside-io/privacy-boost-react

# pnpm
pnpm add @sunnyside-io/privacy-boost @sunnyside-io/privacy-boost-react
```

## Bundler Configuration

The SDK includes WebAssembly modules. See the [TypeScript SDK installation guide](../typescript/installation) for bundler-specific configuration.

### Next.js

```javascript theme={null}
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
    };
    return config;
  },
};

module.exports = nextConfig;
```

### Vite

Works out of the box. No configuration needed.

### Create React App

Requires `react-app-rewired`. See [TypeScript installation](../typescript/installation).

## TypeScript Configuration

Recommended `tsconfig.json`:

```json theme={null}
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
```

## Peer Dependencies

The React SDK requires:

* `react` >= 18.0.0
* `@sunnyside-io/privacy-boost` (latest)

## Verifying Installation

```tsx theme={null}
import { PrivacyBoostProvider } from '@sunnyside-io/privacy-boost-react';

function App() {
  return (
    <PrivacyBoostProvider
      config={{
        appId: 'your-app-id',
        serverUrl: 'https://optimism.sepolia.privacyboost.io',
        wethContractAddress: "0x4200000000000000000000000000000000000006"
      }}
      loadingComponent={<div>Loading...</div>}
    >
      <div>SDK loaded successfully!</div>
    </PrivacyBoostProvider>
  );
}
```

## Next Steps

* [Getting Started](./getting-started)
* [Provider Setup](./guides/provider-setup)