shadcn.io is not affiliated with official shadcn/ui
Royalty Settings Web3 Block for React Aria
Royalty settings for an NFT collection: a total from 0 to 10 percent, up to five recipients whose shares must total 100 percent, each one's payout on a sale price, and two switches for on-chain enforcement.
Installation
Overview
Set who gets paid when a token resells, with these royalty settings for React with React Aria. It's the royalty manager of Splitwick. A Slider sets the total royalty from 0 to 10 percent in half-point steps, applied on every secondary sale. Under it the recipients (Creator 70%, Artist 20% and Platform 10% to begin with) each show a name, a short address and a share in a Number Input, and a Remaining line is ready only at exactly 100%. Add recipient checks the name and the address and stops at five. A sale price field works out each recipient's payout in ETH, for example 0.07 ETH to the Creator on a 2.00 ETH sale at 5%. Two Switches, an on-chain royalty (EIP-2981) and an operator filter, come with the plain fact that marketplaces decide whether to honour them. Save royalty settings, the only Shine Button, is refused with its reason while the shares do not total 100%. For creator tools, collection dashboards and any contract setup.
FAQ
Why must the shares total 100%?
Because the royalty is divided entirely among the recipients: shares under 100% leave part of it unassigned and shares over 100% promise more than exists. The Remaining line says how far off you are ("Remaining −5%: over, lower a share"), the foot repeats the reason, and Save is refused until the total is exactly 100.
How are the payouts worked out?
In whole units of a ten-thousandth of an ETH: the sale price in thousandths, times the royalty in half-percent steps, times the recipient's whole-percent share, divided by a fixed constant, then rounded once. There are no floating-point percentages, so 5% of 2.00 ETH split 70/20/10 gives exactly 0.07, 0.02 and 0.01 ETH.
Do the switches enforce the royalty?
No, and the block says so. EIP-2981 publishes the royalty so a marketplace can read it, and an operator filter lists the marketplaces a contract allows; neither forces a marketplace to pay. Whether a sale pays the royalty is the marketplace's decision.
What stays local, and how do I wire it?
All of it. Recipients, addresses and the sale price are typed or entered in the tab, and Save only records the state ("Saved in this demo"). In your app write the royalty and the split to your contract or your marketplace's API in save, verify each address's checksum, and keep a payout contract that can split the funds.
Is it accessible from the keyboard?
Yes. The slider and the share fields take arrow keys, every recipient control names its recipient ("Share of Artist, in percent", "Remove Artist"), problems are spoken, Enter in the add fields adds the recipient, and one polite status message reports the result. React Aria commits a typed share when you leave the field or press Enter, not on every keystroke.