Rating

A star scale that works as an input or a read-only score, plus a compact badge for review counts.

tsx

1import { Rating, RatingBadge } from "@pestoui/core"

Interactive

Hover, click or use the arrow keys — the stars are a roving-focus radio group.

3 of 5 stars

readOnly swaps the buttons for a single labelled image and lets the last star fill partially.

For lists and cards where a full star row is too heavy. The value is always shown to one decimal.

4.84.8(1,280)4.8(1,280)

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Star box size. RatingBadge takes the same scale.
value	number	—	Controlled value. Supports fractions (4.5) when read-only. Required on RatingBadge.
defaultValue	number	0	Uncontrolled starting value.
max	number	5	How many stars to render.
readOnly	boolean	false	Renders static stars with role="img" instead of an interactive radio group.
onChange	(value: number) => void	—	Fires with the picked star value (1-based) on click or arrow key.
count	number	—	RatingBadge only — review count rendered in parentheses.
locale	string	—	RatingBadge only — locale for the count's digit grouping; the browser's own when unset. Set it on a server-rendered page, so the server's markup and the browser's first render agree.

Pesto UI · 117 documented components