shadcn.io is not affiliated with official shadcn/ui
Star Rating Grid Reviews Block for React Aria
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 React Aria, 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 onChange with a key, and each item an id.
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.