This guide will show you how to use Crossmint’s UI templates to save time on frontend development. To get started:

​
1. Add the Crossmint Client SDK to your project with the following command:

yarn add @crossmint/client-sdk-react-ui
React Only. Contact us if you would like to use a different framework

​
2. Render a grid with all the NFTs

Use the CrossmintNFTCollectionView component:

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

const wallets = [
    {
        chain: "solana",
        publicKey: "<SOL_ADDRESS>",
    },
    {
        chain: "ethereum",
        publicKey: "<ETH_ADDRESS>",
    },
];

export default function yourPage() {
    return (
        <div style={{ height: "100vh" }}>
            <CrossmintNFTCollectionView wallets={wallets} />
        </div>
    );
}
PropDescriptionExample
walletsList of wallets whose NFTs you want to render[{ chain: "solana", publicKey: "<SOLANA_WALLET_ADDRESS>" }]
uiConfig (optional)See UI config section below{ colors: { background: "#cccccc" } }
environment (optional)In case you need to test in Staging, you can set this hereproduction (default) or staging

​
3. Check the NFT Detail Component

If you want to show a specific detail screen for an NFT, you can use the CrossmintNFTDetail component.

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

/* Alternative locator
- locator - <ethereum|polygon|bsc>:<contract_address>:<token_id>
- const nft = "ethereum:0x123456789:1";
*/

const nft = {
    chain: "ethereum",
    contractAddress: "<CONTRACT_ADDRESS>",
    tokenId: "<TOKEN_ID>",
};

export function yourPage() {
    return (
        <div style={{ height: "100vh" }}>
            <CrossmintNFTDetail nft={nft} />
        </div>
    );
}
PropDescriptionExample
nftInformation about the NFT to be displayed{ chain: "ethereum", contractAddress: "<CONTRACT_ADDRESS>", tokenId: "<TOKEN_ID>" } The table above has examples for all variations and different chains.
uiConfig (optional)See UI config section below{ colors: { background: "#cccccc" } }
environment (optional)In case you need to test in Staging, you can set this hereproduction (default) or staging

​
Example of NFT detail component

​
4. Tweak the UI

Modify the UI using the uiConfig prop. The following is an example of a valid uiConfig and the result:

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

const nft = {
    chain: "solana",
    mintHash: "<MINT_HASH>",
};

export function yourPage() {
    return (
        <div style={{ height: "100vh" }}>
            <CrossmintNFTDetail
                nft={nft}
                uiConfig={{
                    colors: {
                        background: "#000814",
                        backgroundSecondary: "#001D3D",
                        textPrimary: "#FFFFFF",
                        textSecondary: "#EEEEEE",
                        accent: "#FFC300",
                        border: "#FFFFFF",
                    },
                }}
            />
        </div>
    );
}

​
Example of UI adjustment


All fields are optional, and will fallback to Crossmint’s existing theme.

​
iOS and Android libraries

Use the following libraries to launch faster: iOS SDK | Android SDK

Connecting the WalletSpam Filters