In this example, you can create your own NFT Drop minting page just by customising the template with your branding, and plugging in your NFT Drop contract address.
- thirdweb NFT Drop: to create a lazy-minted ERC721 NFT Collection that our users can claim.
- thirdweb React SDK: to enable users to connect their wallets with the useMetamask hook, and access hooks such as useNFTDrop to interact with the NFT drop contract.
- thirdweb TypeScript SDK: to view the claimed supply, total supply, and mint NFTs from the drop.
To create your own version of this template, you can use the following steps:
Run this command from the terminal to clone this project:
npx create-tw-app --example custom-minting-pageHead to the thirdweb dashboard and create your own NFT Drop contract.
You can learn how to do that with our guide Release an NFT drop on your own site without writing any code.
Be sure to configure a name, description, and image for your NFT drop in the dashboard.
You can fully customize the colors and style of this template by editing the values in the globals.css file.
You can configure:
- The color of the background with
--background-color - The color of the text with
--text-color - The color of the button (is a gradient from primary to secondary color) with
--color-primaryand--color-secondary - The font with
--font - The border colors with
--border-color
Replace the value of the myNftDropContractAddress inside index.tsx with your NFT Drop contract address you can find in the dashboard.
For any questions, suggestions, join our discord at https://discord.gg/thirdweb.