Components

Tailwind CSS Star Rating Components - Madhuranjan UI

Discover our range of responsive and customizable star rating components built with Tailwind CSS. Perfect for reviews, feedback, and user engagement, each design is optimized for a seamless UI experience.

Simple Star Rating

A clean and straightforward star rating component ideal for quick feedback and review systems.

1<div class="flex items-center justify-center p-5">
2  <div class="flex flex-row-reverse items-center space-x-1">
3    <!-- Star 1 -->
4    <input type="radio" name="rating" id="star1" value="1" class="peer hidden" />
5    <label for="star1" class="cursor-pointer text-gray-300 transition-colors duration-200 peer-checked:text-yellow-400 peer-hover:text-yellow-300 hover:text-yellow-300">
6      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
7        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
8      </svg>
9    </label>
10

Different Size Star Rating

Explore our versatile star rating component available in various sizes to fit any design.

1<div class="flex flex-col items-center justify-center gap-4 p-5">
2  <!-- Small Star Rating - Improved Version -->
3  <div class="flex flex-row-reverse items-center space-x-0.5">
4    <!-- Star 1 -->
5    <input type="radio" name="rating-sm" id="star-sm-1" value="1" class="peer sr-only" />
6    <label for="star-sm-1" class="cursor-pointer text-gray-300 transition-colors duration-100 peer-checked:text-yellow-400 peer-hover:text-yellow-300 hover:text-yellow-300">
7      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
8        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
9      </svg>
10    </label>

Star Rating with Comment

Enhance your feedback system with a star rating that includes a comment option for more detailed reviews.

User avatar

Sarah Johnson

Posted on May 15, 2023

4.0

Great product with minor issues

The product arrived quickly and was well-packaged. The quality is excellent, though I did notice a small defect in the stitching. Customer service was very responsive and offered a partial refund. Overall I'm satisfied with my purchase and would recommend to others.

Was this review helpful?
1<!-- Rating Comment Component -->
2<div class="max-w-2xl p-6 bg-white rounded-sm shadow-sm dark:bg-gray-800">
3  <!-- User Info & Rating Header -->
4  <div class="flex items-start justify-between mb-4">
5    <!-- User Profile -->
6    <div class="flex items-center space-x-3">
7      <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
8      <div>
9        <h4 class="font-medium text-gray-900 dark:text-gray-100">Sarah Johnson</h4>
10        <p class="text-sm text-gray-500 dark:text-gray-400">Posted on May 15, 2023</p>

Rating with Text Comment Link

Combine visual ratings with textual feedback and links, providing a comprehensive review interface.

Rate your experience

3/5

"Good, but could be better"

Read our rating guidelines
1<!-- Rating with Text & Link Component -->
2<div class="max-w-md px-6 py-3 bg-white rounded-sm shadow-sm dark:bg-gray-800">
3  <!-- Rating Section -->
4  <div class="mb-4">
5    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Rate your experience</h3>
6    
7    <!-- Stars -->
8    <div class="flex items-center justify-center mb-3">
9      <div class="flex items-center space-x-1">
10        <!-- Dynamic stars (example with 3 filled stars) -->

Colored Star Rating

Add visual interest to your reviews with vibrant colored stars that can be customized to match your brand.

How would you rate your experience?

Select your rating

1<div class="flex justify-center items-center p-5">
2      <div class="max-w-md rounded-xl border border-gray-100 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800">
3        <h3 class="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
4          How would you rate your experience?
5        </h3>
6
7        <div class="flex flex-col items-center">
8          <div class="mb-4 flex flex-row-reverse items-center space-x-2">
9            <input
10              type="radio"
Stats CardGallery