diff --git a/src/components/styled/rating.css b/src/components/styled/rating.css
new file mode 100644
index 00000000000..a06c291b680
--- /dev/null
+++ b/src/components/styled/rating.css
@@ -0,0 +1,36 @@
+.rating{
+  :where(input){
+    animation: rating-pop var(--animation-input, 0.25s) ease-out;
+    @apply appearance-none w-6 h-6 bg-base-content bg-opacity-100;
+  }
+  & .rating-hidden{
+    @apply w-2 bg-transparent;
+  }
+  input:checked ~ input{
+    @apply bg-opacity-20;
+  }
+  input:focus-visible{
+    @apply transition-transform ease-in-out duration-300;
+    transform: translateY(-.125em);
+  }
+  
+  & input:active:focus{
+    animation: none;
+  }
+  
+  & input:active:focus{
+    transform: translateY(-.125em);
+  }
+}
+
+@keyframes rating-pop {
+  0% {
+    transform: translateY(-.125em);
+  }
+  40% {
+    transform: translateY(-.125em);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
\ No newline at end of file
diff --git a/src/components/unstyled/rating.css b/src/components/unstyled/rating.css
new file mode 100644
index 00000000000..40772615ec7
--- /dev/null
+++ b/src/components/unstyled/rating.css
@@ -0,0 +1,6 @@
+.rating{
+  @apply relative inline-flex;
+  :where(input){
+    @apply cursor-pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/docs/pages/components/rating.vue b/src/docs/pages/components/rating.vue
new file mode 100644
index 00000000000..a998286ed89
--- /dev/null
+++ b/src/docs/pages/components/rating.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <ClassTable v-bind:data="{
+      components : [
+        { class: 'rating', desc: 'Wrapper component for radio buttons' },
+      ],
+      utility : [
+        { class: 'rating-hidden', desc: 'hides the input. Useful to clear the the rating' },
+      ],
+      responsive : [
+        { class: 'btn-lg', desc: 'Large rating' },
+        { class: 'btn-md', desc: 'Medium rating (default)' },
+        { class: 'btn-sm', desc: 'Small rating' },
+        { class: 'btn-xs', desc: 'Extra small rating' },
+      ],
+    }"/>
+    <Wrapper title="rating">
+
+      <div class="rating">
+        <input class="mask mask-star" type="radio" name="rating-1">
+        <input class="mask mask-star" type="radio" name="rating-1" checked>
+        <input class="mask mask-star" type="radio" name="rating-1">
+        <input class="mask mask-star" type="radio" name="rating-1">
+        <input class="mask mask-star" type="radio" name="rating-1">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="mask-star-2 bg-warning">
+
+      <div class="rating">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-2" checked>
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="mask-heart bg-error">
+
+      <div class="gap-1 rating">
+        <input class="mask mask-heart bg-error" type="radio" name="rating-3">
+        <input class="mask mask-heart bg-error" type="radio" name="rating-3" checked>
+        <input class="mask mask-heart bg-error" type="radio" name="rating-3">
+        <input class="mask mask-heart bg-error" type="radio" name="rating-3">
+        <input class="mask mask-heart bg-error" type="radio" name="rating-3">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="mask-star-2 bg-green-500">
+
+      <div class="rating">
+        <input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
+        <input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4" checked>
+        <input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
+        <input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
+        <input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
+      </div>
+
+    </Wrapper>
+
+
+    <Wrapper title="rating rating-xs">
+
+      <div class="rating rating-xs">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-5" checked>
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="rating rating-sm">
+
+      <div class="rating rating-sm">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-6" checked>
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="rating rating-md">
+
+      <div class="rating rating-md">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-7" checked>
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="rating rating-lg">
+
+      <div class="rating rating-lg">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-8" checked>
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
+        <input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
+      </div>
+
+    </Wrapper>
+    <Wrapper title="with `rating-hidden` (to clear the rating)">
+
+      <div class="rating">
+        <input class="rating-hidden" type="radio" name="rating-9">
+        <input class="mask mask-star-2" type="radio" name="rating-9">
+        <input class="mask mask-star-2" type="radio" name="rating-9" checked>
+        <input class="mask mask-star-2" type="radio" name="rating-9">
+        <input class="mask mask-star-2" type="radio" name="rating-9">
+        <input class="mask mask-star-2" type="radio" name="rating-9">
+      </div>
+
+    </Wrapper>
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  head() {
+    return {
+      title: "daisyUI — Tailwind CSS star rating component",
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'Tailwind CSS star rating example - Tailwind CSS star rating example'
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/utilities/unstyled/rating.css b/src/utilities/unstyled/rating.css
new file mode 100644
index 00000000000..3df4b34f1a2
--- /dev/null
+++ b/src/utilities/unstyled/rating.css
@@ -0,0 +1,14 @@
+.rating{
+  &-xs input {
+    @apply w-3 h-3;
+  }
+  &-sm input {
+    @apply w-4 h-4;
+  }
+  &-md input {
+    @apply w-6 h-6;
+  }
+  &-lg input {
+    @apply w-10 h-10;
+  }
+}
\ No newline at end of file