rating-bar.mdx

title	Tailwind CSS Rating Bar for React - Material Tailwind
description	Customise your web projects with our complex rating bar component for Tailwind CSS and React using Material Design guidelines.
navigation	rating rating-colors readonly-rating custom-rating-icon rating-with-text rating-with-comment more-examples
github	rating-bar
prev	radtio-button
next	select

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

<CodePreview component={<RatingExamples.DefaultRating />}>

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.

<CodePreview component={<RatingExamples.RatingColors />}>

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.

<CodePreview component={<RatingExamples.ReadonlyRating />}>

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.

<CodePreview component={<RatingExamples.CustomRatingIcon />}>

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.

<CodePreview component={<RatingExamples.RatingWithText />}>

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.

<CodePreview component={<RatingExamples.RatingWithComment />}>

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.