Creative Tim UICreative Tim UI

Shadcn Rating

PreviousNext

An interactive component that allows users to rate content using stars or custom icons, perfect for reviews, feedback, and user ratings.

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

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

Installation

pnpm dlx @creative-tim/ui@latest add rating

Usage

import { Rating } from "@/components/ui/rating"
<Rating value={4} />

Examples

Rating Colors

Rating components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different rating contexts and provide visual variety.

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

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>
  )
}

Rating with Text

A rating component combined with text that displays the current rating value and additional context like review count, providing a comprehensive rating display with both visual and textual information.

4
Based on 134 Reviews
"use client"

import * as React from "react"

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

export function RatingWithText() {
  const [rated, setRated] = React.useState(4)

  return (
    <div className="flex items-center gap-2">
      <span className="text-primary font-semibold">{rated}</span>
      <Rating value={rated} onValueChange={(value) => setRated(value)} />
      <span className="text-foreground font-semibold">
        Based on 134 Reviews
      </span>
    </div>
  )
}

Readonly Rating

A read-only rating component that displays a fixed rating value without allowing user interaction, perfect for displaying existing ratings in reviews, product pages, or testimonials.

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

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

Custom Rating Icon

A rating component with custom icons (hearts instead of stars) that allows you to personalize the visual appearance of ratings to match your brand or design aesthetic.

"use client"

import * as React from "react"
import { Heart } from "lucide-react"

import { cn } from "@/lib/utils"
import { Rating } from "@/components/ui/rating"

function FilledHeart({
  className,
  ...props
}: React.ComponentProps<typeof Heart>) {
  return <Heart className={cn(className, "fill-current")} {...props} />
}

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

Rating with Comment

A comprehensive rating display that includes a testimonial comment, user avatar, name, role, and rating, creating a complete review card perfect for testimonials and user feedback sections.

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

Tania Andrew

Lead Frontend Developer

import { Avatar, AvatarImage } from "@/components/ui/avatar"
import { Rating } from "@/components/ui/rating"

export function RatingWithComment() {
  return (
    <div className="px-8 text-center">
      <p className="mb-6 text-lg font-semibold">
        &quot;This is an excellent product, the documentation is excellent and
        helped me get things done more efficiently.&quot;
      </p>
      <Avatar className="mx-auto h-16 w-16">
        <AvatarImage
          src="https://images.unsplash.com/photo-1750223642533-1b74b17edae8?auto=format&fit=crop&q=80&w=400&h=400"
          alt="image"
        />
      </Avatar>
      <p className="mt-4 font-bold">Tania Andrew</p>
      <p className="text-foreground mb-4 text-sm">Lead Frontend Developer</p>
      <div className="flex justify-center">
        <Rating value={4} color="warning" readonly />
      </div>
    </div>
  )
}

Props

The rating component accepts the following props:

Rating

PropTypeDefaultDescription
valuenumber0The current rating value (0 to max)
maxnumber5The maximum rating value
readonlybooleanfalseWhen true, prevents user interaction with the rating
color"primary" | "secondary" | "info" | "success" | "warning" | "error""warning"The color scheme for filled rating icons
onValueChange(value: number) => void-Event handler called when the rating value changes
unratedIconReact.ComponentType<{ className?: string }>StarThe icon component to use for unrated items
ratedIconReact.ComponentType<{ className?: string }>StarThe icon component to use for rated items
classNamestring-Additional CSS classes to apply to the rating container

Accessibility

The rating component follows accessibility best practices:

  • Supports keyboard navigation (Arrow keys to navigate, Enter/Space to select)
  • Uses proper ARIA attributes for screen readers
  • Provides visual feedback for hover and selection states
  • Maintains focus management for keyboard users
  • Readonly state is properly communicated to assistive technologies

Best Practices

  • Use ratings to collect user feedback and reviews
  • Display ratings alongside review counts for context
  • Use readonly ratings to show existing ratings without allowing changes
  • Choose appropriate colors that match your design system
  • Consider using custom icons for brand consistency
  • Provide clear visual feedback when users interact with ratings
  • Use consistent rating scales (typically 5 stars) across your application
  • Display ratings with additional context like review counts or comments
  • Test keyboard navigation and screen reader compatibility

The rating component provides a clean and accessible way to display and collect user ratings. It's ideal for product reviews, service ratings, feedback forms, testimonials, and any interface where users need to provide or view rating information.