shadcn.io is not affiliated with official shadcn/ui
Star Rating Grid Reviews Block for React
Eight 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.
Installation
Overview
A star rating grid for React with Base UI, for the Gantrymill, a fictional range of hand tools. A compact header has a Select at its end that sorts the grid by top rated, most reviewed or A to Z; under it, a band of eight cells on shared hairlines, four across and two on a phone. Each cell draws its tool in greyscale lines (hammer, saw, chisels, plane, level, square, clamp and rasp) and gives its name, the kind, the stars with the average and the count as one button, and the share that recommend it. Hover it, focus it or tap it and a hover card shows the tool's three category scores with a bar each. Sorting is instant, on the control, and a polite line says the result. Every average and share is worked out from the typed counts at the top of the file. It's built from Select, Rating, Hover Card, Button and Guides.
FAQ
How do I add a tool or change the counts?
Each entry of TOOLS has its counts by star rating (five stars first), the number who recommend it, three category scores in tenths and its drawing. summaryOf works out the total, the average to one decimal, the stars drawn and the recommend share; the sort functions use the same numbers. Keep the number of tools a multiple of four, or the last row shows an empty hairline slot.
How is the grid sorted?
Top rated sorts by the average, then by the number of ratings, then by name; Most reviewed by the number of ratings, then the average; A to Z by name. The cells re-order the moment you choose, and a polite line ("Sorted by most reviewed.") says so.
The Select takes items and each SelectItem a value.
How does the category card open, and on a touch screen?
On hover and on keyboard focus, and by a tap on a touch screen; Escape closes it. The scores are typed averages of each criterion, labelled as such, not derived from the star counts. On touch, a tap sets the card open from the button's own handler, since these two libraries open hover cards only for a mouse pointer.
Related
- Pro
Compact Stars Reviews
Score summariesThe smallest rating line, 4.6 (38), in a card title, a list row and a comparison table, each one a button whose hover card shows the five-row split behind the figures.
- Pro
Product Card Rating Reviews
Score summariesOne product card with its social proof: a greyscale drawing, the name and price, stars with the average and a link to all reviews, five mini bars, the share that recommend it and the most helpful review with a Read the whole review disclosure.
- 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
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
Two Product Comparison Panel Reviews
Criteria and compareTwo 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.
- Pro
Rating Card Widget Reviews
Score summariesAn embeddable rating card with a Compact, Standard and Wide switch that reshapes the same figures, and a field with the matching embed snippet and a Copy button.