shadcn.io is not affiliated with official shadcn/ui
Compact Stars Reviews Block for Vue
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 Vue with Ark 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, the tap focuses the button, which opens the card.
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.