-
-
-
Notifications
Check all -
-
Edwin Day30 mins ago
Marked the bug analysis task as done
-
Ralph Waters45 mins ago
New bugs added for designer
-
-
-
-
-
Cart
Check all 
Mi Watch Revolve
$ 10.00
Ulrich Duffel Bag
$140.00
Tree Stylish Pot
$ 840.00
-
Total
$ 990.00
- Proceed to checkout
-
-
-
Messages
Send a new message -
online
-
warning
-
online
-
-
Helen Walter
Admin
Rating
ADMIN PANELDefault Rating
You can add rating using.rating & .rating-star class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-1">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-1" checked="">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-1">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-1">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-1">
</div>
</div>Rating
You can set different style rating usingrating & rating-start-2 class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-300" type="radio" name="rating-2">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-300" type="radio" name="rating-2">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-300" type="radio" name="rating-2">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-300" type="radio" name="rating-2" checked="">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-300" type="radio" name="rating-2">
</div>
</div>Rating Colors
You can set different color rating using bg-* class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-3">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-3">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-3" checked="">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-3">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-3">
</div>
</div>Heart Shape Rating
You can use heart shape rating using .rating & .rating-heart class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-300" type="radio" name="rating-4">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-300" type="radio" name="rating-4">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-300" type="radio" name="rating-4" checked="">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-300" type="radio" name="rating-4">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-300" type="radio" name="rating-4">
</div>
</div> With Different Colors
You can use heart shape rating using .rating & .rating-heart class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-300" type="radio" name="rating-5">
<input class="rating-heart bg-secondary peer peer-checked:bg-gray-300" type="radio" name="rating-5">
<input class="rating-heart bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-5>
<input class="rating-heart bg-primary peer peer-checked:bg-gray-300" type="radio" name="rating-5" checked="">
<input class="rating-heart bg-success peer peer-checked:bg-gray-300" type="radio" name="rating-5">
</div>
</div> Rating With Text
You can add texts with rating.
4 Out of 5
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-6">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-6">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-6">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-6" checked="">
<input class="rating-star bg-warning peer peer-checked:bg-gray-300" type="radio" name="rating-6">
</div>
</div>Rating Default Sizes
You can set different style with different size rating usingrating & rating-start-2 class.
<div class="flex flex-col gap-2">
<div class="rating">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-300" type="radio" name="rating-7">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-300" type="radio" name="rating-7">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-300" type="radio" name="rating-7">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-300" type="radio" name="rating-7" checked="">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-300" type="radio" name="rating-7">
</div>
</div> Rating Medium Sizes
You can set different style with different size rating usingrating & rating-start-2 class.
<div class="flex flex-col gap-2">
<div class="rating">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-300" type="radio" name="rating-8">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-300" type="radio" name="rating-8">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-300" type="radio" name="rating-8">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-300" type="radio" name="rating-8" checked="">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-300" type="radio" name="rating-8">
</div>
</div> Large Rating Sizes
You can set different style with different size rating usingrating & rating-start-2 class.
<div class="flex flex-col gap-2">
<div class="rating">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-9">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-9">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-9">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-9" checked="">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-300" type="radio" name="rating-9">
</div>
</div>