Search nx-ui
Jump to any foundation, component, block or example.
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).
$
Registry itembunx shadcn@latest add @nx-ui/ratingInstalls 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.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating. In interactive mode this is the committed value. |
defaultValue | number | — | — |
onValueChange | (value: number) => void | — | — |
max | number | 5 | — |
size | keyof typeof sizeClass | "md" | — |
readOnly | boolean | false | Display-only: renders fractional stars, no interaction. |
disabled | boolean | false | — |
…extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValu…