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

# Installation

> Install @dzapio/widget, peer dependencies, stylesheet, and bundler setup.

## Requirements

* Node.js 18+
* React 18+ (React 19 is supported)

Peer dependencies for EVM wallet support:

| Package     | Version |
| ----------- | ------- |
| `react`     | `>=18`  |
| `react-dom` | `>=18`  |
| `viem`      | `>=2`   |
| `wagmi`     | `>=3`   |

## Install the widget

<Snippet file="install-widget.mdx" />

The widget depends on `@dzapio/wallet`. You do not need to install the wallet package separately.

For wallet-only hosts, see [Wallet overview](/widget/wallet/overview).

## Stylesheet

Import the bundled CSS once at your app entry (layout, `_app`, or `main.tsx`):

```tsx theme={null}
import '@dzapio/widget/styles.css';
```

Without this import, the widget renders unstyled.

## Credentials

| Env var (suggested)                                | Config field             | Required                                                                     |
| -------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------- |
| `NEXT_PUBLIC_WC_PROJECT_ID` / `VITE_WC_PROJECT_ID` | `walletConnectProjectId` | **Yes** — [Reown Cloud](https://cloud.reown.com/) (WalletConnect) project ID |
| `NEXT_PUBLIC_DZAP_API_KEY` / `VITE_DZAP_API_KEY`   | `dzapApiKey`             | Optional — raises rate limits. See [Authentication](/api/authentication)     |

```tsx theme={null}
const config = {
  walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
  dzapApiKey: process.env.NEXT_PUBLIC_DZAP_API_KEY,
  appName: 'My dApp',
};
```

<Warning>
  Do not put a privileged server-only secret in the browser. The widget `dzapApiKey` is a public integrator key (same class as the Trade/Fuse `x-api-key`). Request one via [Discord](https://discord.com/invite/aRHESJB9md) or `support@dzap.io`.
</Warning>

## Vite

Wallet dependencies (Bitcoin in particular) may expect Node globals. If the build fails on `Buffer` / `global` / `process`, add a polyfill:

```ts Vite (vite.config.ts) theme={null}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      globals: { Buffer: true, global: true, process: true },
    }),
  ],
  resolve: {
    dedupe: [
      'react',
      'react-dom',
      '@solana/wallet-adapter-react',
      '@solana/wallet-adapter-base',
      '@solana/web3.js',
    ],
  },
});
```

Deduping React and Solana wallet-adapter keeps a single wallet context across `@dzapio/wallet` and `@dzapio/widget`.

## Next.js

App Router is supported. Mark the widget tree as a client component (`'use client'`) and import styles in that module or in `layout.tsx`. Next.js usually does **not** need the Buffer polyfill.

See the [Next.js example](/widget/examples/nextjs).

## Next: [Quickstart](/widget/quickstart)