Examples
Default
Empty
Large Volume
Custom Average
Mixed
Props
RatingSummary
An aggregated rating overview: a headline average with the total review count, followed by a per-rating histogram. Bar lengths are scaled relative to the most-reviewed rating, so the busiest rating always fills the track. The histogram is one shared grid (with subgrid rows) rather than per-row flex: the label column is sized by the widest label across all rows, so a width difference between labels (e.g. “1 review” vs “3 reviews”) never changes a row’s track length — every bar’s right edge stays aligned. The brand star is decorative; the header and each histogram row exposerole="img" with an accessible label (override via formatAverageLabel / formatRatingLabel) so the single-star-plus-number reads clearly.
RatingCount[]
required
Per-rating review counts. Order is not significant — rows always render from
maxRating down to 1, and any rating without an entry renders as zero. Entries are expected to use whole-number ratings within 1–maxRating; any outside that range are ignored, including in the derived total and average.number
Average rating shown in the header. Defaults to the count-weighted mean of
distribution; provide it to display a server-computed average instead.((average: string, maxRating: number, total: number) => string)
Builds the accessible label for the header. Override to localise the screen-reader text.
average is the already-formatted average string.((count: number) => string)
Formats a review count into its label, without surrounding parentheses. Used for the visible text and as the count portion of the default accessible labels.
((rating: number, count: number) => string)
Builds the accessible label for each histogram row. Override to localise the screen-reader text.
number
default:"5"
Highest possible rating. Sets how many histogram rows render.
Exported types
Also exported from@fanvue/ui: RatingCount, RatingSummaryProps.
Setup: Installation · Theming