Rating

A star rating in display mode (fractional, via a clip-path fill) and interactive mode (click or keyboard to set a whole-star score).

$bunx shadcn@latest add @nx-ui/rating
Registry item
Installs withutils

Interactive

Hover to preview, click to set. This organisation is currently rated {score}/5.

Selected: 4 of 5

Fractional display

Read-only ratings render partial stars.

4.5
3.2
2.8
5.0

Sizes

Disabled

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
valuenumber0Current rating. In interactive mode this is the committed value.
defaultValuenumber
onValueChange(value: number) => void
maxnumber5
sizekeyof typeof sizeClass"md"
readOnlybooleanfalseDisplay-only: renders fractional stars, no interaction.
disabledbooleanfalse

…extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValu…