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

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

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