npm install @crossmint/client-sdk-react-ui
> Create chain-agnostic wallets for your users in minutes
> Supports Solana, 20+ EVM chains (Polygon, Base, etc.), with custodial and non-custodial options.
``bash`
pnpm add @crossmint/client-sdk-react-ui
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 (
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! /}
chain: "solana",
signer: {
type: "email",
email: "
}
}}>
{children}
);
}
`
`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 ;
}
if (walletStatus === "loaded") {
return (
Welcome {user?.email}!
Wallet: {wallet?.address}
return
š Authentication
$3
- Email OTP: Passwordless sign-in with verification code
- Social Accounts: Google, Twitter/X, Farcaster
- Web3 Wallets: Connect external wallets for authentication
- Custom UI: Headed or headless authentication flows$3
`tsx
loginMethods={["email", "google", "twitter", "farcaster", "web3"]}
authModalTitle="Welcome to MyApp"
// Optional: Customize the appearance of the auth modal.
// -> See https://docs.crossmint.com/authentication/customization for more details.
appearance={{
borderRadius: "12px",
colors: {
background: "#ffffff",
textPrimary: "#000000",
accent: "#6366f1"
}
}}
>
`š³ Wallets
$3
- Solana: Native SOL, SPL tokens
- EVM Chains: Ethereum, Polygon, Base, Arbitrum, and 15+ more
- Unified API: Same code works across all chains$3
`tsx
createOnLogin={{
chain: "solana", // or EVM chains: "polygon", "base", etc.
signer: {
type: "email" // or "api-key", "passkey", "external-wallet"
}
}}
>
`$3
`tsx
const { wallet, getOrCreateWallet } = useWallet();// Get wallet info
const address = wallet?.address;
const balance = await wallet?.balances();
// Send tokens
const tx = await wallet?.send(recipient, "usdc", "10.5");
console.log("Transaction:", tx.explorerLink);
// 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
``- Quickstarts - Find your quickstart for your use case.
---
Questions? Visit our documentation or contact our support team.