shadcn.io is not affiliated with official shadcn/ui
Poll Messages Chat Block for React
A group chat with poll cards: vote, change or take back your vote, watch bars and largest-remainder shares move, and make your own poll with up to four options.
Installation
Overview
Put decisions in the thread, with this poll messages chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Handcount, a group chat with polls: Message and Bubble rows from three friends and two poll cards. A card holds the question, each option as a button with a bar behind it, its count and its share (largest remainder, so the shares add to exactly 100), "n votes" and your choice marked with a check and a heavier weight. Press another option to change your vote, press yours to take it back, or lock in when the poll doesn't allow changes. The friends' votes land a second after yours and the bars move. The button beside the composer opens a poll maker in its place: a question Input, two to four options, a Switch for "Allow changing votes" and a Shine Button, the only colored control, to send. The frame is ruled by Guides, and everything moves with CSS only. For a group messenger, a planning room or any thread that needs a quick show of hands.
FAQ
Why do the shares always add to 100?
They use the largest remainder method: each share is rounded down, then the spare points go to the options with the biggest fractional parts, ties to the earlier option. With three votes split evenly you see 34, 33 and 33, never 33, 33 and 33.
Where do the friends' votes come from?
They are typed in the data, one pick per friend, and land once, a second after your first vote. Under reduced motion the bars still change, just without the sweep. In your app, replace that with the votes your server returns and keep countsOf as the one place that adds them up.
How does the poll maker work?
The button beside the composer swaps it for a form: a question, two to four options (Add option and Remove), the switch and Send poll. An empty question or fewer than two filled options is refused in words on the status line. Sending posts your poll card and a friend answers in the thread.
What does Allow changing votes do?
On, you can press another option to move your vote or press yours to take it back. Off, the options lock after your vote and the card says "Votes are final".
What stays in the page, and how do I make it real?
Everything. Polls and votes live in state and replies come from a short script, as the line under the composer says. To wire it for real, post the poll from sendPoll and each vote from vote to your server and replace the typed friends' votes with its counts.