Rating
- Stable
- WCAG 2.2 evidence
- RTL
Summary of survey or review ratings: the average with its stars and the number of responses,
next to the share of each star level. Presentational: renders in React Server Components. Every bar has its percentage as text and every level is named ("5 stars"), so nothing depends on bar length or colour
(WCAG 1.1.1, 1.3.1, 1.4.1); the distribution is a list. The card is a size container: the average stacks above the
distribution below 480 px and sits beside it from there (WCAG 1.4.10). Text wraps. Consumer duties: do not show a summary for fewer than 5 responses; translate label, levelLabel,
total; format numbers for the locale; put a heading before the card.
import { RatingSummary } from "@nexera-ui/react";- 4
- examples
- 6
- props
- 1
- live controls
- 1
- platform
- 6
- WCAG criteria
- 1
- block uses it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { RatingSummary } from "@nexera-ui/react";
<RatingSummary />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
Narrow container
Below a 480 px container the average stacks above the distribution.
import { RatingSummary } from "@nexera-ui/react";
const distribution: RatingSummaryBucket[] = [
{ stars: 5, percent: 58 },
{ stars: 4, percent: 24 },
{ stars: 3, percent: 10 },
{ stars: 2, percent: 5 },
{ stars: 1, percent: 3 },
];
<div className="w-full max-w-[20rem]">
<RatingSummary value={4.3} average="4.3" total="212 responses" distribution={distribution} />
</div>;
Long content
Long totals and translated row names wrap.
import { RatingSummary } from "@nexera-ui/react";
const distribution: RatingSummaryBucket[] = [
{ stars: 5, percent: 58 },
{ stars: 4, percent: 24 },
{ stars: 3, percent: 10 },
{ stars: 2, percent: 5 },
{ stars: 1, percent: 3 },
];
<div className="w-full max-w-[35rem]">
<RatingSummary
value={4.3}
average="4.3"
total="212 responses from the engineering, people and finance departments in the last two quarters"
distribution={distribution}
/>
</div>;
Right to left
Right-to-left: bars grow from the right; level names, percentages and the rating label are translated.
import { RatingSummary } from "@nexera-ui/react";
const distribution: RatingSummaryBucket[] = [
{ stars: 5, percent: 58 },
{ stars: 4, percent: 24 },
{ stars: 3, percent: 10 },
{ stars: 2, percent: 5 },
{ stars: 1, percent: 3 },
];
<div className="w-full max-w-[35rem]">
<RatingSummary
value={4.3}
average="٤٫٣"
total="٢١٢ إجابة"
distribution={distribution.map((bucket) => ({
...bucket,
percentLabel: `${String(bucket.percent)}٪`,
}))}
label="4.3 من 5"
levelLabel={(stars) => `${String(stars)} نجوم`}
/>
</div>;
Props 6
Press "Try it" on a card to load that prop into the playground.
6 props shown
value*NexeranumberAverage rating from 0 to 5. Drives the stars (rounded to the nearest half) and their text alternative.
averageNexeraReactNodeVisible average, for example "4.3" formatted for your locale. The stars' text alternative already says it, so this text is hidden from assistive technology.
totalNexeraReactNodeNumber of responses, for example "212 responses". Shown when provided.
distribution*Nexerareadonly RatingSummaryBucket[]Rows of the distribution, in display order. Each row shows its percentage as text.
labelNexerastringText alternative of the stars. Translate it.
levelLabelNexera(stars: number) => stringAccessible name of a row's level, read before its percentage ("5 stars, 58%"). Translate it, with your locale's plural rules.
* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.
Accessible by default.
Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.
WCAG 2.2 evidence
4 direct · 2 supporting- 1.1.1Non-text ContentLevel A · tested directly
- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.1Use of ColorLevel A · tested directly
- 1.4.10ReflowLevel AA · supporting test
- 1.4.12Text SpacingLevel AA · supporting test
- 4.1.2Name, Role, ValueLevel A · tested directly
Fits any width.
Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.
Styling hooks
Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.
<RatingSummary className="shadow-sm" />Used in blocks
Related components
- CalendarDayOne day of a {@link CalendarMonth } grid, built on React Aria `CalendarCell`: a `gridcell` whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with `aria-selected`, `aria-disabled` and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2).
- CalendarMonthA month calendar for picking a date or a date range: header with previous / next buttons and the localised month name, weekday row, and six weeks of `CalendarDay`s.
- CheckboxThe bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree.
- CheckboxCardA large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits).
- CheckboxFieldA checkbox with a label and optional helper text: the box (the same element as `Checkbox`) followed by the label and description, applied on submit.
- ColorInputA hex colour field with a swatch and a picker popover.
- ColorPickerPicks a colour.
- ColorTokenCardDocumentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text.