Rating Summary

Live demo

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

npx shadcn@latest add @moonarc-pro/rating-summary

---
import RatingSummary from '@/components/moonarc/pro/RatingSummary.astro';
---
<RatingSummary
  headline="What people say"
  average={4.8}
  count="12,400"
  source="on the App Store and Google Play"
  bars={[86, 9, 3, 1, 1]}
  reviews={[
    { stars: 5, title: 'Finally stuck', text: 'Forty days of reading, which has never happened before.', name: 'Mara L.', date: 'September 2026', source: 'App Store' },
    { stars: 4, text: 'Simple and calm. I would like a darker widget.', name: 'Tomás R.', date: 'August 2026', source: 'Google Play' },
  ]}
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal.

Props

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Why it is built this way

• Each share is written beside its bar, so the bars are a picture of numbers already on the page and are hidden from a screen reader, which hears "5 stars: 82%".
• A star colour is --ma-star, the text's own colour unless a page sets one: a gold that reads on white rarely reads on a dark tone.
• The bars wait for the summary's Reveal and grow one after another; a bar never grows before it can be seen.
• The average is a figure with one decimal, the way both stores print it, so a buyer's 4.75 is not rounded up past what the store shows.

Replaces: Review summary widgets embedded from review platforms · Hand-built star rating breakdowns. See the migration table.

Related