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.

Molecule UIbyRushil Dhinoja

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