Build NFT Experiences with Crossmint's UI 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

Add the Crossmint Client SDK

Use the following command:

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

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

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

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

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`

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>
    );
}

"use client";

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

export default function NFTDetailPage() {
    return (
        <div className="h-screen">
            <CrossmintNFTDetail nft="solana:ABC123..." />
        </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:

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

// For Solana
{ chain: "solana", mintHash: "<MINT_HASH>" }

Example of NFT detail component

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.

Introduction

Wallets

Authentication

Tokenization (Minting)

Verifiable Credentials

Checkout

Wallet UI Components

Example of NFT detail component

Example with custom styling

Next Steps

SDK Reference

Client Quickstart

Server Integration

Talk to an expert

​Example of NFT detail component

​Example with custom styling

​Next Steps

SDK Reference

Client Quickstart

Server Integration

Talk to an expert

Example of NFT detail component

Example with custom styling

Next Steps