Skip to content
GitHub

Rating

Star rating display for a numeric score.

import { Rating } from "@/components/ui/pxl/rating"


export default function RatingDemo() {
  return <Rating rating={4} />
}

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/rating

Usage

Section titled “Usage”
import { Rating } from "@/components/ui/pxl/rating"
<Rating rating={4.5} showValue editable />

Examples

Section titled “Examples”

Decimal

Section titled “Decimal”
4.5
import { Rating } from "@/components/ui/pxl/rating"


export default function RatingDecimalExample() {
  return <Rating rating={4.5} showValue={true} />
}

Editable

Section titled “Editable”
0.0
"use client";


import { useState } from "react";
import { toast } from "sonner";


import { Rating } from "@/components/ui/pxl/rating";


export default function RatingEditableExample() {
  const [productRating, setProductRating] = useState(0);


  const handleRatingChange = (rating: number) => {
    setProductRating(rating);


    toast.success("Rated {rating} out of 5", {
      description: `Rated ${rating} out of 5`,
    });
  };


  return (
    <div className="space-y-8">
      <Rating
        rating={productRating}
        editable={true}
        onRatingChange={handleRatingChange}
        showValue={true}
      />
    </div>
  );
}

Custom Icons

Section titled “Custom Icons”
import { Rating, RatingIcon } from "@/components/ui/pxl/rating"


export default function CustomIconsExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Rating icon={RatingIcon.Star} rating={1.5} />
      <Rating icon={RatingIcon.Heart} rating={1.5} variant="pink" />
      <Rating icon={RatingIcon.Energy} rating={1.5} variant="green" />
      <Rating icon={RatingIcon.Sparkle} rating={1.5} variant="blue" />
      <Rating icon={RatingIcon.Emoji} rating={1.5} />
    </div>
  )
}

Size

Section titled “Size”
import { Rating } from "@/components/ui/pxl/rating"


export default function RatingSizeExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Rating rating={4} size="sm" />
      <Rating rating={4} />
      <Rating rating={4} size="lg" />
    </div>
  )
}

API Reference

Section titled “API Reference”

Rating

Section titled “Rating”

The main component for displaying and editing star ratings.

Prop Type Default Description
rating number - Required. The current rating value. Supports decimal values for partial stars.
maxRating number 5 Total number of stars to display.
size "sm" | "default" | "lg" "md" The size of the stars and spacing.
showValue boolean false Whether to show the numeric rating value next to the stars.
editable boolean false Whether the rating can be changed by clicking on stars.
onRatingChange (rating: number) => void - Callback fired when a star is clicked (if editable is true).
starClassName string - Additional CSS classes for the numeric value container.
className string - Additional CSS classes for the root container.