shadcn.io is not affiliated with official shadcn/ui
Top Bar Rating Banner Block for Radix UI
A centred rating strip: five stars drawn filled to 4.8, the score with its review count, and a link to leave a review.
Installation
Overview
A rating strip for React with Radix UI, social proof in one centred line. For Orchardkit, a library of developer snippets, five stars sit at the start of the sentence, filled to 4.8: four whole stars and a fifth filled four fifths from the inline start. After them come the score in medium weight, "from 1,342 verified developers" in the muted tone and an underlined link to leave a review, all flowing as one sentence so it wraps to two lines at most on a phone. Each star is two stacked icons, an empty one at a low tone and a foreground one clipped to a width set by a single custom property, so any score is a number. The stars follow the theme and never turn amber. The strip is 44 pixels tall on a desktop and sits on the page's drafting lines. It's built from Guides with a Lucide icon and your theme's tokens for every colour. For landing pages, pricing pages and listings that want one believable line of proof above the fold.
FAQ
How do I change the score and the count?
Edit RATING at the top of the file: score (out of five, any decimal) and count. Every star's fill is worked out from the score (min(1, max(0, score - index))) and set as --fill on the star, so 3.5 draws three full stars and half of the fourth. The count is formatted with a fixed locale so the server and the browser agree; change "en-US" for another style.
Why not use the catalog's Rating component?
Rating is an input: it takes a value and is built to be changed. This strip only shows a score, so a drawing is lighter and keeps the fill exact to a fraction. The filled stars use the foreground colour and the empty ones a faint tone of it, which reads in every theme and keeps the banner free of an amber that no other block uses.
What do screen readers hear?
The row of stars is a single image with the text "Rated 4.8 out of 5 stars"; the individual star icons are hidden from them. The sentence after it is plain text, and the link says what it does ("Leave a review") rather than "click here".
Does the fill follow right-to-left pages?
Yes. Each star's clipped layer is anchored to the inline start, so in a right-to-left page the partial star fills from its right edge, the direction people read the row. The sentence after the stars sits in a bdi, so the score and the count keep their digits in order.