Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

NFT Create Web3 Block for React Aria

A form to make one NFT: your own image or a sigil drawn from the name, a description with a counter, up to eight traits, a royalty slider and a chain, beside a live card with a gas estimate.

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

Let a creator see the token before it exists, with this NFT creation form for React with React Aria. It's the create page of Inkmint, an NFT studio. A File Upload button takes a PNG, JPEG or WebP of up to 5 MB and shows it in this tab only; with no image, a greyscale sigil is drawn from the name. Then come a name, a Textarea description with a character count, a traits editor of type and value rows (up to eight, with a repeated type flagged under its row), a Slider for the royalty on resales from 0 to 10 percent and a Native Select for the chain. The side cell is a live card: the image or sigil, the name, the first three traits, the royalty and a typed gas estimate for the chosen chain. Mint NFT, the only Shine Button, checks the name and the traits and ends in a local result with a typed token number. For studios, marketplaces and any app where people make tokens.

FAQ

What stays local, and how do I wire a real mint?

All of it. The image is read with an object URL, shown, and released when it is replaced, removed or the page goes; nothing is uploaded, signed or sent, and the token number (#4,817 and up) is typed. In your app upload the image and metadata to your storage in mint, then send the mint with your wallet library and wait for the transaction before you say it is done.

What is the sigil when there is no image?

A drawing of greys chosen from the name: the same name draws the same sigil, one of three families, and a new name draws a new one. It stands in for the image in the live card only. The one image on the page is a file the visitor picks.

How do the traits work?

Each row has a type and a value. A row left empty is ignored; a row with only one of the two is flagged once you press Mint, and a repeated type is flagged at once under the row that repeats it, with the type named. The list scrolls inside a held region, so adding or removing a row never moves the fields below, and Add trait stops at eight with a message. The live card shows the first three complete traits.

Where does the gas estimate come from?

It is typed per chain in CHAINS, in ten-thousandths of an ETH, with a sample dollar figure at a fixed rate. It is not an estimate from a node. In your app ask your provider to estimate the mint for the chosen chain and show a range.

Is it accessible from the keyboard?

Yes. Every field has a label, trait fields say which trait they belong to ("Trait 2 value"), a problem is spoken and a failed Mint moves focus to the name. The slider takes arrow keys and speaks "5 percent". The React Aria slider uses its own thumb and label.

How does it look on a phone?

The live card sits under the form, and the Mint button stays pinned at the foot of the screen while you scroll, with the status message beside it.

All 100 web3 blocks