Skip to main content

​
Import

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

​
Usage

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

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

​
Props

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.

​
SSR

<CalmOnramp> is a client component. In Next.js App Router, render it from a parent that has "use client" at the top: 
"use client";
import { CalmOnramp } from "@calm-xyz/react";