Tailwind CSS Rating Bar - React

Use our Tailwind CSS Rating component to show reviews and ratings in your web projects. The Rating can be used as a visual identifier for reviews and rating on your website.

See below our beautiful Rating example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.


import { Rating } from "@material-tailwind/react";
 
export function DefaultRating() {
  return <Rating value={4} />;
}

Rating Colors

The Rating component comes with 20 different colors that you can change it using the unratedColor prop for the unrated state of Rating component and ratedColor prop for the rated state of Rating component.

import { Rating } from "@material-tailwind/react";
 
export function RatingColors() {
  return (
    <div className="flex flex-col gap-4">
      <Rating unratedColor="amber" ratedColor="amber" />
      <Rating unratedColor="blue" ratedColor="blue" />
      <Rating unratedColor="green" ratedColor="green" />
      <Rating unratedColor="red" ratedColor="red" />
    </div>
  );
}

Readonly Rating

You can make a Rating component readonly by using the readonly prop. This will prevent the user from changing the rating.

import { Rating } from "@material-tailwind/react";
 
export function ReadonlyRating() {
  return <Rating value={4} readonly />;
}

Custom Rating Icon

You can customize the Rating component icon by using the unratedIcon and ratedIcon props.

import { Rating } from "@material-tailwind/react";
 
function RatedIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-6 w-6"
    >
      <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
    </svg>
  );
}
 
function UnratedIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className="h-6 w-6"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
      />
    </svg>
  );
}
 
export function CustomRatingIcon() {
  return (
    <Rating
      ratedColor="red"
      ratedIcon={<RatedIcon />}
      unratedIcon={<UnratedIcon />}
    />
  );
}

Rating with Text

Use the example below for a Rating component with helper text.

4.7

Based on 134 Reviews

import React from "react";
import { Rating, Typography } from "@material-tailwind/react";
 
export function RatingWithText() {
  const [rated, setRated] = React.useState(4);
 
  return (
    <div className="flex items-center gap-2 font-bold text-blue-gray-500">
      {rated}.7
      <Rating value={4} onChange={(value) => setRated(value)} />
      <Typography color="blue-gray" className="font-medium text-blue-gray-500">
        Based on 134 Reviews
      </Typography>
    </div>
  );
}

Rating with Comment

Use the example below for a Rating component with comment.

"This is an excellent product, the documentation is excellent and helped me get things done more efficiently."

image
Tania Andrew

Lead Frontend Developer

import { Typography, Avatar, Rating } from "@material-tailwind/react";
 
export function RatingWithComment() {
  return (
    <div className="px-8 text-center">
      <Typography variant="h2" color="blue-gray" className="mb-6 font-medium">
        &quot;This is an excellent product, the documentation is excellent and
        helped me get things done more efficiently.&quot;
      </Typography>
      <Avatar
        src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        alt="image"
        size="lg"
      />
      <Typography variant="h6" className="mt-4">
        Tania Andrew
      </Typography>
      <Typography color="gray" className="mb-4 font-normal">
        Lead Frontend Developer
      </Typography>
      <Rating value={5} readonly />
    </div>
  );
}

Explore More Tailwind CSS Examples

Looking for more rating bar examples? Check out our Overview Sections from Material Tailwind Blocks.