shadcn.io is not affiliated with official shadcn/ui
Two Product Comparison Panel Reviews Block for React
Two blenders chosen with two Selects and set side by side: scores, review counts, five criterion rows with the higher score marked by bold, a check and the word Higher, and one pro, one con and one quote each.
Installation
Overview
A comparison panel for React with Base UI, for the Fennmill, a fictional range of three blenders (Pulse, Press and Vortex). A compact header sits over a band with a divider down the middle. Two Selects at the top choose which two blenders to set side by side, and choosing the one already on the other side swaps the pair. Under each Select the blender is drawn as a line silhouette beside its score as a figure, read-only stars and its review count. Five criterion rows follow, each with its name on the divider and a score with a thin bar on either side: the higher score is set in bold with a check and the word "Higher", and a tie says "Tied" on both. The foot gives each blender one pro, one con and one quote. Every score is worked out from the twenty-four typed reviews at the top of the file, and a polite line says how many criteria each blender leads. It's built from Select, Rating and Guides.
FAQ
Where do the scores come from?
From the REVIEWS array: each review names a blender, gives its stars and scores five criteria from 1 to 5. A blender's score is the average of its eight reviews' stars, to one decimal; a criterion's score is the average of that criterion over its reviews. "Higher" compares the two numbers as shown, and a tie says "Tied". The pro, con and quote are typed beside each blender.
What happens if I pick the same blender twice?
The two sides always show different blenders: choosing the one already on the other side swaps them, so the panel never compares a blender with itself. The two Selects are named "First blender" and "Second blender".
Each Select takes items, and each SelectItem a value.
How is the higher score marked without colour?
By weight, a check mark and a word: the higher score is bold with a check and "Higher" beside it, the lower one is plain with nothing, and a tie says "Tied" on both sides. Nothing is green or red, and a screen reader reads the number and the word.
Related
- Pro
Generation Benchmark Compare Reviews
Criteria and compareA running watch scored against its own previous generation in a sortable table: Gen 1 and Gen 2 scores each over a thin bar, the signed change with an arrow, and header buttons that sort by criterion or by biggest change.
- Pro
Star Rating Grid Reviews
Criteria and compareEight hand tools compared at a glance in a grid on shared hairlines, each with a drawing, stars, the average and count, and the share that recommend it, sorted by a Select and with a hover card of category scores.
- Pro
Weighted Category Ratings Reviews
Criteria and compareFive criteria as ruled rows with a bar, a score and a signed change against the previous quarter, and a Select that weighs them for everyday, commuting or gym use and re-derives the overall score.
- Pro
Radar Criteria Spider Reviews
Criteria and compareA hand-built radar of six criteria with a toggle that lays one reviewer group, commuters or racers, over everyone, a description list of the scores and an unseen table for screen readers.
- Pro
Rating Breakdown Reviews
Score summariesA review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.
- Pro
Criterion Picker Multi-Criteria Reviews
Criteria and compareReviews that each score five criteria, with a picker that sorts the list by one criterion and shows every criterion's average, and the five scores of each review drawn as dots.