Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

NFT Collection Create Web3 Block for React Aria

A five step launch checklist for an NFT collection, visited in any order: details, artwork counted against the supply, two mint phases, an instant or delayed reveal with a drawn pair, and a Deploy that refuses until the artwork covers the supply.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Walk a creator through everything a drop needs before it is deployed, and say what is missing, with this launch checklist for React with React Aria. It's the manager of Dropwright, a drop manager, with five steps in a rail you can visit in any order, each marked To do or Done: Details, Artwork, Mint settings, Reveal and Deploy. Artwork counts the files you add against the supply in a Progress bar, such as 412 of 5,000 files added, and keeps only their names. Mint settings has two phases with a date and a price each. Reveal is a choice between instant and delayed, with a drawn pair, a covered tile and the revealed sigil, that swaps. Deploy collection is the only Shine Button: it stays pressable, but until the artwork covers the supply it refuses, says how many files are missing and moves to that step. For NFT drops and launch tools.

FAQ

When can the collection be deployed?

When all four earlier steps are done: a name, a symbol of three to five letters and a supply; at least as many files as the supply; an allowlist start before the public start with prices above zero; and, for a delayed reveal, a reveal date on or after the public start. Pressing Deploy early sends you to the first step that isn't done and states the gap.

Are the files uploaded?

No. Choose files reads only each file's name, in this tab, and Add 100 sample files adds typed names. Nothing is uploaded or stored, and Clear files empties the list. In your app upload to your storage or to IPFS, show progress per file, and check names and dimensions on the server.

What does the drawn pair show?

At mint is the covered tile when the reveal is delayed and the real sigil when it is instant; After the reveal is always the sigil. The art is drawn in the file from a token number, with no images, and the covered tile is a flat tone with a ring.

What stays local, and how do I wire it?

All of it. Deploy records a local result and says nothing is on chain. In your app deploy your contract from the connected wallet with the checked settings, wait for the transaction, and show its hash and the contract address once it is confirmed.

Is it accessible from the keyboard?

Yes. The rail is a list of buttons where the open step is marked as the current step, every field has a visible label, the reveal choices are native radio buttons, and Back and Next stay in reach. One polite status message reports each result and each refusal.

How does it look on a phone?

The rail gives way to a line that reads Step 3 of 5; Back and Next move through the steps, and Deploy collection sits under them at the full width of a foot that stays at the bottom of the screen. The body keeps the height of its tallest step.

All 100 web3 blocks