React Rating - Flowbite

Get started with the rating component from Flowbite React to show testimonials and user reviews of your products using stars, labels and advanced layouts

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.

Edit on GitHub
"use client";

import { Rating } from "flowbite-react";

function Component() {
  return (
    <Rating>
      <Rating.Star />
      <Rating.Star />
      <Rating.Star />
      <Rating.Star />
      <Rating.Star filled={false} />
    </Rating>
  );
}

Rating with text#

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

Edit on GitHub

4.95 out of 5

"use client";

import { Rating } from "flowbite-react";

function Component() {
  return (
    <Rating>
      <Rating.Star />
      <Rating.Star />
      <Rating.Star />
      <Rating.Star />
      <Rating.Star filled={false} />
      <p className="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
    </Rating>
  );
}

Rating count#

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

Edit on GitHub

4.95

73 reviews
"use client";

import { Rating } from "flowbite-react";

function Component() {
  return (
    <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 href="#" className="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">
        73 reviews
      </a>
    </Rating>
  );
}

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.

Edit on GitHub
"use client";

import { Rating } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-col gap-2">
      <Rating>
        <Rating.Star />
        <Rating.Star />
        <Rating.Star />
        <Rating.Star />
        <Rating.Star filled={false} />
      </Rating>
      <Rating size="md">
        <Rating.Star />
        <Rating.Star />
        <Rating.Star />
        <Rating.Star />
        <Rating.Star filled={false} />
      </Rating>
      <Rating size="lg">
        <Rating.Star />
        <Rating.Star />
        <Rating.Star />
        <Rating.Star />
        <Rating.Star filled={false} />
      </Rating>
    </div>
  );
}

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.

Edit on GitHub

4.95 out of 5

1,745 global ratings

5 star
70%
4 star
17%
3 star
8%
2 star
4%
1 star
1%
"use client";

import { Rating } from "flowbite-react";

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

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#