Free and open-source React rating badge and star components built for modern applications and websites. These rating badge and stars are built using React Aria and styled with Tailwind CSS.
Best Design Tool
2,000+ reviews
Installation
You can add this rating badge and stars component using our CLI or manually:
npx untitledui@latest add rating-badge
Rating badge and stars examples
Below are examples and variations of this rating badge and stars component:
Rating stars
Rating stars are used to display the rating of a product, service, or anything else. You can change the rating (between 0 and 5) of the rating stars component by passing the rating prop.
Rating badge
This rating badge is especially useful for displaying awards, ratings, and reviews.
You can customize the rating badge by passing the rating prop. In addition, you can also change the title and subtitle of the rating badge by passing the title and subtitle props.
Best Design Tool
2,000+ reviews
API reference
RatingBadge
Import RatingBadge from @/components/foundations/rating-badge. Renders a <div> element.
Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.
FAQs
Please refer to our frequently asked questions page for more.
Pass a decimal to the rating prop, for example rating={3.5}. Each star is filled proportionally, so 3.5 shows three full stars and one half-filled star. Values below 0 or above the number of stars are clamped.
Yes, set the stars prop on RatingStars. It defaults to 5, and rating is clamped between 0 and the stars value. RatingBadge always renders five stars.
Pass Tailwind classes to starClassName on RatingStars, for example starClassName="size-6". Stars default to size-5 and text-yellow-400, and your classes are merged over these defaults. Use className to style the wrapper, such as the gap between stars.
Set theme to "light". This makes the wreath white and switches the title and subtitle to the on-brand text colors. The default is "dark", which uses the primary and secondary text colors for light backgrounds.
RatingBadge defaults title to "Best Design Tool" and subtitle to "2,000+ reviews", and shows five full stars when rating is omitted. Pass your own title, subtitle and rating to replace them.
No. RatingStars is display-only: it renders SVG stars inside a div with no click or keyboard handling. The stars have no text alternative, so show the score as text nearby (for example "4.5 out of 5") for screen reader users.