Rating

Rating: 5/5

Rating: 4/5

Rating: 3.5/5

Rating: 2/5

---
import { Rating } from "@/components/ui/rating"
---

<div class="flex flex-col gap-4">
  <div>
    <p class="mb-2 text-sm font-medium">Rating: 5/5</p>
    <Rating rating={5} />
  </div>
  <div>
    <p class="mb-2 text-sm font-medium">Rating: 4/5</p>
    <Rating rating={4} />
  </div>
  <div>
    <p class="mb-2 text-sm font-medium">Rating: 3.5/5</p>
    <Rating rating={3.5} />
  </div>
  <div>
    <p class="mb-2 text-sm font-medium">Rating: 2/5</p>
    <Rating rating={2} />
  </div>
</div>

Installation

To install the rating component, run the following command:

npx shadcn@latest add @fulldev/rating

Usage

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

<Rating rating={4.5} />

Examples

Different Ratings

---
import { Rating } from "@/components/ui/rating"
---

<div class="flex flex-col gap-4">
  <Rating rating={5} />
  <Rating rating={3.5} />
  <Rating rating={1} />
</div>

With Custom Size

---
import { Rating } from "@/components/ui/rating"
---

<div class="flex flex-col gap-4">
  <Rating rating={4} class="text-lg" />
  <Rating rating={4} class="text-2xl" />
  <Rating rating={4} class="text-3xl" />
</div>