Featured Quote With Rating Chip Logos Block for React

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.

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.

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.

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.

The band, then the quote, then the plate fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off and the block simply appears.

The band keeps the chip and drops the small "verified customers" line at the end. The quote comes first, the plate under it, both at the full width of the column. Nothing scrolls sideways at 320 pixels.