shadcn.io is not affiliated with official shadcn/ui
A/B Vote Comparison Gallery Block for React
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 Base 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.
Related
- Pro
Image Comparison Slider Gallery
Compare, crop and zoomA graded drawn picture revealed over its original by a handle you drag or a slider you step, with Original and Graded labels, a percent readout and a picker of three pictures.
- Pro
Resizable Split Comparison Gallery
Compare, crop and zoomTwo drawn headphones sharing one picture box behind a draggable divider, each side shown full size and clipped, with a spec table under it that marks every row where the two differ.
- Pro
Stepped Before and After Gallery
Compare, crop and zoomOne drawn room in three layers, bare plaster, mid-job and finished, revealed from the foot of the picture by a slider with three stops, with room tabs and a line on each visit.
- Pro
Product Showcase Gallery
Stage and thumbnailsA product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.
- Pro
Comparison Table Pricing
Comparison tablesFour plans compared feature by feature in one table whose hairlines meet the page rails, with a billing switch, a tinted popular column and, on a phone, a plan switch that keeps the feature column beside one plan.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.