Quick Setup

React Only. Contact us if you would like to use a different framework

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

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

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

Example of Wallet Collection Component

Wallet collection ui componenet

3. Check the NFT Detail Component

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

  • EVM

  • Solana

  • Cardano

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

NFT detail ui componenet

4. Tweak the UI

You can modify some aspects of the UI using the uiConfig prop. This 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

NFT detail ui componenet

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

iOS and Android libraries

Want to launch faster? Use the libraries below to get your MVP off the ground in no time: