Rating | Pol-ui - A beautiful and functional UI library for React and Next.js

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 Pol-ui and choose one that suits your needs and customize them using the custom props API and the utility classes from Tailwind CSS.

Importation

Import the component from pol-ui to use the Rating element:

import { Rating } from "pol-ui";

Default Rating

import { Rating } from "pol-ui";
 
export const RatingComponent = (): JSX.Element => {
  return <Rating />;
};

Props

Prop name	Type	Default	Description
theme	RatingTheme		The theme object to customize the appearance of the Rating component.
color	Colors	ColorsEnum.primary	The color of the Rating component.

💡

You can also provide any prop comming from the HTML input tag.

Examples

Custom stars amount

To modify the amount of stars in the rating component, you can use the stars prop.

Custom star amount Rating

import { Rating } from "pol-ui";
 
export const RatingComponent = (): JSX.Element => {
  return <Rating stars={10} />;
};

Custom filled stars amount

To change the amount of filled stars in the rating component, you can use the filled prop.

Custom filled amount Rating

import { Rating } from "pol-ui";
 
export const RatingComponent = (): JSX.Element => {
  return (
    <div className="flex flex-col gap-4 w-full">
      <Rating stars={2} filled={1} />
      <Rating stars={2} filled={3} />
      <Rating stars={10} filled={3} />
      <Rating stars={10} filled={5} />
      <Rating stars={10} filled={10} />
    </div>
  );
};

Custom size

To change the size of the rating component, you can use the size prop.

Custom size

import { Rating, ratingTheme, MainSizes } from "pol-ui";
export const CustomSize = (): JSX.Element => (
  <div className="flex flex-col gap-4 w-full">
    {Object.keys(ratingTheme.star.size).map(size => (
      <Rating key={size} size={size as MainSizes} />
    ))}
  </div>
)

Custom icon

To change the default start icon in the rating component, you can use the icon prop.

Custom icon

import { Rating } from "pol-ui";
import {
  TbCactus,
  TbAdjustmentsBolt,
  TbPhotoFilled,
  TbLayout,
  TbPhoneCheck,
} from "react-icons/tb";
export const CustomIcon = (): JSX.Element => (
  <div className="flex flex-col gap-4 w-full">
    <Rating starIcon={TbCactus} filled={1} />
    <Rating starIcon={TbAdjustmentsBolt} filled={2} />
    <Rating starIcon={TbPhotoFilled} filled={3} />
    <Rating starIcon={TbLayout} filled={4} />
    <Rating starIcon={TbPhoneCheck} filled={5} />
  </div>
);

More details

You can combine the rating component with any other component to create a more detailed rating component.

More details

import { Rating, Progress } from "pol-ui";
export const MoreDetails = (): JSX.Element => (
  <div className="flex flex-col gap-4 w-full">
    <Rating />
    <section className="flex flex-col gap-2">
      <div className="flex gap-2 items-center">
        5 stars
        <Progress progress={85} className="w-[400px]" size={"lg"} />
        2174 votes
      </div>
      <div className="flex gap-2 items-center">
        4 stars
        <Progress progress={42} className="w-[400px]" size={"lg"} />
        1234 votes
      </div>
      <div className="flex gap-2 items-center">
        3 stars
        <Progress progress={6} className="w-[400px]" size={"lg"} />
        23 votes
      </div>
      <div className="flex gap-2 items-center">
        2 stars
        <Progress progress={12} className="w-[400px]" size={"lg"} />
        432 votes
      </div>
      <div className="flex gap-2 items-center">
        1 stars
        <Progress progress={23} className="w-[400px]" size={"lg"} />
        432 votes
      </div>
    </section>
  </div>
);

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface RatingTheme {
  root: { base: string };
  field: {
    base: string;
    input: {
      base: string;
      sizes: MainSizesType;
    };
  };
}