shadcn.io is not affiliated with official shadcn/ui
Rosette Rating Badges About Block for Ark UI
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 Ark 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.