Rating Summary

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/rating-summary

Usage

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

Also exported: RatingStars, RatingCategories.

Examples

App listing

A sleep-sounds app's listing, mint.

Hotel score

A boutique hotel's guest score on its detail page, teal.

Product reviews

The head of a trail shoe's reviews page in neutral ink.

Provider trust panel

The trust panel on a home-cleaning pro's profile, green.

API reference

RatingStars

Prop Type Default
rating* number

Rating to draw — fractional values fill partially (4.3 → 30% of the fifth star).

 —
max number

Number of stars. Default 5.

 5
size keyof typeof STAR_PX

Glyph size: xs 12 · sm 16 · md 20 · lg 32. Default "sm".

 "sm"
tone StarTone

Fill colour. "warning" is the classic amber; "foreground" is ink; "primary" follows the Accent. Default "warning".

 "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 Default
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 Default
items* readonly RatingCategory[] —
max number

Scale of each score. Default 5.

 5
columns 1 | 2

One or two columns. Default 2.

 2
className string —