Star Rating

Component 6

About

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.

Code

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

Usage.tsx

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

export default function DemoOne() {

const [smallRating, setSmallRating] = React.useState(2)
const [mediumRating, setMediumRating] = React.useState(3)
const [largeRating, setLargeRating] = React.useState(4)

  return <div className='flex flex-col items-center gap-6'>
<div className='flex flex-col items-center gap-2'>

  <div>Small</div>
  <StarRating size='sm' ratingScale={5} value={smallRating} onRatingChange={(rating) => setSmallRating(rating)} />
  </div>
<div className='flex flex-col items-center gap-2'>
  <div>Medium</div>
  <StarRating ratingScale={5} value={mediumRating} onRatingChange={(rating) => setMediumRating(rating)}  />
  </div>
<div className='flex flex-col items-center gap-2'>

  <div>Large</div>
  <StarRating size='lg' ratingScale={5} value={largeRating} onRatingChange={(rating) => setLargeRating(rating)}  />
  </div>
  </div>
}