shadcn.io is not affiliated with official shadcn/ui
Rosette Rating Badges About Block for React
Four review-site ratings for a booking tool, each a drawn rosette with the score in its middle over the site's name, a read-only star rating and its review count, in framed cells.
Installation
Overview
A ratings block for React with Base UI, written for Duelist, a fictional booking tool for barbershops. A centred header sits over four framed cells, two across on a phone and four from lg. Each cell draws a rosette in your theme's foreground tone, a scalloped seal on two ribbon tails with the site's score in the middle, over the site's name, a read-only star rating and how many reviews the score comes from. One site scores out of ten and the others out of five; the stars always run on five and round to the nearest half. A closing line says the scores were read in Year 6 and links to the reviews. It's built from Guides and Rating, with a hand-drawn SVG for the seals and CSS transitions for the entrance. For an about page, a pricing page or any place where outside opinion earns trust. The four review sites and every score are made up for the example.
FAQ
How do I change the sites and scores?
SITES lists each site with its name, score, the top of its scale and its review count. The score in the seal, the stars and the sentence read by a screen reader are all worked out from those four fields, so nothing else needs editing. The review sites and numbers are example data, not real services.
How does a score out of ten become five stars?
The score is divided by the top of its scale, scaled to five and rounded to the nearest half star, so 9.4 out of 10 shows four and a half stars. The number in the seal always shows the score as the site gives it.
How does a screen reader hear a rating?
The rosette and the stars are drawings and are hidden from assistive technology. The review count reads as one sentence, "Rated 4.8 out of 5 from 1,342 reviews", and each site's name is a heading, so the four cells read as a list of four.
Why are the stars not gold?
The block follows your theme and keeps colour for the one primary action on a page, so the stars and the seals are drawn in the foreground tone and an empty star is an outline.
Related
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
- Pro
Tabbed Plaque Shelf Awards About
Press and recognitionA recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.
- Pro
Proof Index Social Proof
CustomersSix kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.
- Pro
Mention Tally Customer Love
CustomersWhat customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.
- Pro
Sortable Media Mentions About
Press and recognitionAn index of eight press mentions for a PR tool as two-line rows, each with the masthead, the kind of piece, the day and the headline as a link, and the reach at its end; a Select sorts them by newest or by reach.
- Pro
Dialog Reader Testimonial Grid
CustomersSix customer quotes for a shared-inbox product as cards that share their hairlines, each cut to three lines; each opens one reader dialog with the whole quote, Previous and Next and a counter.