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:

'use client';

import { Rating } from 'flowbite-react';

Table of Contents#

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
  • React TypeScript
'use client';

import { Rating } from 'flowbite-react';

export default function DefaultRating() {
  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

  • React TypeScript
'use client';

import { Rating } from 'flowbite-react';

export default function RatingWithText() {
  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

  • React TypeScript
'use client';

import { Rating } from 'flowbite-react';

export default function RatingCount() {
  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
        className="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
        href="#"
      >
        <p>
          73 reviews
        </p>
      </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
  • React TypeScript
'use client';

import { Rating } from 'flowbite-react';

export default function StarSizing() {
  return (
    <>
      <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>
    </>
  )
}

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%
  • React TypeScript
'use client';

import { Rating } from 'flowbite-react';

export default function AdvancedRating() {
  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
        className="mb-2"
        percentFilled={70}
      >
        <p>
          5 star
        </p>
      </Rating.Advanced>
      <Rating.Advanced
        className="mb-2"
        percentFilled={17}
      >
        <p>
          4 star
        </p>
      </Rating.Advanced>
      <Rating.Advanced
        className="mb-2"
        percentFilled={8}
      >
        <p>
          3 star
        </p>
      </Rating.Advanced>
      <Rating.Advanced
        className="mb-2"
        percentFilled={4}
      >
        <p>
          2 star
        </p>
      </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.

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

References#