shadcn.io is not affiliated with official shadcn/ui
Inset Star Rating Big CTA Block for React Aria
A card-in-card call to action built on a rating summary: a headline and a Shine Button over a band with a big score and foreground stars beside a five-to-one star histogram, all figures worked out from the counts.
Installation
Overview
A closing section that proves the pitch with the shape of the reviews, not only the average. Between the page's solid rails, a muted shell with + marks on its corners holds a raised panel in two bands. The top one is a header row: a headline that quotes the score, a line of derived facts ("90% of 3,210 reviews give it five stars") and one Shine Button at the end. Under a rule with + marks, the second band is split at a hairline: a big score with five stars and the review count on one side, and a histogram of five-to-one star ratings on the other, each row a bar with its share. The score, the star fill, the headline's figures and every percentage are worked out from the review counts in the file, so they can never disagree. On a phone the bands stack and the button sits right under the headline. It's built from Guides, Progress and Shine Button, with Lucide stars in foreground tones, CSS transitions only and your theme's tokens, so the stars and bars stay neutral and the button is the only primary control. For product pages, pricing pages and anywhere a high rating is the strongest thing you can show.
FAQ
How do I use my own review numbers?
Edit COUNTS at the top of the file: the number of reviews at five, four, three, two and one star, in that order. Everything else is derived: the total, the average (to one decimal, by integer maths), how much of the fifth star is filled, each row's percentage and the headline's figures. Only put real review numbers here, and change "Brightloom" in the headline to your product.
Why do the percentages always add up to 100?
Rounding each row separately can total 99 or 101. The block gives every row its rounded-down share, then hands the leftover points to the rows with the biggest remainders, so the bars and labels always add up to exactly 100.
How does a partial star work?
Each star is an empty star in the border colour with a filled copy clipped on top, whose width is the share of that star the score covers: 4.9 fills 90 percent of the fifth. The clip grows from the inline start, so in right-to-left languages it fills from the right. The stars are decorative; a hidden "Rated 4.9 out of 5" says it in words.
How do screen readers read the histogram?
Each row is a list item with one hidden sentence, such as "5 stars: 2,880 reviews, 90%". The bars and the visible labels are hidden from assistive technology, so nothing is read twice. The list itself is named "Reviews by star rating", and the section's h2 is the headline in the top band.
Why doesn't it name review sites?
A rating you show must be one you can point to. The block shows your own review counts without a site's name or badge; add a line such as "Collected from verified customers" under the count only if it is true for your data.