Wallet UI Components

Build powerful NFT experiences with Crossmint’s React components

Crossmint’s UI components help you build sophisticated NFT experiences efficiently. These components are designed to work with any NFT collection across EVM chains and Solana. You can use them to:

• Display NFT collections in a clean, responsive grid layout
• Show detailed NFT information with metadata and attributes
• Create custom layouts that match your brand

1. Add the Crossmint Client SDK

   Use the following command:

   npm

   npm i @crossmint/client-sdk-react-ui
   

2. Display NFT Collections

   The CrossmintNFTCollectionView component lets you display NFTs from any wallet or collection:

   Use the CrossmintNFTCollectionView component to display NFTs from multiple wallets across different chains:

   React

   "use client";
   
   import { CrossmintNFTCollectionView } from "@crossmint/client-sdk-react-ui";
   
   // Pass an array of wallet addresses you want to display NFTs from
   const wallets = [
       {
           chain: "solana",
           publicKey: "<SOLANA_WALLET_ADDRESS_HERE>",
       },
       {
           chain: "ethereum",
           publicKey: "<EVM_WALLET_ADDRESS_HERE>",
       },
   ];
   
   export default function NFTDisplayPage() {
       return (
           <div className="h-screen">
               <CrossmintNFTCollectionView wallets={wallets} />
           </div>
       );
   }
   

   The component will automatically fetch and display all NFTs owned by the provided wallet addresses.

   Prop	Description	Example
   wallets	List of wallets whose NFTs you want to render	[{ chain: "solana", publicKey: "<SOLANA_WALLET_ADDRESS>" }]
   uiConfig (optional)	Customize colors, fonts, and layout	{ colors: { background: "#cccccc" } }
   environment (optional)	Switch between production and staging	production (default) or staging

3. Show NFT Details

   The CrossmintNFTDetail component creates rich NFT detail views that work with any NFT:

   EVM

   "use client";
   
   import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";
   
   export default function NFTDetailPage() {
       return (
           <div className="h-screen">
               <CrossmintNFTDetail nft="ethereum:0x123...abc:1" />
           </div>
       );
   }
   

   Prop	Description	Example
   nft	NFT identifier as locator string	"ethereum:0x123...abc:1"
   uiConfig (optional)	Customize colors, fonts, and layout	{ colors: { background: "#cccccc" } }
   environment (optional)	Switch between production and staging	"production" (default) or "staging"

   The nft prop also supports an object format:

   EVM

   // For EVM chains
   { chain: "ethereum", contractAddress: "<CONTRACT_ADDRESS>", tokenId: "<TOKEN_ID>" }
   

   Example of NFT detail component

   
4. Customize the Look

   Make the components match your brand using the uiConfig prop:

   "use client";
   
   import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";
   
   export function NFTDetailPage() {
       return (
           <div className="h-screen">
               <CrossmintNFTDetail
                   nft="solana:ABC123..."
                   uiConfig={{
                       colors: {
                           background: "#000814",
                           backgroundSecondary: "#001D3D",
                           textPrimary: "#FFFFFF",
                           textSecondary: "#EEEEEE",
                           accent: "#FFC300",
                           border: "#FFFFFF",
                       },
                   }}
               />
           </div>
       );
   }
   

   Example with custom styling

   

   All UI configuration fields are optional and will fall back to Crossmint’s default theme.

Next Steps

SDK Reference

Explore the complete SDK documentation, including UI components, hooks, and wallet functionality

Client Quickstart

Get started with client-side wallet integration

Server Integration

Learn about server-side wallet management

Talk to an expert

Contact our sales team for support.