shadcn.io is not affiliated with official shadcn/ui
A/B Vote Comparison Gallery Block for Ark UI
Two designs of one poster side by side with a VS chip, a Prefer button under each, a seeded vote tally whose shares add to 100, and Change vote.
Installation
Overview
A side-by-side vote for React with Ark UI, for Posterly, a poster print shop. A centred header sits over two designs of one film-night poster at the same size, with a VS chip on the divider between them (stacked on a phone). Under each design a bar shows its share of a seeded tally and a button says "Prefer A" or "Prefer B". Choosing adds your vote to the tally, marks "Your pick" on that design, works the shares out again by largest remainder so they always add to 100, and puts "Change vote" in the band under the pair to take it back. The votes live in the page and are not sent anywhere, and the seeded counts are example numbers. The posters are drawn in the theme's greys, one with a heavy moon over stripes and one with a letter set in squares. It's built from Button, Progress and Guides.
FAQ
Where does focus go when I vote?
Pressing "Prefer A" hides the two Prefer buttons and moves focus to "Change vote"; pressing that restores them and puts focus on "Prefer A". A polite line says what happened ("Your vote for Design A is in: it now has 413 of 771 votes").
Why do the percentages always add up?
Each share is rounded down and the leftover points go to the designs with the largest remainders, so the two always total 100 even when the counts are close. The numbers come from the counts, never typed in.
Are the votes real?
No. The 412 and 358 are example data and your vote is kept only until you reload. To record votes, call your own endpoint from the cast and take handlers and seed the counts from its answer.
How does it fit a phone?
The two designs stack, each with its bar and button, and the VS chip sits on the line between them. The results band is last and has no closing rule, so the next section's top rule closes it.