"use client" import * as React from "react" import { motion } from "framer-motion" import { Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/local/ui/card" import { RatingStarsInput } from "@/components/ui/rating-stars-input" export function RatingStarsInputDemo() { const [rating, setRating] = React.useState(0) const [submitted, setSubmitted] = React.useState(false) const handleRatingChange = (newRating: number) => { setRating(newRating) setSubmitted(false) } const handleSubmit = () => { setSubmitted(true) } const handleReset = () => { setRating(0) setSubmitted(false) } return (

Rate Your Experience Select a star rating to provide your feedback

{submitted ? (

Thank you for your {rating}-star rating!

Your feedback has been submitted

) : rating > 0 ? (

{rating === 5 ? "Excellent!" : rating === 4 ? "Very Good!" : rating === 3 ? "Good" : rating === 2 ? "Fair" : "Poor"}

You selected:

{Array.from({ length: rating }).map((_, i) => ( ))}

) : (

Click on a star to rate

)}

) }

Prop	Type	Default
name	`string`	—
value*	`number`	—
onChange*	`function`	—
onBlur	`function`	—
disabled	`boolean`	`false`

Rating Stars Input

Installation

RatingStarsInput Props