Star Rating

Forms 77

About

A customizable star rating component that allows users to rate with interactive star icons.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Star Rating to your project and fits it to your theme.

Code

How Star Rating is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { StarRating } from "@/components/ui/star-rating"


function DefaultRating() {
  return (
    <div className="space-y-2 text-center">
      <StarRating 
        defaultValue={3}
        onRate={(rating) => console.log(`Rated: ${rating}`)}
      />
    </div>
  )
}

function SmallRating() {
  return (
    <div className="space-y-2 text-center">
      <h3 className="font-medium">Small Rating</h3>
      <StarRating 
        size="sm"
        onRate={(rating) => console.log(`Rated: ${rating}`)}
      />
    </div>
  )
}

function LargeRating() {
  return (
    <div className="space-y-2 text-center">
      <h3 className="font-medium">Large Rating</h3>
      <StarRating 
        size="lg"
        totalStars={10}
        onRate={(rating) => console.log(`Rated: ${rating}`)}
      />
    </div>
  )
}

function DisabledRating() {
  return (
    <div className="space-y-2 text-center">
      <h3 className="font-medium">Disabled Rating</h3>
      <StarRating 
        defaultValue={4}
        disabled
      />
    </div>
  )
}

export { DefaultRating, SmallRating, LargeRating, DisabledRating }