Skip to main content
This page has been updated for Wallets SDK V1. If you are using the previous version, see the previous version of this page or the V1 migration guide.
  1. CrossmintProvider — SDK initialization (required for all Crossmint features)
  2. CrossmintWalletProvider — Wallet creation and management

CrossmintProvider

Props

apiKey
string
required
Your Crossmint client-side API key.
appId
string
Application identifier, sent as x-app-identifier header.
consoleLogLevel
ConsoleLogLevel
Minimum log level for console output (or “silent” to suppress all output). Logs below this level will not be written to the console. Set to “silent” to completely suppress console output. Defaults to “debug” (all logs shown) for backward compatibility.
extensionId
string
Extension identifier, sent as x-extension-id header.
jwt
string
JWT token for authentication.
overrideBaseUrl
string
Override the base API URL.

Usage

import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            {/* Your app content */}
        </CrossmintProvider>
    );
}

CrossmintWalletProvider

Props

appearance
UIConfig
Appearance configuration for wallet UI components.
callbacks
{ onTransactionStart?: () => Promise<void>; onWalletCreationStart?: () => Promise<void> }
Lifecycle callbacks for wallet creation and transaction events.
createOnLogin
CreateOnLogin
Configuration for automatic wallet creation on login.
showOtpSignerPrompt
boolean
When true (default), built-in OTP signer UI prompts are shown during signing flows. When false, signing flows must be handled manually via the useWalletOtpSigner hook. Default: true.
showPasskeyHelpers
boolean
Whether to show passkey helper UI. Default: true.

Usage

import {
    CrossmintProvider,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintWalletProvider
                createOnLogin={{
                    chain: "base-sepolia",
                    recovery: { type: "email" },
                }}
            >
                {/* Your app content */}
            </CrossmintWalletProvider>
        </CrossmintProvider>
    );
}
Note: CrossmintWalletProvider must be nested inside CrossmintProvider.