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 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.

PropDescriptionExample
walletsList 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 stagingproduction (default) or staging
3

Show NFT Details

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

"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>
    );
}
PropDescriptionExample
nftNFT 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:

// 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.

Was this page helpful?

Spam FiltersConnecting the Wallet