Rating - Laravel Blade

Use the rating component to show reviews and testimonials from your users using stars, with support for half stars, text values, and review counts.

Default Rating

Blade code

<x-fwb.rating :value="4" />

Rating with Text

4.95

out of

5

Blade code

<x-fwb.rating :value="4.95" :showValue="true" />

Rating Count

4

out of

5

(73)

Blade code

<x-fwb.rating :value="4" :showValue="true" :count="73" />

Half Star Rating

Blade code

<div class="space-y-4">
    <x-fwb.rating :value="3.5" />
    <x-fwb.rating :value="2.5" />
    <x-fwb.rating :value="0.5" />
</div>

Star Counts

Blade code

<div class="space-y-4">
    <x-fwb.rating :value="5" />
    <x-fwb.rating :value="4" />
    <x-fwb.rating :value="3" />
    <x-fwb.rating :value="2" />
    <x-fwb.rating :value="1" />
    <x-fwb.rating :value="0" />
</div>

Star Sizes

Blade code

<div class="space-y-4">
    <x-fwb.rating :value="4" size="sm" />
    <x-fwb.rating :value="4" size="md" />
    <x-fwb.rating :value="4" size="lg" />
</div>

Advanced Rating

4

out of

5

73 reviews
Staff
8.8
Comfort
8.9
Free WiFi
8.8
Facilities
5.4
Value for money
8.9

Blade code

<div class="flex items-center mb-2">
    <x-fwb.rating :value="4" :showValue="true" />
    <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"></span>
    <a href="#" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">73 reviews</a>
</div>
<div class="gap-8 sm:grid sm:grid-cols-2">
    <div>
        <dl>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Staff</dt>
            <dd class="flex items-center mb-3">
                <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
                    <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 88%"></div>
                </div>
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">8.8</span>
            </dd>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Comfort</dt>
            <dd class="flex items-center mb-3">
                <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
                    <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 89%"></div>
                </div>
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">8.9</span>
            </dd>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Free WiFi</dt>
            <dd class="flex items-center mb-3">
                <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
                    <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 88%"></div>
                </div>
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">8.8</span>
            </dd>
        </dl>
    </div>
    <div>
        <dl>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Facilities</dt>
            <dd class="flex items-center mb-3">
                <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
                    <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 54%"></div>
                </div>
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">5.4</span>
            </dd>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Value for money</dt>
            <dd class="flex items-center mb-3">
                <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
                    <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 89%"></div>
                </div>
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">8.9</span>
            </dd>
        </dl>
    </div>
</div>

Component Properties

Rating x-fwb.rating

Prop Type Default Description
value float 0 Rating value. Supports half values (e.g. 3.5).
max int 5 Maximum number of stars.
size string md Star icon size. Options: sm, md, lg.
showValue bool false Show the numeric rating value and "out of" text next to the stars.
count int|null null Number of reviews to display in parentheses after the stars.