Do more. Code less.
Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind

The elegant and minimalist demo.
Get surprised how smooth was to built it.

The refreshing storefront demo.
Get amazed how much you can do with minimal effort.

Less code, more action.
@php
$users = App\Models\User::take(3)->get();
@endphp
 
@foreach($users as $user)
<x-list-item :item="$user" sub-value="username" link="/docs/installation">
<x-slot:actions>
<x-button icon="o-trash" wire:click="delete({{ $user->id }})" spinner />
</x-slot:actions>
</x-list-item>
@endforeach
It. Just. Works.
 
No results found.
Adelia

Alana

Alexanne

Ana

@php
$users = $this->users;
@endphp
<x-choices
label="Searchable"
wire:model="selected_users"
:options="$users"
searchable />
Forms.
USD

<x-form wire:submit="save">
<x-input label="Name" wire:model="name" icon="o-user" placeholder="Hello" />
<x-input label="Amount" wire:model="amount" prefix="USD" money />
 
<x-slot:actions>
<x-button label="Cancel" />
<x-button label="Save" class="btn-primary" type="submit" spinner="save" />
</x-slot:actions>
</x-form>
Tables.
# Nice Name City
1 Duncan Ebertchester
2 Iliana Brendantown
3 Clementina Port Lenorefort
4 Lyla West Harrison
5 Hailie Mertzchester
@php
// public array $selected = [1, 3];
 
$users = App\Models\User::with('city')->take(5)->get();
 
$headers = [
['key' => 'id', 'label' => '#', 'class' => 'text-red-400'], # <-- css
['key' => 'name', 'label' => 'Nice Name'],
['key' => 'city.name', 'label' => 'City'] # <-- nested object
];
@endphp
 
{{-- See console ouput --}}
{{-- You can use any `$wire.METHOD` on `@row-xxxx` --}}
<x-table
:headers="$headers"
:rows="$users"
striped
selectable
wire:model="selected"
@row-click="console.log($event.detail)"
@row-selection="console.log($event.detail)" />
And more ...
LET`S DO IT