# Rating Summary (Moonarc)

What people who use the app say, as the stores show it: the average large with its stars and how many rated, a bar for each star count with its share written beside it, and a few reviews, each with its stars, its title, who wrote it, when and where. The bars grow in turn as the summary arrives. The stars are one element each (a star mask repeated five times, filled to the value), named by their value for a screen reader. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/rating-summary` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<RatingSummary average={4.8} count="12,400" bars={[86, 9, 3, 1, 1]} reviews={[…]} />`
- Browser support: widely (Chrome 120 · Firefox 53 · Safari 15.4); elsewhere: without masks the stars are a filled bar; the numbers carry the rating
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 11.2 kB raw)
- Page: https://moonarc.dev/components/rating-summary/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `average` | `number` | none | The average, 0 to 5, written with one decimal. |
| `count` | `string` | none | How many rated, as written ("12,400"). |
| `bars` | `[number, number, number, number, number]` | none | Five star first: counts or shares. Each bar is its share of the sum, written as a whole percentage, and drawn against the largest. |
| `reviews` | `{ stars; title?; text; name; date?; source? }[]` | none | The reviews, in order. date is words ("September 2026"); source is where it was left. |
| `source` | `string` | none | Where the ratings were counted, after the count ("on the App Store and Google Play"). |
| `headline` | `string` | none | The section's heading. Slot "headline" wins. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `level` | `2 | 3` | `2` | Heading level of the heading. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
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' },
  ]}
/>
```

## Reduced motion

The bars are drawn at their length at once.

## With ClientRouter

CSS and Reveal.

## Craft

- 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

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/rating-summary` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: reveal.