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.
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.
Copy
Ask AI
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.
1
Add the NFTMintCard
Copy
Ask AI
// @noErrors: 2741 - Property children missing in typeimport { NFTMintCard } from '@coinbase/onchainkit/nft'; <NFTMintCard contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941'></NFTMintCard>
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.
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.
Copy
Ask AI
import { NFTMintCard } from '@coinbase/onchainkit/nft';import { NFTMedia } from '@coinbase/onchainkit/nft/view';import { NFTCollectionTitle } from '@coinbase/onchainkit/nft/mint';// ---cut-before---<NFTMintCard contractAddress='0xb4703a3a73aec16e764cbd210b0fde9efdab8941'> <NFTCollectionTitle /> <NFTMedia /> <NFTCollectionTitle /></NFTMintCard>// ---cut-after---
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.
Copy
Ask AI
import { NFTMintCard } from '@coinbase/onchainkit/nft';import { NFTMedia,} from '@coinbase/onchainkit/nft/view';// ---cut-before---<NFTMintCard contractAddress='0x877f0f3fef81c28a8c40fe060b17d254003377ad'> <NFTMedia square={false} /></NFTMintCard>// ---cut-after---
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.