Rating

Stable
WCAG 2.2 evidence
RTL

Read-only star rating: five stars with an optional score and review count. Use RatingInput to collect a rating. Presentational: renders in React Server Components. The stars are one image (role="img") named by a text alternative such as "4.5 out of 5", so the value never depends on colour or on counting stars (WCAG 1.1.1, 1.4.1). Empty stars keep a border/input rim (WCAG 1.4.11). Half stars fill from the inline start, so the row reads right to left in RTL layouts. Consumer duties: translate label, format score and count for the locale.

import { Rating } from "@nexera-ui/react";

Loading example…

4
examples: 5
props: 2
live controls: 1
platform: 6
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

size

label

Generated code

import { Rating } from "@nexera-ui/react";

<Rating />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

Fractional value

Any value: the stars round to the nearest half, the text alternative keeps one decimal ("4.3 out of 5").

Loading example…

app.tsx

import { Rating } from "@nexera-ui/react";

<Rating value={4.3} score="4.3" count="(212 reviews)" />;

Narrow container

The count wraps under the stars in a narrow container instead of overflowing.

Loading example…

app.tsx

import { Rating } from "@nexera-ui/react";

export function NarrowContainer() {
  return (
    <div className="w-40 border border-dashed border-default p-2">
      <Rating value={3.5} size="md" score="3.5" count="(1,284 reviews from verified employees)" />
    </div>
  );
}

Right to left

Right-to-left: the stars fill from the right and half stars fill their right half. Translate label.

Loading example…

app.tsx

import { Rating } from "@nexera-ui/react";

const sizes = ["sm", "md", "lg"] as const;

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-4">
      {sizes.map((size) => (
        <Rating
          key={size}
          value={3.5}
          size={size}
          score="3.5"
          count="(128 تقييم)"
          label="3.5 من 5"
        />
      ))}
    </div>
  );
}

Props 5

Press "Try it" on a card to load that prop into the playground.

valueNexera

number

The rating, from 0 to 5. The stars show it rounded to the nearest half; the text alternative keeps one decimal. Values outside the range are clamped.

sizeNexera

"sm" | "md" | "lg"

Star size: 16, 24 or 32 px stars, with the matching score and count type.

scoreNexera

ReactNode

Visible score after the stars, for example "4.5" formatted for your locale. Shown when provided. It repeats the text alternative, so it is hidden from assistive technology.

countNexera

ReactNode

Visible review count, for example "(128 reviews)". Shown when provided; read by assistive technology after the rating.

labelNexera

string

Text alternative of the stars, read by assistive technology instead of the five star images (WCAG 1.1.1). Translate it for your locale.

* 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.

0 px · drag the corner

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:.

Usage

<Rating className="shadow-sm" />

Theme studio

Rating

Try every prop. Copy the code.

Examples 3

Fractional value

Narrow container

Right to left

Props 5

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components