Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Collection Create Web3 Block for React

A one-page NFT collection setup with a name, a suggested symbol, a maximum supply, a royalty slider from 0 to 10 percent, a chain and an ERC-721 or ERC-1155 choice, beside a generated contract summary and a deployment 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

Set up a collection in one page and read the contract it would generate, with this collection form for React with Base UI. It's the studio of Collectforge, a collection studio. A Field for the name suggests a symbol of three to five letters from its words and keeps it until you edit it; a supply field accepts 1 to 100,000; a Slider sets the royalty from 0 to 10 percent in half steps and writes it as basis points, so 5 percent is 500; a Native Select picks the chain; and two cards choose ERC-721 for one of a kind or ERC-1155 for editions. A side cell shows the contract summary in Syntax Text, updated as you type, and a sample deployment estimate by chain. Create collection is the only Shine Button and gives a local result. For NFT studios and creator tools.

FAQ

How is the symbol suggested?

From the first letters of the name's words when there are at least three, otherwise from the first four letters of the name, in capitals and never more than five. As soon as you type in the symbol field it is yours and stops following the name; Use the suggestion hands it back.

What are basis points?

One hundredth of a percent. The summary writes the royalty the way contracts do, so 5 percent is royaltyBps: 500, and the slider's label shows both. Royalties on resales are a request that marketplaces may or may not honor, which is worth saying to creators.

Is the deployment estimate real?

No. It is a typed sample cost per chain in cents, scaled down for ERC-1155, and it is labelled as a sample, not a quote. In your app ask the wallet or an RPC for a gas estimate and show it with the current gas price.

What stays local, and how do I wire it?

All of it. Create collection checks the name, the symbol and the supply, focuses the first field that needs fixing, and otherwise reports that nothing was deployed. In your app send the same values to your deploy function or contract factory, and keep the validation on the server too.

Is it accessible from the keyboard?

Yes. Every field has a visible label and its problem is written under it with an icon, the slider moves with the arrow keys and announces the royalty once you let go, and the standards are native radio buttons. One polite status message reports the result.

How does it look on a phone?

The fields stack, the summary sits under the form, and Create collection fills the width of a foot that stays at the bottom of the screen.

All 100 web3 blocks