shadcn.io is not affiliated with official shadcn/ui
Poll Embed Comments Block for React
A launch thread where comments hold polls: vote on one or several options, see bars with shares that add to 100, change or close a vote, and post your own poll.
Installation
Overview
Settle a decision inside the discussion, with this poll thread for React with Base UI. A compact header names the thread. In the frame, a held scroll region holds comments and two polls: one you wrote (pick an option, press Vote, and the bars show each count and a share, with shares that add to exactly 100) and a closed one that allowed several answers ("Closed: 14 votes"). Change vote takes your vote back; Close poll, shown only to the author, locks the poll. A reply to a poll can cite one of its options. In the composer, Add a poll swaps the comment box for a question, two to four options (Input, add and remove) and a Switch for several answers; the Shine Button posts a comment from You that holds the poll. The composer keeps the same height in both modes. It is built from Input, Textarea, Switch, Progress, Native Select, Shine Button and Guides. For product decisions, retros and any thread that needs a quick show of hands.
FAQ
How do I use my own polls?
Edit START_POLLS and START. A poll has a question, its choices (each with the votes it has before yours), voters, multiple, closed and the by who wrote it; a comment points at a poll with poll. Shares are worked out from the counts with the largest-remainder rule so they always add to 100.
What stays local, and how do I make it real?
Votes, closing and new polls all change state in the page, and the status line says nothing was sent. To make it real, store one vote per person and poll on the server, return the new counts from the Vote handler, and check on the server that only the author may close a poll: hiding the button is not a permission check.
Why do I press Vote instead of clicking an option?
Picking only selects, so with several answers you can choose them all before they count, and a mis-click costs nothing. After Vote the options lock, the bars appear and the button becomes Change vote. The rows keep their height, so nothing moves.
Is it accessible?
Each poll is a group named by its question, the options are native radios or checkboxes with the count and share in their label once results show, the bars are decorative, and a polite status line says what you voted. The options are native inputs, so they behave the same on every base.