`<NFTMintCard />`

The NFTMintCard component provides an easy way to mint an NFT. Just enter the NFT contract address and token Id (for ERC1155 contracts) and include the subcomponents you want to render.

Prerequisites

Before using the NFTMintCard component, ensure you've completed the Getting Started steps.

To use the NFTMintCard component, you'll need to provide an API Key in OnchainKitProvider. You can get one following our Getting Started steps.

Starting a new project

If you're starting a new project, we recommend using create onchain to scaffold your project.

npm create onchain@latest

Adding to an existing project

If you're adding NFTMintCard to an existing project, simply install OnchainKit.

npm

npm install @coinbase/onchainkit

Wrap the <OnchainKitProvider /> around your app, following the steps in Getting Started.

Quickstart

The NFTMintCardDefault component is a simplified version of the NFTMintCard component, designed to streamline the integration process for developers. Instead of manually defining each subcomponent, developers can use this shorthand version which renders our suggested implementation of the component and includes NFTCreator, NFTMedia, NFTCollectionTitle, NFTQuantitySelector, NFTAssetCost and NFTMintButton.

import { NFTMintCardDefault } from '@coinbase/onchainkit/nft'; 
 
<NFTMintCardDefault
  contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941'
/>

If you'd like more customization you can follow the steps below to customize which subcomponents are rendered.

Add the NFTMintCard

import { NFTMintCard } from '@coinbase/onchainkit/nft'; 
 
<NFTMintCard
  contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941'
> 
</NFTMintCard>

Add the NFTMintCard components

import { NFTMintCard } from '@coinbase/onchainkit/nft';
import { NFTMedia } from '@coinbase/onchainkit/nft/view'; 
import {
  NFTCreator, 
  NFTCollectionTitle, 
  NFTQuantitySelector, 
  NFTAssetCost, 
  NFTMintButton, 
} from '@coinbase/onchainkit/nft/mint'; 
 
<NFTMintCard 
  contractAddress='0xed2f34043387783b2727ff2799a46ce3ae1a34d2' 
  tokenId='2'
> 
  <NFTCreator />
  <NFTMedia />
  <NFTCollectionTitle />
  <NFTQuantitySelector />
  <NFTAssetCost />
  <NFTMintButton />
</NFTMintCard>

That's it! You've now created an NFT mint card.

Not sure what to mint?

You can create your own NFT to mint at Coinbase Wallets create a Mint flow. Just follow the instructions to create your NFT and then copy the contract address out of the url into an NFTMintCard.

Customization

Add the NFTMintCard components in any order

If you prefer to have the collection title above the media, you can easily change the order of the subcomponents and they will render in the new order.

<NFTMintCard 
  contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941' 
> 
  <NFTCollectionTitle />
  <NFTMedia />
  <NFTCollectionTitle />
</NFTMintCard>

Customize the `<NFTMedia />` aspect ratio

By default, we display all media scaled to fit the card. If you would prefer to show the media at its original aspect ratio you can set square={false} on the <NFTMedia /> component.

<NFTMintCard 
  contractAddress='0x877f0f3fef81c28a8c40fe060b17d254003377ad' 
> 
  <NFTMedia square={false} />
</NFTMintCard>

Scaled to fit (default)	Original Aspect Ratio

Override styles

We recommend style customization by setting a custom OnchainKit theme. You can also override individual component styles using className.

<NFTMintCard 
  contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941' 
>
  <NFTMedia/>
  <NFTCollectionTitle className='text-[#EA580C]'/>
</NFTMintCard>

Advanced Usage

Bring your own data

The default NFTMintCard implementation uses Coinbase Developer Platform to provide the data and requires an API key. You can use the useNFTData prop to pass in a hook which fetches the NFT data from a source of your choice. As long as this hook returns an object with the same shape as the NFTData type, the NFTMintCard will render.

You can also use a custom buildMintTransaction function to create your own Mint transaction.

 
function useNFTData() {  
  return {  
    title: 'My NFT',  
    imageUrl: 'https://example.com/image.png',  
  }  
}  
 
async function buildMintTransaction() {  
  const response = await fetch('https://api.minttransaction.com');  
  return await response.json();  
}  
 
export default function NFTComponent() {
  return (
    <NFTMintCard 
      contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941' 
      useNFTData={useNFTData}
      buildMintTransaction={buildMintTransaction}
    >
      <NFTMedia/>
      <NFTCollectionTitle />
      <NFTMintButton disabled={true}/>
    </NFTMintCard>
  );
}

Listening to the component lifecycle

You can use our NFT LifecycleStatus and the onStatus prop to listen to transaction states.

NFTMintCard has 6 lifecycle states:

init - The component is initialized
error - The component has encountered an error
mediaLoading - The media is loading
mediaLoaded - The media has been loaded
transactionPending - The mint transaction is pending
transactionLegacyExecuted - The mint transaction has been executed
success - The mint transaction has been successful

import type { LifecycleStatus } from '@coinbase/onchainkit/nft'; 
 
const statusHandler = (status: LifecycleStatus) => { 
  const { statusName, statusData } = status; 
  switch (statusName) { 
    case 'success': 
      // handle success 
    case 'error': 
      // handle error
    default: 
      // handle 'init' state
  } 
} 
 
<NFTMintCard
  onStatus={statusHandler}
  contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941' 
>
  <NFTMedia />
</NFTMintCard>

Example use cases

Create a gallery of your mintable NFTs: Create a gallery of NFTs you created for users to mint
Minted in game avatar: Allow your users to mint and then view a minted avatar

Components

The NFTMintCard component can be customized with the following components:

<NFTCreator /> - The creator of the NFT.
<NFTMedia square={boolean}/> - The media for the NFT, this includes support for images, videos and audio NFTs.
<NFTCollectionTitle /> - The title of the NFT collection.
<NFTQuantitySelector /> - The quantity selector for the NFT.
<NFTAssetCost /> - The cost of the NFT in native currency and USD.
<NFTMintButton /> - The mint button for the NFT.