Yugen UI

Rating

Rating lets people score with stars; RatingDisplay shows a read-only score.

Rating is a radio group: Tab into it, use the arrow keys to change the score, hover to preview. Supports half stars (step 0.5), three colors (brand, marigold, neutral) and four sizes. RatingDisplay adds the value and the number of ratings.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Rating, RatingDisplay } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Color

neutral (default), brand, marigold.

3.5 / 5 stars

Half stars (controlled)

step={0.5}: each star has two click targets.

RatingDisplay

Read-only display with the value and count; compact shows a single star.

Size

small (12px), medium (16px), large (20px), extra-large (28px, default).

Usage

Do
  • Always add an aria-label that names what is being rated.
  • Show RatingDisplay with the count so people can judge how reliable the score is.
  • Use one star color across the whole product.
Don't
  • Don't use Rating for choices that aren't a scale. Use RadioGroup.
  • Don't rely on star color alone. Show the numeric value as well.

Props

Prop · TypeDefaultDescription
value / defaultValuenumberDefault: 0Current score (0 = not rated).
onValueChange(value: number) => voidDefault: —Called when a score is picked.
maxnumberDefault: 5Number of stars.
step1 | 0.5Default: 1Allows half stars.
color"neutral" | "brand" | "marigold"Default: "neutral"Star color.
size"small" | "medium" | "large" | "extra-large"Default: "extra-large"Star size 12 / 16 / 20 / 28px.
itemLabel(value: number) => stringDefault: —Screen reader label for each score.
RatingDisplay.count / compactnumber / booleanDefault: —Number of ratings; show a single star.
RatingDisplay.sizeRatingSizeDefault: "medium"Star and text size.
RatingDisplay.showValuebooleanDefault: trueShows the value next to the stars. The old name hideValue (inverted) is deprecated (removed in 1.0).

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.rating

Key · TypeDefault (English)messagesVi
item(value: number, valueText: string) => string

Nhãn đọc cho từng giá trị của Rating; valueText là value đã định dạng theo locale.

Default (English)(value, valueText) => (value === 1 ? `${valueText} star` : `${valueText} stars`)messagesVi(_value, valueText) => `${valueText} sao`
summary(valueText: string, max: number) => string

Nhãn đọc của RatingDisplay; valueText là điểm đã định dạng theo locale.

Default (English)(valueText, max) => `Rated ${valueText} out of ${max} stars`messagesVi(valueText, max) => `Đánh giá ${valueText} trên ${max} sao`
count(count: number, countText: string) => string

Số lượt đánh giá, nối sau summary (", …"); countText là count đã định dạng theo locale.

Default (English)(count, countText) => (count === 1 ? `${countText} rating` : `${countText} ratings`)messagesVi(_count, countText) => `${countText} lượt`