Rating

Star rating input and display.

formratingstars

import { Rating } from "@/components/ui";

Rating Preview

3/5

4.5/5

Code

tsx

<Rating value={3} />

Available in multiple sizes

1<div className="space-y-2">
2  <Rating size="sm" value={4} />
3  <Rating size="md" value={4} />
4  <Rating size="lg" value={4} />
5</div>

Allow user to set rating

1const [rating, setRating] = useState(0);
2
3return (
4  <Rating
5    value={rating}
6    onChange={setRating}
7    max={5}
8  />
9);

Allow half-star ratings

1<Rating
2  value={3.5}
3  allowHalf
4  onChange={(value) => console.log(value)}
5/>

Display-only rating

1<Rating value={4.5} readonly allowHalf />

Change the maximum stars

1<Rating value={7} max={10} />

Configure your app with the features you need and download production-ready code.