shadcn.io is not affiliated with official shadcn/ui
Group Poll Calendar Block for Ark UI
A poll table of six time options by five invitees and a You column whose cells cycle Yes, Maybe and No, with totals per option, a Best word on the leader and a Pick button that closes the poll.
Installation
Overview
Settle on a date without a thread of replies, with this group poll for React with Ark UI. A hairline frame with a plus mark on each corner holds a table of six time options (Tuesday 20 to Friday 23 October, UTC+1) by five invitees, each shown as initials in an Avatar, and a You column. Each of your cells is a button that cycles no answer, Yes, Maybe and No, named for screen readers as "You, Tue 20 Oct, 10:00: Yes"; every answer is a mark and a word (a dot, a ring, a bar), never a colour. The totals per option are worked out from all the answers, and the option with the most Yes, then the fewest No, then the earliest wears a Badge saying Best. The rows never re-sort, so the table you answered in is the table you see. The Shine Button picks the leading option ("Pick Thu 22 Oct, 09:30") and closes the poll in this demo; Reopen poll opens it again. The table scrolls sideways on a phone with the time column pinned. It's built from Avatar, Badge, Button, Shine Button and Guides with a hand-built table, and a CSS entrance only. For team calls, club nights and any plan with several possible dates.
FAQ
How is the Best option chosen?
leaderOf counts Yes answers per option, including yours, and prefers the option with the most. A tie goes to the fewest No answers, and a further tie goes to the earlier option. With no Yes at all there is no leader, the badge is hidden and the button asks you to pick a time rather than naming one.
How do I set the options and the people?
Edit OPTION_LINES (a day and a start) and INVITEES. Each invitee has a string of one answer per option: y yes, m maybe, n no and - for none. Totals, the leader and the button label are all worked out from those strings and your own answers.
What does closing the poll do?
Pressing Pick changes the foot to "Poll closed on Thu 22 Oct, 09:30 in this demo. Nobody was told." and the cells stop changing: pressing one explains that the poll is closed. Reopen poll puts the Pick button back. Nothing is sent to the invitees.
How is the table read by a screen reader?
It is a real table with a caption, a row header per option and a column header per person (their full names are hidden text next to the initials). Other people's cells carry their answer as hidden text. Your cells are buttons whose names include the option and the current answer, and the polite status line repeats each change.
What stays local, and how do I wire it up?
Everything. Your answers live in the page and are gone after a reload; no vote is recorded and nobody is told. To make it real, send each change from cycle to your poll API for the signed-in user, load the others' answers into INVITEES, and notify them from pickLeader.