shadcn.io is not affiliated with official shadcn/ui
Featured Quote With Rating Chip Logos Block for React Aria
A survey tool customer's quote under a ruled band that carries a rating chip, five stars and 4.9 from 312 reviews, beside the customer's wordmark plate.
Installation
Overview
A featured-quote logo block with a rating for React with React Aria. A ruled band runs across the top of the block, its bottom rule meeting the page's rails at + marks, and a rating chip rides it: five stars and "4.9 from 312 reviews", which is the block's heading. Under the band, a quote in two sentences and the person who said it, with an avatar, a name and a role, at the start; at the end, the customer's wordmark on a plate, an icon in a ring and the name in monospace, with two facts in a description list: how long they have been a customer and how many surveys they send. The stars are the text colour, not amber, so the block stays monochrome and the page's primary colour stays on its one action. Built from Rating, Avatar and Guides, with CSS transitions for the entrances and your theme's tokens for every colour. For a product with a review score you can stand behind.
FAQ
How do I change the score?
Edit SCORE at the top of the file: the score and count in the chip's heading. The stars are a read-only Rating with five stars filled, so for a score under 4.5 set its defaultValue to the nearest whole star. Keep the number in the heading honest: it is the claim, and the stars only draw it.
Can visitors rate from the chip?
No. The Rating is readOnly: it shows the score, ignores pointer and keyboard input and is not styled as disabled. If you want visitors to leave a score, use the interactive Rating in the testimonials-with-rating block instead. The chip is a published average, not a control.
Why are the stars not amber?
This block follows the shadcn.io visual language: one primary colour for one action, and no warm accent colours that change from preset to preset. The stars use the text colour, so they read as a solid fill in any theme, light or dark. A star that is amber on a lime theme would also fight the page.
Is it accessible?
Yes. The chip's heading is text, read as "4.9 out of 5 from 312 reviews", and the stars are decoration: they are hidden from assistive technology and out of the tab order, so they add no stops and no "1 star" radios to read. The quote is a figure with a blockquote and a figcaption, and the facts are a description list. The numbers sit in bdi elements so a right-to-left page keeps them in order, and the wordmark keeps its own direction, as a logo would.