Star Rating

An interactive star rating component with configurable scale, sizes (sm/md/lg), and readonly mode. Users can click stars to set ratings with smooth hover animations and visual feedback.

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.

import React from 'react'
import { StarRating } from "@/components/ui/star-rating";

export default function DemoOne() {

  const [rating, setRating] = React.useState(3)

  return <StarRating ratingScale={5} value={rating} onRatingChange={(rating) => setRating(rating)} />;
}