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

# Universal Deposit SDK

> Accept deposits from any chain. Funds are automatically detected and bridged to your desired destination.

The **Universal Deposit SDK** (`@particle-network/universal-deposit`) lets your app accept deposits from any chain. It gives your users deposit addresses for every chain supported by Universal Accounts, with funds automatically detected and bridged to your configured destination chain in **USDC**.

<Card title="Learn More About Universal Accounts" icon="user" href="/intro/universal-accounts">
  Universal Deposit leverages Universal Accounts. Learn what they are and how they work.
</Card>

<Note>
  Universal Deposit uses **USDC** as the bridged asset. All deposits are automatically converted to USDC and sent to your configured destination chain.
</Note>

<Warning>
  Due to the architecture of Universal Deposit, it is not compatible with Particle **Connectkit** or **Authkit**.
</Warning>

## Try Live Demo

You can try the Universal Deposit SDK in action by visiting the [Universal Deposit Demo](https://universal-deposit.vercel.app/).

<Card title="Try Live Demo" icon="play" href="https://universal-deposit.vercel.app/">
  Try the Universal Deposit SDK in action.
</Card>

## Widget UI overview

The Universal Deposit SDK provides a modal UI that allows users to deposit funds from any chain to your configured destination chain.

<Frame caption="Universal Deposit Widget UI">
  <img className="block dark:hidden" src="https://mintcdn.com/particlenetwork-fccf74d2/F_9zruIE1JAROkF_/universal-accounts/ua-reference/universal-deposit/images/deposit-modal.png?fit=max&auto=format&n=F_9zruIE1JAROkF_&q=85&s=58573716897a3d75f6bbec00fe02e96f" alt="Universal Deposit Widget UI" width="400" height="300" data-path="universal-accounts/ua-reference/universal-deposit/images/deposit-modal.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/particlenetwork-fccf74d2/F_9zruIE1JAROkF_/universal-accounts/ua-reference/universal-deposit/images/deposit-modal.png?fit=max&auto=format&n=F_9zruIE1JAROkF_&q=85&s=58573716897a3d75f6bbec00fe02e96f" alt="Universal Deposit Widget UI" width="400" height="300" data-path="universal-accounts/ua-reference/universal-deposit/images/deposit-modal.png" />
</Frame>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @particle-network/universal-deposit
  ```

  ```bash yarn theme={null}
  yarn add @particle-network/universal-deposit
  ```
</CodeGroup>

## Quick Start

### 1. Import styles

The React components (`DepositWidget`, `DepositModal`, `RecoveryWidget`, `RecoveryModal`) use Tailwind utility classes. The SDK ships a pre-built CSS file that you must import in your app:

```css theme={null}
/* In your global CSS file */
@import "@particle-network/universal-deposit/styles.css";
```

Or in a JS/TS entry point:

```ts theme={null}
import '@particle-network/universal-deposit/styles.css';
```

> **Tailwind v4 users:** If you prefer to avoid duplicate utility CSS, you can skip the import above and add an `@source` directive in your CSS instead:
>
> ```css theme={null}
> @source "../node_modules/@particle-network/universal-deposit/dist/**/*.mjs";
> ```

### 2. Setup — Wrap your app with `DepositProvider`

```tsx theme={null}
import { DepositProvider, CHAIN } from '@particle-network/universal-deposit/react';

function App() {
  return (
    <YourAuthProvider>
      <DepositProvider config={{
        destination: { chainId: CHAIN.POLYGON },
        autoSweep: true,
        minValueUSD: 1,
      }}>
        <YourApp />
      </DepositProvider>
    </YourAuthProvider>
  );
}
```

### 3. Modal — Open a deposit dialog

```tsx theme={null}
import { useDeposit, DepositModal } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const [open, setOpen] = useState(false);
  const { isReady } = useDeposit({ ownerAddress: address });

  return (
    <>
      <button onClick={() => setOpen(true)} disabled={!isReady}>
        Deposit
      </button>
      <DepositModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}
```

<Note>
  The user address above is only used as reference for the deposit account generation, the SDK is fully wallet-agnostic.
</Note>

### 4. Inline Widget — Embed the deposit UI

```tsx theme={null}
import { useDeposit, DepositWidget } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const { isReady } = useDeposit({ ownerAddress: address });

  if (!isReady) return <Loading />;
  return <DepositWidget fullWidth />;
}
```

### 5. Headless — Build your own UI

```tsx theme={null}
import { useDeposit, getChainName } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const {
    isReady, depositAddresses, pendingDeposits,
    recentActivity, status, sweep, currentDestination,
  } = useDeposit({ ownerAddress: address });

  if (!isReady) return <Loading />;

  return (
    <div>
      <p>EVM: {depositAddresses?.evm}</p>
      <p>Solana: {depositAddresses?.solana}</p>
      <p>Status: {status}</p>
      <p>Destination: {getChainName(currentDestination?.chainId)}</p>

      {pendingDeposits.map(d => (
        <div key={d.id}>
          {d.token} — ${d.amountUSD.toFixed(2)}
          <button onClick={() => sweep(d.id)}>Sweep</button>
        </div>
      ))}
    </div>
  );
}
```

## Next Steps

<CardGroup cols={3}>
  <Card title="React SDK" icon="react" href="/universal-accounts/ua-reference/universal-deposit/react-sdk">
    DepositProvider, hooks, and UI components.
  </Card>

  <Card title="Core SDK" icon="code" href="/universal-accounts/ua-reference/universal-deposit/core-sdk">
    Headless DepositClient for non-React apps.
  </Card>

  <Card title="Reference" icon="book" href="/universal-accounts/ua-reference/universal-deposit/reference">
    Types, constants, chain utilities, and advanced topics.
  </Card>
</CardGroup>