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.

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

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>

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>
<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>

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>