shadcn.io is not affiliated with official shadcn/ui
NFT Mint Web3 Block for Radix UI
A mint card for a 5,000 token collection with a drawn greyscale sigil, a supply bar, Allowlist and Public phases with prices and per-wallet limits, a quantity stepper, a cost list and a Mint button that draws the minted sigils.
Installation
Overview
Let a visitor pick a phase, a quantity and see the cost before they mint, with this mint card for React with Radix UI. It's the page of Mintbarn, a mint page, for a collection called Harrowfield Strata, and nothing is minted: there is no wallet, contract or transaction. A drawn sigil in greyscale bands shows the next token, and a Progress bar says 3,412 of 5,000 minted. Two phase cards, Allowlist and Public, each state a price in ETH and a per-wallet limit; a checkbox switches the demo account off the allowlist, which locks that phase and says why. A quantity stepper is capped by the phase's limit and the supply remaining, and a cost list shows the price times the quantity, a sample gas figure and the total. Mint 2 is the only Shine Button; it draws the minted sigils with their numbers and counts them against the limit. For mint pages and drops.
FAQ
How are the limits enforced?
The stepper never goes above the smaller of what the wallet has remaining in the phase and what the supply has remaining, and pressing the plus at the cap says which of the two stopped you. After minting, the batch counts against that phase's limit, so a second Mint 2 on the Allowlist phase is refused with "Limit reached for this wallet". The Public phase keeps its own count.
Why is the Allowlist phase locked?
Untick The demo account is on the allowlist and the Allowlist card becomes unavailable, with the reason written below the cards, and the selection moves to Public. It shows the state a visitor who isn't listed would see, instead of hiding the phase.
Where does the art come from?
It is drawn in the file: a ground tone, six bands of four weights and one round mark, chosen from the token's number by modulo, so the same number always draws the same sigil. There are no images.
What stays local, and how do I wire it?
All of it. The supply, prices and gas figure are typed, and Mint only updates local counts and the status message. In your app call your contract's mint function from the connected wallet, read the supply and the wallet's count from the chain, show the real gas estimate from the wallet, and handle a rejected or failed transaction in the status message.