Components

Rating

A star rating input with hover preview, keyboard support and a hidden field for forms.

php artisan blatui:add rating

<x-ui.rating name="score" :value="3" />

Icon

{{-- A custom icon (and colour) instead of stars. --}}
<div class="flex flex-col gap-4">
    <x-ui.rating :value="3" icon="heart" color="text-rose-500" />
    <x-ui.rating :value="4" icon="star" color="text-amber-500" />
    <x-ui.rating :value="2" icon="circle" color="text-sky-500" />
</div>

Readonly

4.0 out of 5

<div class="flex items-center gap-2">
    <x-ui.rating :value="4" readonly />
    <span class="text-muted-foreground text-sm">4.0 out of 5</span>
</div>

Sizes

<div class="flex flex-col items-start gap-3">
    <x-ui.rating :value="3" size="sm" />
    <x-ui.rating :value="3" />
    <x-ui.rating :value="3" size="lg" />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public int $score = 0;

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.rating wire:model="score" />

API Reference

Props, slots and exposed methods for <x-ui.rating>.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	The initial rating, from 0 to max. Drives which icons are filled.
`max`	`int`	`5`	The number of icons rendered, i.e. the highest possible rating.
`readonly`	`bool`	`false`	Render a non-interactive display rating. Buttons are disabled and removed from the tab order.
`size`	`string`	`'default'`	Icon size. `sm` `default` `lg`
`icon`	`string`	`'star'`	Any Lucide icon name to use for each rating unit (e.g. star, heart).
`color`	`string`	`'text-amber-500'`	Tailwind text-color class applied to filled icons. Empty icons use a muted tone.
`name`	`string`	—	When set, renders a hidden input with this name so the current value submits with a form. Also used as the group aria-label.
`id`	`string`	—	Id for the hidden input, applied only when name is set.