Tailwind CSS Rating - 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 examples 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.

Rating Demo

Here's how to implement a simple Rating component. It can be used for providing rating to the product or app in your website.

import { Rating } from "@material-tailwind/react";

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

export function RatingDemo() {
  return <Rating value={4} />;
}

Rating Colors

We provide different colors for Rating component like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the Rating component color.

In the example below, we've showcased the different colors for Rating color that you can use in your project.

import { Rating } from "@material-tailwind/react";

export function RatingColors() {
  return (
    <div className="flex flex-col gap-4">
      <Rating value={4} color="primary" />
      <Rating value={4} color="secondary" />
      <Rating value={4} color="info" />
      <Rating value={4} color="success" />
      <Rating value={4} color="warning" />
      <Rating value={4} color="error" />
    </div>
  );
}
import { Rating } from "@material-tailwind/react";

export function RatingColors() {
  return (
    <div className="flex flex-col gap-4">
      <Rating value={4} color="primary" />
      <Rating value={4} color="secondary" />
      <Rating value={4} color="info" />
      <Rating value={4} color="success" />
      <Rating value={4} color="warning" />
      <Rating value={4} color="error" />
    </div>
  );
}

Readonly Rating

You can use the readonly prop to make the Rating component readonly, it's useful for just showing rating and prevent the user from interacting with the Rating component.

import { Rating } from "@material-tailwind/react";

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

export function ReadonlyRating() {
  return <Rating value={4} readonly />;
}

Custom Rating Icon

You can use the ratedIcon and unratedIcon props for customizing the icons for rated and unrated states of Rating component. In the example below, we've showcased custom icons used for Rating component that you can use in your project.

import { Rating } from "@material-tailwind/react";
import { Heart, HeartSolid } from "iconoir-react";

export function CustomRatingIcon() {
  return <Rating value={4} unratedIcon={Heart} ratedIcon={HeartSolid} />;
}
import { Rating } from "@material-tailwind/react";
import { Heart, HeartSolid } from "iconoir-react";

export function CustomRatingIcon() {
  return <Rating value={4} unratedIcon={Heart} ratedIcon={HeartSolid} />;
}

Rating with Text

The Rating component can be used with a label to provide more context to the user. In the example below, we've added a label by using the Rating and Typography components together.

4

Based on 134 Reviews

import * as 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">
      <Typography color="primary" className="font-semibold">
        {rated}
      </Typography>
      <Rating value={4} onValueChange={(value) => setRated(value)} />
      <Typography color="default" className="font-semibold">
        Based on 134 Reviews
      </Typography>
    </div>
  );
}
import * as 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">
      <Typography color="primary" className="font-semibold">
        {rated}
      </Typography>
      <Rating value={4} onValueChange={(value) => setRated(value)} />
      <Typography color="default" className="font-semibold">
        Based on 134 Reviews
      </Typography>
    </div>
  );
}

Rating with Comment

Use the example below for providing testimonials and feedbacks in your website, the example used Typography, Avatar and Rating components to make a user feedback component.

"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 as="p" type="h5" className="mb-6">
        &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 className="mt-4 font-bold">Tania Andrew</Typography>
      <Typography as="p" type="small" className="mb-4 text-foreground">
        Lead Frontend Developer
      </Typography>
      <Rating value={4} color="warning" readonly />
    </div>
  );
}
import { Typography, Avatar, Rating } from "@material-tailwind/react";

export function RatingWithComment() {
  return (
    <div className="px-8 text-center">
      <Typography as="p" type="h5" className="mb-6">
        &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 className="mt-4 font-bold">Tania Andrew</Typography>
      <Typography as="p" type="small" className="mb-4 text-foreground">
        Lead Frontend Developer
      </Typography>
      <Rating value={4} color="warning" readonly />
    </div>
  );
}