Rating Stars React component
An animated star rating input with half-star precision, keyboard support, a dynamic color range, and an optional progress bar.
About the Rating Stars component
Rating Stars is an animated star rating that works as an input or as a read-only display. It supports half stars, a color range that shifts from red through yellow to green with the score, an optional glow, and a label showing the score as a number, fraction, percentage or word, with an optional review count and progress bar.
As an input it is keyboard accessible: arrow keys change the rating in steps of one or a half, Home and End go to the ends. Size presets from xs to xl, the number of stars and all colors are props.
When to use it
Use it as an input in review and feedback forms, and read-only to show average ratings on product cards, testimonials and review summaries.
Installation
Add the Rating Stars component to your project with the shadcn CLI. It lands in components/rating-stars.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/rating-starsOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<RatingStars /> accepts 32 props, all optional.
| Prop | Type | Default |
|---|---|---|
| defaultValue | number | 3 |
| value | number | — |
| onRatingChange | (value: number) => void | — |
| maxStars | number | 5 |
| readOnly | boolean | false |
| allowHalf | boolean | true |
| sizePreset | "xs" | "sm" | "md" | "lg" | "xl" | "custom" | "md" |
| starSize | number | 40 |
| gap | number | 8 |
| fillColor | string | "#F5C518" |
| emptyColor | string | "#9CA3AF" |
| strokeWidth | number | 1.5 |
- defaultValuenumberDefault: 3
- valuenumber
- onRatingChange(value: number) => void
- maxStarsnumberDefault: 5
- readOnlybooleanDefault: false
- allowHalfbooleanDefault: true
- sizePreset"xs" | "sm" | "md" | "lg" | "xl" | "custom"Default: "md"
- starSizenumberDefault: 40
- gapnumberDefault: 8
- fillColorstringDefault: "#F5C518"
- emptyColorstringDefault: "#9CA3AF"
- strokeWidthnumberDefault: 1.5
Show all 32 propsShow fewer
| colorRange | boolean | false |
| colorLow | string | "#EF4444" |
| colorMid | string | "#F5C518" |
| colorHigh | string | "#22C55E" |
| showGlow | boolean | false |
| glowSize | number | 8 |
| labelPosition | "right" | "left" | "top" | "bottom" | "right" |
| showLabel | boolean | true |
| labelStyle | "score" | "fraction" | "percent" | "label" | "score" |
| showReviewCount | boolean | false |
| reviewCount | number | 1284 |
| fontSize | number | 16 |
| textColor | string | "currentColor" |
| showBar | boolean | false |
| barHeight | number | 6 |
| barRadius | number | 999 |
| barTrackColor | string | "rgba(128,128,128,0.2)" |
| animated | boolean | true |
| animStyle | "instant" | "wave" | "instant" |
| className | string | — |
- colorRangebooleanDefault: false
- colorLowstringDefault: "#EF4444"
- colorMidstringDefault: "#F5C518"
- colorHighstringDefault: "#22C55E"
- showGlowbooleanDefault: false
- glowSizenumberDefault: 8
- labelPosition"right" | "left" | "top" | "bottom"Default: "right"
- showLabelbooleanDefault: true
- labelStyle"score" | "fraction" | "percent" | "label"Default: "score"
- showReviewCountbooleanDefault: false
- reviewCountnumberDefault: 1284
- fontSizenumberDefault: 16
- textColorstringDefault: "currentColor"
- showBarbooleanDefault: false
- barHeightnumberDefault: 6
- barRadiusnumberDefault: 999
- barTrackColorstringDefault: "rgba(128,128,128,0.2)"
- animatedbooleanDefault: true
- animStyle"instant" | "wave"Default: "instant"
- classNamestring
Collections
Use-case pages that compare Rating Stars with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Rating Stars FAQ
- Can it show half stars?
- Yes, allowHalf (on by default) lets people pick halves by clicking the left half of a star, and read-only ratings like 4.5 render half-filled.
- How do I display an average rating without letting people change it?
- Set readOnly and pass the average as value; turn on showReviewCount with reviewCount to show how many reviews it's based on.
- How do I get the selected rating?
- Use onRatingChange, or control it with value.
- Is it accessible?
- Yes. As an input it's a slider with aria-valuenow and aria-valuetext and full arrow-key support; read-only it's marked aria-readonly.
