Skip to main content
You are viewing docs for the previous version of the Wallets SDK. We recommend upgrading to V1. See the updated version of this page or the V1 migration guide.

​
Latest React SDK version - npm

The Crossmint React SDK (@crossmint/client-sdk-react-ui) provides React components and hooks for integrating Crossmint wallets into your application.

​
Installation

npm i @crossmint/client-sdk-react-ui

​
Provider Setup

Wrap your application with the required providers: 
import {
    CrossmintProvider,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintWalletProvider
                createOnLogin={{
                    chain: "base-sepolia",
                    signer: { type: "email" },
                }}
            >
                {/* Your app components */}
            </CrossmintWalletProvider>
        </CrossmintProvider>
    );
}

​
Quick Example

Once providers are set up, use hooks to access wallet state: 
import { useWallet } from "@crossmint/client-sdk-react-ui";

function WalletInfo() {
    const { wallet, status } = useWallet();

    if (status === "in-progress") return <p>Loading wallet...</p>;
    if (!wallet) return <p>No wallet connected</p>;

    return (
        <div>
            <p>Address: {wallet.address}</p>
            <p>Chain: {wallet.chain}</p>
        </div>
    );
}

​
Next Steps