> ## 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.

# CalmOnramp

> The single-component modal that wraps the onramp.

## Import

```ts theme={null}
import { CalmOnramp } from "@calm-xyz/react";
```

## Usage

```tsx app/page.tsx theme={null}
"use client";
import { CalmOnramp } from "@calm-xyz/react";

export function FundButton() {
  return (
    <CalmOnramp>
      <button>Deposit</button>
    </CalmOnramp>
  );
}
```

## Props

```ts theme={null}
import type { CalmOnrampProps } from "@calm-xyz/react";
```

### `children`

`React.ReactNode`

The element that opens the modal. Rendered inline as the trigger;
clicking it opens the dialog. Typically a `<button>`, but any element
that accepts `onClick` works.

### `flows`

`Flow[]` — optional

The deposit methods to offer, in the order listed. Each entry adds one
method to the picker; a method appears only when it is both listed here
and available for the connected wallet, chain, and currency.

```ts theme={null}
type Flow =
  | "swap"
  | "bank"
  | "cashapp"
  | "exchange"
  | "card"
  | "card[stripe]"
  | "card[swapped]"
  | "blink";
```

| Flow            | Method                                 |
| --------------- | -------------------------------------- |
| `swap`          | Swap an existing token balance to USDC |
| `bank`          | Bank transfer (ACH)                    |
| `cashapp`       | Cash App                               |
| `exchange`      | Transfer from a crypto exchange        |
| `card`          | Debit or credit card                   |
| `card[stripe]`  | Debit or credit card via Stripe        |
| `card[swapped]` | Debit or credit card via Swapped       |
| `blink`         | Deposit Crypto                         |

Defaults to `["swap", "bank"]`. List `cashapp`, `exchange`,
or a card provider explicitly to add them. List at most one card
provider — activating both `card[stripe]` and `card[swapped]` throws
an error.

<Warning>
  Cash App and the exchange onramp are available but not yet recommended
  for production. `card[swapped]` is sandbox-only — leave it out of
  production flows.
</Warning>

```tsx app/page.tsx theme={null}
<CalmOnramp flows={["bank", "swap"]}>
  <button>Deposit</button>
</CalmOnramp>
```

## The `blink` flow

Adds a **Deposit Crypto** row to the picker. Choosing it opens
Blink's deposit flow over your app; the user pays there, and the
destination chain's payout token arrives in the connected wallet.

```tsx app/page.tsx theme={null}
<CalmOnramp flows={["blink", "bank"]}>
  <button>Deposit</button>
</CalmOnramp>
```

This rail delivers to Ethereum, Base, HyperEVM, HyperCore, MegaETH, and
Monad — every destination chain the SDK supports — so listing `blink` is
safe whatever chain a given user is on.

The deposit flow renders light or dark to match your modal. It follows
the modal surface you set with `--calm-popover`, so a dark override in
[Styling](/sdk/styling) carries into it with no extra configuration.

### If your app sets a Content-Security-Policy

The deposit flow renders in an iframe, so `https://pay.blink.cash` has
to be in your `frame-src` allowlist. Add it to the directive you
already have rather than replacing it:

```
frame-src https://pay.blink.cash <your existing origins>;
```

Other flows mount iframes of their own, so any origin already in your
`frame-src` must stay there. Dropping one blocks that flow the same way
a missing entry blocks this one: the browser refuses the frame and the
deposit never starts.

Outside production the flow is served from a different origin, so
allowlist the one your environment is pointed at as well as the
production host.

The flow measures the viewport to size itself, reading the viewport
height and the bottom safe-area inset, and switching to a sheet layout
below a width threshold. Without the standard viewport meta tag a phone
reports a desktop-sized virtual viewport, so the flow measures the
wrong one and stays in the desktop layout:

```html theme={null}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

## SSR

`<CalmOnramp>` is a client component. In Next.js App Router, render
it from a parent that has `"use client"` at the top:

```tsx theme={null}
"use client";
import { CalmOnramp } from "@calm-xyz/react";
```