shadcn.io is not affiliated with official shadcn/ui
DAO Voting Web3 Block for Radix UI
A governance dashboard's proposal list in four tabs with counts, each row with its time remaining, a thin vote bar with a quorum tick and a status word the votes decide, and For, Against and Abstain buttons that can flip the outcome.
Installation
Overview
List every vote a DAO is running and let a member vote from the list, with this DAO voting panel for React with Radix UI. It's the proposal list of Quorumyard, a governance dashboard. Four Tabs hold Active, Passed, Defeated and Pending proposals with their counts, and a Native Select in the header sorts a tab by Ending soonest, Most votes or Newest. A strip of four figures above them reads the open votes: which ends first, which is closest, which is short of quorum and your 640 votes. Each row shows the title, the proposer, the time remaining worked out from a typed sample date, for example Ends in 43 hours, a thin bar of For, Against and Abstain with a tick at quorum, the counts, and a status word the votes decide: Passing, Failing, Quorum not reached, or Passed and Defeated once a vote has closed. An open row unfolds For, Against and Abstain buttons; a vote moves the bar and, when it flips the outcome, the word reads Now passing. For governance dashboards, DAOs and any list of votes.
FAQ
How does a proposal land in a tab?
From its dates and counts, not from a stored label. A proposal whose start is after the sample date is Pending, one whose end is still ahead is Active, and a closed one is Passed when it reached quorum with more For than Against and Defeated otherwise, with Defeated: no quorum when turnout was too low. The tab counts come from the same function.
When does a vote change the word?
When your 640 votes decide it. QY-42 is 500 votes behind, so voting For makes it Passing and the row says Now passing; QY-43 is 300 votes short of quorum, so any vote reaches it. QY-41 stays Passing whatever you choose, and the status line says so. Votes are final, as on a chain, and the buttons lock after one.
Where does the time remaining come from?
From arithmetic on typed ISO instants against one sample date, 12 October 2026. Under two days it counts hours and otherwise whole days. Nothing reads the clock, so the page never changes by itself and a countdown never ticks.
What stays local, and how do I wire it?
The proposals, the tallies and your power are typed constants, and a vote only changes local state; nothing is signed or sent. In your app load proposals and tallies from your governor or an indexer, send the vote from the connected wallet, and keep deriving the status from the counts so a late vote updates the word.
Is it accessible from the keyboard?
Yes. The tabs use arrow keys, every row has a disclosure button that names its proposal, the vote buttons say what they vote on and stay focusable after they lock, and the bar is decorative beside the written counts. One polite status message reports what is shown and each vote.