The rating component can be used to show user reviews and testimonials in the form of stars, reviews, and labels based on multiple styles and layouts built with React and Tailwind CSS.

Check out the rating components from Flowbite React and choose one that suits your needs and customize them using the custom props API and the utility classes from Tailwind CSS.

Start using the rating component by importing it from the flowbite-react library:

import { Rating } from "flowbite-react";

Default rating#

Use this example to show a list of star elements that can be either filled or not to indicate the average user reviews of a product by using the filled prop from React on the <Rating> component.

Rating with text#

This example can be used to show a text label next to the user review stars to indicate the average score.

Rating count#

Use this example to show the number of reviews a product received next to the average stars and scores.

Star sizing#

The size prop can be used on the <Rating> component to customize the default size of the rating component. You can choose from md or lg and the default is sm.

Advanced rating#

Use this component as an advanced layout for user ratings that include both the average score, total rating count, and a percentage filled progress bar to indicate in depth statistics of how many reviews were received for each score category.

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

Rating theme#

{
  "root": {
    "base": "flex items-center"
  },
  "star": {
    "empty": "text-gray-300 dark:text-gray-500",
    "filled": "text-yellow-400",
    "sizes": {
      "sm": "h-5 w-5",
      "md": "h-7 w-7",
      "lg": "h-10 w-10"
    }
  }
}

Advanced rating theme#

{
  "base": "flex items-center",
  "label": "text-sm font-medium text-cyan-600 dark:text-cyan-500",
  "progress": {
    "base": "mx-4 h-5 w-2/4 rounded bg-gray-200 dark:bg-gray-700",
    "fill": "h-5 rounded bg-yellow-400",
    "label": "text-sm font-medium text-cyan-600 dark:text-cyan-500"
  }
}

References#