# Rating Summary

Reviews summary with the average score, partial stars and a 5-to-1 breakdown of bars. Tap a bar to filter reviews by that rating; per-category scores and tap-to-rate are included.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/rating-summary
```

## Import

```tsx
import { RatingStars, RatingCategories, RatingSummary } from "@/components/ui/rating-summary/rating-summary";
```

## Variants

- `app-store` — App listing: `npx @lumioui/cli add pro/rating-summary-app-store`
- `hotel` — Hotel score: `npx @lumioui/cli add pro/rating-summary-hotel`
- `product` — Product reviews: `npx @lumioui/cli add pro/rating-summary-product`
- `provider` — Provider trust panel: `npx @lumioui/cli add pro/rating-summary-provider`

## Props

### RatingStars

| Prop | Type | Notes |
| --- | --- | --- |
| `rating` | `number` | Rating to draw — fractional values fill partially (4.3 → 30% of the fifth star). |
| `max?` | `number` | Number of stars. Default 5. |
| `size?` | `keyof typeof STAR_PX` | Glyph size: xs 12 · sm 16 · md 20 · lg 32. Default "sm". |
| `tone?` | `StarTone` | Fill colour. "warning" is the classic amber; "foreground" is ink; "primary" follows the Accent. Default "warning". |
| `onRate?` | `(value: number) => void` | Makes each star a 44pt target that sets a whole-star rating. |
| `revealDelay?` | `number` | Switch the stars on at mount, one at a time 70ms apart, starting after  this many ms. Omit to render them lit. |
| `className?` | `string` | — |

### RatingSummary

| Prop | Type | Notes |
| --- | --- | --- |
| `average` | `number` | Average score on the `max` scale. |
| `count` | `number` | Total number of ratings or reviews (drives the count line). |
| `distribution?` | `readonly number[]` | Counts per level, highest first: [5★, 4★, 3★, 2★, 1★]. Omit for a score-only summary. |
| `max?` | `number` | Scale the average is on. Default 5. |
| `layout?` | `"split" | "stacked" | "compact"` | "split" — big score left, bars right (reviews page head). "stacked" — score row on top, full-width bars with percentages below. "compact" — one inline line: star · score · count (cards, list rows). Default "split". |
| `barLabel?` | `"number" | "stars"` | Bar row label: the digit or a pip count. Default "number". |
| `barTrailing?` | `"percent" | "count" | "none"` | What sits after each bar. Default "none" for split, "percent" for stacked. |
| `tone?` | `StarTone` | Star colour. Default "warning". |
| `countLabel?` | `string` | Count line override — "18.2K ratings", "Based on 312 stays". |
| `recommendPercent?` | `number` | Adds "96% would recommend" under the count. |
| `recommendLabel?` | `string` | Recommend line copy. Default "would recommend". |
| `selectedStar?` | `number | null` | Active star filter (controlled). |
| `onSelectStar?` | `(stars: number | null) => void` | Makes each bar a filter — tap 3 to read only 3-star reviews, tap again to clear. |
| `onPress?` | `() => void` | Compact layout only: the whole line becomes a "see reviews" button. |
| `reveal?` | `boolean` | Switch on at mount: the average rolls in, stars light one at a time,  then the bars grow. Default true (split and stacked layouts). |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | Rendered under the summary (filter chips, a write-review button). |

### RatingCategories

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `readonly RatingCategory[]` | — |
| `max?` | `number` | Scale of each score. Default 5. |
| `columns?` | `1 | 2` | One or two columns. Default 2. |
| `className?` | `string` | — |

## Icons rendered

- `star` — /icons.html?i=star
- `chevron-right` — /icons.html?i=chevron-right
- `check-circle` — /icons.html?i=check-circle

Source: https://lumioui.com/components/rating-summary