## Rating Summary (S—137)

A reviews summary: average with partial stars, a 5-to-1 histogram, and bars you click to filter reviews by score.

- URL: https://sundaeui.dev/components/rating-summary
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/rating-summary.json`
- Tags: filter, reviews, stars, e-commerce, histogram, ratings

The average shows with stars filled to the exact fraction. Each histogram bar is a button; clicking one filters to that score and the others dim, clicking again clears it.
Bars grow in on mount and counts are shown beside them.

### Usage

```tsx
import { RatingSummary } from '@/components/sundae/rating-summary'

<RatingSummary />
```

### Props

- `counts` (`[number, number, number, number, number]`, required): Review counts for 5 → 1 stars.
- `onFilter` (`(stars: number | null) => void`): Called when a bar is toggled.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product pages, app listings, course pages.

### When not to use

- Fewer than ~10 reviews: show the reviews directly.

### Accessibility

- Stars are an image with “4.6 out of 5”; bars are toggle buttons like “4 stars, 212 reviews, 31%”.
- The active filter is announced.
- Reduced motion removes the movement and keeps every state change.