Crossmint React SDK

> Create chain-agnostic wallets for your users in minutes
> Supports Solana, 20+ EVM chains (Polygon, Base, etc.), with custodial and non-custodial options.

🚀 Quick Start

``bash
pnpm add @crossmint/client-sdk-react-ui
`

$3

Option A: With Crossmint Authentication (Recommended)

`tsx
"use client";

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

export default function App({ children }) {
return (


createOnLogin={{
chain: "polygon-amoy",
signer: { type: "email" }
}}
>
{children}



);
}
`

Option B: 🔧 Bring Your Own Authentication

Already have authentication? Skip Crossmint Auth and use wallets with your existing system:

📖 Complete Custom Auth Guide - Full setup with examples and implementation details.

`tsx
"use client";

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

export default function App({ children }) {
return (

{/ No CrossmintAuthProvider needed! /}
createOnLogin={{
chain: "solana",
signer: {
type: "email",
email: ""
}
}}>
{children}


);
}
`

$3

`tsx
import { useAuth, useWallet } from "@crossmint/client-sdk-react-ui";

export default function MyComponent() {
const { login, logout, user, status } = useAuth();
const { wallet, status: walletStatus } = useWallet();

if (status === "logged-out") {
return Sign In;
}

if (walletStatus === "loaded") {
return (


// For advanced use cases
const customWallet = await getOrCreateWallet({
chain: "",
signer: { type: "" }
});
`

🎨 UI Components

Ready-to-use components for displaying wallet content:

`tsx
import {
CrossmintNFTCollectionView,
CrossmintNFTDetail
} from "@crossmint/client-sdk-react-ui";

// Display user's NFT collection


// Show NFT details

`

📱 React Native

For React Native apps, use our dedicated npm package.


`bash
pnpm add @crossmint/client-sdk-react-native-ui
`

🛠️ Environment Setup

1. Get your API key from Crossmint Console

2. Add to your .env:
`bash
NEXT_PUBLIC_CROSSMINT_API_KEY=your_api_key_here
``

📚 Examples & Documentation

- Quickstarts - Find your quickstart for your use case.

---

Questions? Visit our documentation or contact our support team.