Skip to main content

​
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