CalmEmbed - Calm

The same deposit flow as 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

import { CalmEmbed } from "@calm-xyz/react";

Usage

app/fund/page.tsx

"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

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 — the same shapes, the same defaults, and the same section rules apply.

app/fund/page.tsx

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

app/fund/page.tsx

<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 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 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:

"use client";
import { CalmEmbed } from "@calm-xyz/react";

​Import

​Usage

​Props

​flows

​locale

​Differences from CalmDialog

​Connecting a wallet

​SSR

Import

Usage

Props

`flows`

`locale`

Differences from `CalmDialog`

Connecting a wallet

SSR