Rating

Beta

An average star rating with the score and the review count, read as one sentence: “Rated 4.8 out of 5”.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add rating
Also works with shadcn: npx shadcn@latest add @ritla/rating
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

rating.tsx

import { Rating } from "@/components/ui/rating";<Rating value={4.8} count={126} />

Prop	Type	Default	Description
`value`	`number`	None	The average, 0 to `max`. Stars round to the nearest star; the score shows one decimal.
`max`	`number`	`5`	The number of stars.
`count`	`number`	None	The number of reviews, in brackets.
`showScore / showCount`	`boolean`	`true`	Figma's Show score and Show count.
`label`	`string`	None	The accessible name. Default “Rated 4.8 out of 5, 126 reviews” in the page language.

The whole rating is one image (role="img") with its name, so screen readers never read the stars one by one.
Filled stars are icon/warning/dim and empty ones icon/gray/faint: the difference is in the fill as well, never color alone.

The stars fill from the right, with the score and count after them on the left, because the row follows the page direction.

Numerals: The score and count use the page numerals: 4.8, or ٤٫٨ with numerals on RitlaProvider.
Arabic typography: label-14 Semibold for the score, label-14 in gray/muted for the count.