Providers

React context providers for React SDK reference for Crossmint wallets

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.

Show properties

borderRadius · string

colors · UiConfigColors

Show properties

accent · string

background · string

backgroundSecondary · string

backgroundTertiary · string

border · string

buttonBackground · string

danger · string

inputBackground · string

textLink · string

textPrimary · string

textSecondary · string

fonts · UiConfigFonts

Show properties

cssSrc · string

family · string · required

display · string

src · string

style · "normal" | "italic" | "oblique"

weight · string

fontSizeBase · string

fontWeightPrimary · string

fontWeightSecondary · string

hideCardForm · boolean

spacingUnit · string

callbacks · { onTransactionStart?: () => Promise<void>; onWalletCreationStart?: () => Promise<void> }

Lifecycle callbacks for wallet creation and transaction events.

Show properties

onTransactionStart · () => Promise<void>

onWalletCreationStart · () => Promise<void>

createOnLogin · CreateOnLogin

Configuration for automatic wallet creation on login.

Show properties

chain · Chain · required

The blockchain to create the wallet on (e.g. “base-sepolia”).

recovery · SignerConfigForChain · required

A single recovery method configuration (e.g. { type: "email" }). Used for wallet recovery and adding new signers.

recoveryMethods · SignerConfigForChain[]

Recovery methods, each able to authorize on its own.

signers · SignerConfigForChain[]

Optional array of operational signers. Defaults to a device signer if omitted (e.g. [{ type: "device" }]).

alias · string

Optional wallet alias.

plugins · WalletPlugin[]

Optional array of wallet plugins.

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.