Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind
Sponsors
Amazing components.
Ctrl/Cmd + G

Search for "a" to see what kind of content it returns.

Add images
Images | Max 100Kb
Delightful demos.
Ping
The real time chat demo.
Flow
The dashboard demo.
Orange
The refreshing storefront demo.
Paper
The elegant and minimalist demo.
Lists
@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
Multi selection
 
No results found.
Abby

Aditya

Aletha

Alexzander

Search happens on server side
@php
$users = $this->users;
@endphp
<x-choices
label="Users - server side"
wire:model="selected_users"
:options="$users"
icon="s-bolt"
hint="Search happens on server side"
searchable />

 
No results found.
Lake Gunner

New Kevenport

East Domenick

Leschton

North Meggie

Ernserstad

Strackestad

Port Laurence

Jillianchester

Oleton

West Adamtown

East Amariside

Lake Margarete

North Royalshire

Lake Kennediview

McLaughlinmouth

North Coyfurt

Gislasonstad

New Nelda

South Arno

South Aureliemouth

Gutkowskishire

Hillsland

Johnsonborough

Port Jimmiefurt

North Gisselleshire

Rebekamouth

South Lillietown

Sybleberg

East Elisabethport

Wuckertfurt

Casimerfort

East Vada

West Prince

East Maxine

Angelitatown

Schmittton

South Brandi

Lake Jaunita

Leonetown

Aliyatown

Port Borisfurt

Nellieborough

Veumhaven

Cronahaven

North Pearlie

North Evert

South Fay

South Julia

Estaview

Rosettatown

Whitefurt

New Leoview

Zboncakbury

Demetriusland

Clementineburgh

Domenicaborough

Walkerstad

Ankundingtown

North Amaliaburgh

Blancheville

West Rodgermouth

Norahaven

New Dell

New Juwanfort

New Taraside

Raleighview

Harryburgh

South Julius

Garrettmouth

South Bethfort

East Petrastad

Shanemouth

North Angelicamouth

Braunport

Vladimirborough

New Darienville

Arnohaven

Schoenhaven

Willieshire

Schambergerburgh

Port Delmer

West Makenna

East Cielomouth

South Hettietown

Port Gregmouth

Lake Electamouth

Norwoodberg

Addiemouth

Tremblaytown

Ryderchester

West Erna

Johnsonbury

O'Connellville

New Alexisburgh

North Tommie

Port Corneliushaven

North Juddberg

North Jesusview

Kozeyside

Search happens on frontend side
@php
$cities = App\Models\City::all();
@endphp
<x-choices-offline
label="Cities - frontend side"
wire:model="selected_cities"
:options="$cities"
icon="s-bolt-slash"
hint="Search happens on frontend side"
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>
Drawer & Modal
Hello!

Click outside, on `CANCEL` button or `CLOSE` icon to close.

@php
$showDrawer = $this->showDrawer;
@endphp
<x-button label="Open Drawer" wire:click="$toggle('showDrawer')" class="btn-primary btn-block" />
 
<x-drawer wire:model="showDrawer" title="Hello!" with-close-button separator class="w-11/12 lg:w-1/3">
<div>Click outside, on `CANCEL` button or `CLOSE` icon to close.</div>
 
<x-slot:actions>
<x-button label="Cancel" wire:click="$toggle('showDrawer')" />
<x-button label="Confirm" class="btn-primary" />
</x-slot:actions>
</x-drawer>

@php
$myModal = $this->myModal;
@endphp
<x-button label="Open Modal" wire:click="$toggle('myModal')" class="btn-warning btn-block" />
 
<x-modal wire:model="myModal" title="Hello" subtitle="Livewire example" separator>
<div>Click outside, press `ESC` or click `CANCEL` button to close.</div>
 
<x-slot:actions>
<x-button label="Cancel" wire:click="$toggle('myModal')" />
<x-button label="Confirm" class="btn-primary" />
</x-slot:actions>
</x-modal>
Easy Tables.
# City
1 Lake Gunner
2 New Kevenport
3 East Domenick
4 Leschton
@php
use App\Models\User;
$users = User::with('city')->take(4)->get();
 
$headers = [
['key' => 'id', 'label' => '#', 'class' => 'w-1 bg-yellow-500/20'], # <-- CSS
['key' => 'name', 'label' => 'Nice Name', 'class' => 'hidden lg:table-cell'], # <-- responsive
['key' => 'city.name', 'label' => 'City'] # <-- nested object
];
@endphp
 
<x-table :rows="$users" :headers="$headers" striped />
Full Tables.
# Nice Name
62 Abby
Hello, Abby!
27 Aditya
Hello, Aditya!
1 Aletha
Hello, Aletha!
@php
use App\Models\User;
// public array $expanded = [];
// public array $sortBy = ['column' => 'name', 'direction' => 'asc'];
 
$sortBy = $this->sortBy;
$expanded = $this->expanded;
$users = User::with('city')
->orderBy(...array_values($this->sortBy))
->paginate(3);
 
$headers = [
['key' => 'id', 'label' => '#', 'class' => 'w-1'], # <-- CSS
['key' => 'name', 'label' => 'Nice Name'],
['key' => 'username', 'label' => 'Username', 'class' => 'hidden lg:table-cell'], # <--- responsive
['key' => 'city.name', 'label' => 'City', 'sortable' => false, 'class' => 'hidden lg:table-cell'] # <-- nested object
];
 
$cell_decoration = [
'name' => [
'bg-yellow-500/20 italic' => fn(User $user) => Str::of($user->name)->startsWith('A')
]
];
@endphp
 
<x-table
wire:model="expanded"
:headers="$headers"
:rows="$users"
:cell-decoration="$cell_decoration"
:sort-by="$sortBy"
link="/docs/components/table?user_id={id}&city={city.name}" {{-- Make rows clickables --}}
expandable
with-pagination
>
{{-- Expansion slot --}}
@scope('expansion', $user)
<div class="border border-dashed rounded-lg p-5 ">
Hello, {{ $user->name }}!
</div>
@endscope
 
{{-- Actions Slot --}}
@scope('actions', $user)
<x-button icon="o-trash" wire:click="delete({{ $user->id }})" spinner />
@endscope
 
{{-- Cell scope --}}
@scope('cell_username', $user)
<x-badge :value="$user->username" class="badge-primary" />
@endscope
</x-table>
And more ... LET`S DO IT