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

# Overview

> Add the Calm onramp to your React app.

`@calm-xyz/react` is how you embed the Calm onramp in a React app.
Pick the provider that matches how your app already signs users in:

* [`<WagmiCalmProvider>`](/sdk/react/wagmi) — wagmi-based stacks
  (wagmi direct, Reown AppKit, RainbowKit, ConnectKit).
* [`<PrivyCalmProvider>`](/sdk/react/privy) — Privy-authenticated apps.
* [`<DynamicCalmProvider>`](/sdk/react/dynamic) — Dynamic-authenticated
  apps.

<Note>
  Mount the provider inside your `<QueryClientProvider>` and your
  auth/wallet stack, and only once a wallet is connected — gate it on your
  app's connection state. Set up wrong (no query client, the wrong wallet
  stack, or no connected wallet) it throws a clear error at mount rather
  than failing silently.
</Note>

Once mounted, drop a [`<CalmOnramp>`](/sdk/CalmOnramp) anywhere in the
tree and wrap a trigger element — clicking it opens the deposit modal.