`@crossmint/client-sdk-react-ui`

You can check the full documentation at docs.crossmint.com

If you're using React.js, or Next.js, Crossmint provides a client integration specific for you.

Quick Setup

First, add the Crossmint Client SDK to your project with the following command:

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

Add payment button to your site

Check our dedicated section for payments in the docs.

Crossmint Authentication

Check out our quickstart in the docs.

Key Components

We provide two essential React context providers:

CrossmintProvider - Base provider for accessing Crossmint services
CrossmintAuthProvider - Authentication context provider for your components
CrossmintWalletProvider - Wallet context provider for your components, can be used to integrate with other auth providers. Visit Crossmint Signers Demo for complete implementation details and advanced features.

Supported Login Methods

Email OTP: Passwordless sign-in using a one-time code
Social Accounts: Sign in with Google, X, and more
Farcaster: Using the Sign In With Farcaster (SIWF) standard
Web3: Sign in with EOA wallet (limited support for now)

UI Options

Modal Login: Popup interface for authentication
Embedded Login: In-page authentication component
Customization: Flexible UI styling and email template options

Visit our customization guide to learn more about styling options and email templates.

User Wallets

Check out our quickstart in the docs.

We provide two essential React hooks for integrating Crossmint wallets into your application:

`useAuth`

import { useAuth } from "@crossmint/client-sdk-react-ui";

Manages authentication state and user sessions. Key features:

status - Current auth state ("logged-in" | "logged-out" | "in-progress" | "initializing")
user - Active user information
jwt - Current user's JWT token
getUser() - Retrieve current user information
login() - Initiate user authentication
logout() - End user session
crossmintAuth - Access to the CrossmintAuth instance

`useWallet`

import { useWallet } from "@crossmint/client-sdk-react-ui";

Handles wallet creation and management. Key features:

status - Wallet state ("not-loaded" | "in-progress" | "loading-error" | "loaded")
wallet - Access to the EVMSmartWallet instance
type - Wallet type ("evm-smart-wallet" | "solana-smart-wallet")
getOrCreateWallet() - Initialize or retrieve user's wallet
clearWallet() - Reset wallet state
createPasskeySigner() - Create a passkey signer for the wallet (not supported for Solana)

Visit our documentation for complete implementation details and advanced features.

Wallet UI Components

We offer two components to help you quickly get up and running with your project using Crossmint wallets:

CrossmintNFTCollectionView - Display a grid of NFTs.
CrossmintNFTDetail - Display a card showing all NFT related details.

Visit our documentation for integration instructions.

Examples

Smart Wallets Demo (Next.js Starter Kit)

Environment Setup

Create a .env file in the demo app directory:

cd apps/wallets/smart-wallet/next

Add the following environment variable:

NEXT_PUBLIC_CROSSMINT_AUTH_SMART_WALLET_API_KEY=your_api_key_here

You can obtain a staging client-side API key from the Crossmint Console. For detailed instructions on getting an API key, see our documentation.

Running the Demo

Build and start the demo application:

cd apps/wallets/smart-wallet/next
pnpm i
pnpm build
pnpm start

For more information on how to run the demo application, see the Smart Wallets Demo (Next.js Starter Kit) README.