shadcn.io is not affiliated with official shadcn/ui
Quadratic Voting Web3 Block for React
A grants round with 100 credits to spread over five proposals where n votes cost n squared: minus and plus buttons, the cost of the next vote, a credits bar, and a plus that explains itself when the next vote costs too much.
Installation
Overview
Let people say how much they care, not only which side they are on, with this quadratic voting panel for React with Base UI. It's the autumn round of Sproutfund, a grants round: you have 100 credits to spread over five proposals, and n votes on one proposal cost n squared credits, so the first vote costs 1, the second 3 and the tenth 19. A credits bar shows where the credits went, one segment per proposal, and how many remain. Each row has minus and plus buttons, the votes, the credits they cost, a thin bar on the shared scale and the cost of the next vote. Plus stays focusable but answers with a reason when the next vote costs more than what remains. A line under the rows compares quadratic cost with a flat one: 10 votes on one proposal, or 4 on each of five. Submit votes, the Shine Button, records the ballot; Reset returns to the starting votes. For grant rounds, DAOs and any vote where strength of feeling matters.
FAQ
What is the cost formula?
n votes cost n squared credits, so the next vote on a proposal that has n votes costs 2n + 1 (the difference of two squares). Each row shows both numbers, for example Cost 25 credits (5 x 5) and Next vote costs 11, and the total spent is the sum of the squares.
Why square the cost?
Because it makes concentrating power expensive. With 100 credits one person can cast 10 votes on a single proposal, or 4 on each of five; without squaring they could cast 100 on one. The line under the rows computes both from the credit total, so changing the constant changes the sentence.
Why is plus not disabled, and what does it say?
A disabled button cannot be focused or explain itself. Plus is marked unavailable, stays in the tab order and, when pressed or read, says for example Next vote costs 13; 11 credits remain. Minus does the same at zero votes.
What stays local, and how do I wire it?
All of it. The proposals, the 100 credits and the starting votes are constants, and Submit votes keeps the ballot in local state; nothing is signed or sent. In your app give each voter a credit budget, send the vote counts (not the credits) as a signed message, and validate the sum of squares on the server so a client cannot overspend.