Wallet UI templates
Save time by using Crossmint's pre-made react components
Quick Setup
React only
Contact us if you'd like to use a different framework
First, add the Crossmint Client SDK to your project with the following command:
yarn add @crossmint/client-sdk-react-ui
Wallet Collection Component

You can retrieve your Crossmint wallet addresses using the fetch wallets endpoint and render a grid with all the NFTs with the following CrossmintNFTCollectionView
call:
import { CrossmintNFTCollectionView } from "@crossmint/client-sdk-react-ui";
const wallets = [
{
chain: "solana",
publicKey: "<SOL_ADDRESS>",
},
{
chain: "ethereum",
publicKey: "<ETH_ADDRESS>",
}
];
export function yourPage() {
return (
<div style={{ height: "100vh" }}>
<CrossmintNFTCollectionView wallets={wallets}/>
</div>
);
}
Prop | Description | Example |
---|---|---|
wallets | List of wallets whose NFTsyou 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 here | production (default) or staging |
NFT Detail Component
If you want to show a specific detail screen for an NFT, you can use the CrossmintNFTDetails
component.
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", // ethereum | polygon | bsc
contractAddress: "<CONTRACT_ADDRESS>",
tokenId: "<TOKEN_ID>"
};
export function yourPage() {
return (
<div style={{ height: "100vh" }}>
<CrossmintNFTDetail nft={nft} />
</div>
);
}
import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";
/* Alternative locator
* locator - solana:<mint_hash>
* const nft = "solana:123456789";
*/
const nft = {
chain: "solana",
mintHash: "<MINT_HASH>"
};
export function yourPage() {
return (
<div>
<CrossmintNFTDetail nft={nft} />
</div>
);
}
import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";
/* Alternative locator
* locator - cardano:<asset_id>
* const nft = "cardano:dac123456789";
*/
const nft = {
chain: "cardano",
assetId: "<ASSET_ID>"
};
export function yourPage() {
return (
<div>
<CrossmintNFTDetail nft={nft} />
</div>
);
}
Prop | Description | Example |
---|---|---|
nft | Information 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 here | production (default) or staging |
UI Config
You can tweak some aspects of the UI using the uiConfig
prop. This is an example of a valid uiConfig and the result:
import { CrossmintNFTDetails } from "@crossmint/client-sdk-react-ui";
const nft = [
{
chain: "solana",
mintHash: "<MINT_HASH>",
},
];
export function yourPage() {
return (
<div style={{ height: "100vh" }}>
<CrossmintNFTDetails
nft={nft}
uiConfig={{
colors: {
background: "#000814",
backgroundSecondary: "#001D3D",
textPrimary: "#FFFFFF",
textSecondary: "#EEEEEE",
accent: "#FFC300",
border: "#FFFFFF",
},
}}
/>
</div>
);
}
Notice that all fields are optional, and will fallback to our existing theme.
iOS and Android libraries
Want to launch faster? Use the libraries below to get your MVP off the ground in no time:
- iOS SDK: https://github.com/Crossmint/iOS-SDK
- Android SDK: https://github.com/Crossmint/AndroidSDK
Updated 27 days ago