React Rating - Flowbite

Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes

Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers.

You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.

Default rating

<Rating>
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
</Rating>

Rating with text

4.95 out of 5

<Rating>
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <p className="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
    4.95 out of 5
  </p>
</Rating>

Rating count

4.95

73 reviews
<Rating>
  <Rating.Star />
  <p className="ml-2 text-sm font-bold text-gray-900 dark:text-white">
    4.95
  </p>
  <span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400" />
  <a
    className="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
    href="#"
  >
    73 reviews
  </a>
</Rating>

Star sizing

<Rating>
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
</Rating>
<Rating size="md">
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
</Rating>
<Rating size="lg">
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
</Rating>

Advanced rating

4.95 out of 5

1,745 global ratings

5 star
70%
4 star
17%
3 star
8%
2 star
4%
1 star
1%
<Rating>
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <Rating.Star />
  <p className="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
    4.95 out of 5
  </p>
</Rating>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
  1,745 global ratings
</p>
<Rating.Advanced percentFilled={70}>
  5 star
</Rating.Advanced>
<Rating.Advanced percentFilled={17}>
  4 star
</Rating.Advanced>
<Rating.Advanced percentFilled={8}>
  3 star
</Rating.Advanced>
<Rating.Advanced percentFilled={4}>
  2 star
</Rating.Advanced>
<Rating.Advanced percentFilled={1}>
  1 star
</Rating.Advanced>