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

# CalmEmbed

> The onramp rendered in place, without a modal.

The same deposit flow as [CalmDialog](/sdk/react/CalmDialog), rendered directly into
your layout instead of behind a dialog. Reach for it when the onramp is the
page rather than an action on it — a dedicated funding screen, a panel in a
dashboard, or a step inside your own flow.

## Import

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

## Usage

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

export default function FundPage() {
  return <CalmEmbed />;
}
```

There is no trigger element. The component mounts on the deposit picker and
renders its own back control once the user moves past the first screen.

## Props

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

### `flows`

`FlowConfig` — optional

The deposit methods to offer, in the order you want them rendered within each
section. Identical to the `flows` prop on
[CalmDialog](/sdk/react/CalmDialog#flows) — the same shapes, the same defaults, and
the same section rules apply.

```tsx app/fund/page.tsx theme={null}
<CalmEmbed
  flows={{
    crypto: ["blink", "swap"],
    cash: ["card[stripe]", "bank"],
  }}
/>
```

### `locale`

`string` — optional

The BCP-47 locale amounts render in. Separators and grouping follow the
locale's own conventions. Defaults to `"en-US"`.

```tsx app/fund/page.tsx theme={null}
<CalmEmbed locale="de-DE" />
```

## Differences from `CalmDialog`

|            | `CalmDialog`                                 | `CalmEmbed`       |
| ---------- | -------------------------------------------- | ----------------- |
| Surface    | Modal dialog                                 | Rendered in place |
| `children` | Required — the element that opens the dialog | Not accepted      |
| `balance`  | Supported                                    | Not accepted      |
| `flows`    | Supported                                    | Supported         |
| `locale`   | Supported                                    | Supported         |

Everything else carries over: the wallet prerequisite, the
[styling](/sdk/react/styling) tokens, and each flow's own requirements — including
the `frame-src` allowlist the `blink` flow needs.

## Connecting a wallet

A connected wallet is the prerequisite here too. The provider throws during
render without one, so mount the component only once your identity provider
reports an authenticated user with a wallet. See
[Connecting a wallet](/sdk/react/CalmDialog#connecting-a-wallet) for the sign-in
configuration, including the email-first setup a cash-only integration wants.

## SSR

`<CalmEmbed>` 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 { CalmEmbed } from "@calm-xyz/react";
```