@crossmint/client-sdk-react-ui

@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

Supported Login Methods

• Email OTP: Passwordless sign-in using a one-time code
• Social Accounts: Sign in with Google, Apple, X, and more
• Farcaster: Using the Sign In With Farcaster (SIWF) standard

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:

• login() - Initiate user authentication
• logout() - End user session
• jwt - Current user's JWT token
• user - Active user information
• status - Current auth state ("loading" | "authenticated" | "unauthenticated")

useWallet

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

Handles wallet creation and management. Key features:

• wallet - Access to the EVMSmartWallet instance
• status - Wallet state ("not-loaded" | "in-progress" | "loaded" | "loading-error")
• getOrCreateWallet() - Initialize or retrieve user's wallet
• clearWallet() - Reset wallet state

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.