shadcn.io is not affiliated with official shadcn/ui
Star Grade Matrix Awards Block for React
A grading-scale matrix of five categories by one to five stars, with a tooltip on each column header, the grade a hotel holds in each category as an outlined cell with filled stars, and who holds it and when.
Installation
Overview
A star-grade matrix for React with Base UI. A native table has the five categories of a made-up hotel guild down the side and its five grades, one to five stars, across the top, with a few words in every cell on what that grade asks for. The hotel's grade in each category is the cell in a ring, with its stars drawn filled and the rest outlined. Each column header says what its grade means in a tooltip, on hover and on focus, and on a tap on a touch screen. A ruled header band carries + marks, the category names stay put while the matrix scrolls sideways on a phone, and a line under it says who holds the grades and the day of the inspection. The star total in the header is worked out from the typed grades. It's built from Guides, Tooltip and a native table. The guild, the hotel and the grades are made up for the example.
FAQ
How do I change the categories and grades?
Edit CATEGORIES and GRADES at the top of the file. A category has a name, what each grade asks for (an array of five short phrases) and held, the grade the hotel holds from 1 to 5. A grade has a name, a meaning for the tooltip and its stars. The star total in the header is worked out from the held values.
How do the column tooltips work?
Each header holds a button. On a pointer device the tooltip opens on hover and on keyboard focus; on a touch screen a tap opens it instead. The meaning is also in the button's text for a screen reader, so nothing is hidden behind the tooltip.
How is the held grade shown without colour?
The cell has a ring around it, its stars are drawn filled (the others in an outline) and a screen reader hears "The hotel holds this grade". The legend under the matrix says what the outline means.
How does it fit on a phone?
The matrix keeps a minimum width and scrolls sideways in a focusable region; the category column is sticky, so each row stays labelled while you scroll.
Related
- Pro
Radar Scorecard Awards
One featured awardOne award scored in depth for an application-performance monitor: a radar chart of five criteria beside the same scores as a numbered list with bars, a derived total and the lead judge's comment.
- Pro
Platform Rankings Awards
Rankings and scoresA table with one row for each of four review sites, showing a product's rating as read-only stars and words, the review count and its rank in the category, with a foot row for the weighted average.
- Pro
Customer Choice Seal Awards
Badges and sealsA split with a drawn satisfaction seal showing the score as text, beside a headline and a cloud of praise topics as outline badges whose size and border step with each topic's share of the most praised.
- Pro
Rating Stars Awards
Rankings and scoresFour review sites as four cells with overshoot, each with read-only stars, the rating in words, the review count and a link, and a footnote that writes out the weighted average of the four.
- Pro
Category Top Three Awards
Rankings and scoresFive software categories in cells on shared hairlines, each a small top three with the product's own row in a ring, a read-only rating in stars and words, and the word Leader on the categories it won.
- 213Pro
Three Step Podium Awards
Rankings and scoresA podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.