Components
Loading preview...
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-ui
npx shadcn@latest add https://21st.dev/r/molecule-lab-rushil/star-ratingimport 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>
}