shadcn.io is not affiliated with official shadcn/ui
Compact Stars Reviews Block for React
The 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.
Installation
Overview
A compact rating line for React with Base UI, for the Ternfield Ridge 3, a fictional trail running shoe. A compact header introduces three ruled rows, each naming the place the line lives: under a card's title, at the end of a list row beside a drawn thumbnail, and in the rating column of a comparison table of two shoes. In every place the stars and the figures, "4.6 (38)", are one button; hover it, focus it with the keyboard or tap it and a card opens with the split behind the figures, one row per star rating with a bar and a count. The stars are read-only and drawn in your theme's text colour; the list row uses a single star, and the table drops its weight column on a phone. Every average is worked out from the typed counts at the top of the file. It's built from Rating, Hover Card, Button and Guides.
FAQ
How do I use my own counts?
Edit RIDGE_TALLY and VALE_TALLY at the top of the file: how many ratings gave each star rating, five stars first. summaryOf works out the total, the average in tenths by whole-number maths, the stars drawn to the nearest half and each row's percentage by the largest remainder method; the button's name, the figures and the hover card all read from that one summary.
How does the split open, and what about touch screens?
On hover and on keyboard focus, and by a tap on a touch screen. The figures are a real button, so the keyboard reaches them with Tab and Escape closes the card. The card's own text, a list of five rows, is read as plain text once it is open. 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.
Why are the stars hidden from screen readers?
They're the catalog Rating, read-only, inside an inert, aria-hidden wrapper: they only draw the value, and the button's name says it ("Ridge 3, 4.6 out of 5 from 38 ratings"). Rating draws in your warning colour by default; here it takes text-foreground.
Related
- 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
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
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.
- Pro
Inline Rating Widget Reviews
Ask and writeRate in place in a list of recipes: each ruled row shows its community average and a Rate button that opens a popover with named stars, an optional line and Save; after saving, the row shows your stars with Edit.
- Pro
Distribution Bars Reviews
Score summariesA rating distribution for a hiking boot: five ruled rows of bars, counts and shares, a Bars and Table switch, and a readout of mean, median, mode and the share rated four or more.
- 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.