Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind
Sponsors
Amazing components.
+ G (meta key + 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
Users - server side
 
No results found.
Adela

Adrien

Alanna

Alejandrin

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.
North Daytonside

Port Eloisa

Westshire

Darioburgh

Angeloberg

Hodkiewiczborough

Aniyahfurt

East Jordonstad

Port Taryntown

Karleychester

Kerlukefort

Trompside

Leschland

Lake Athena

Rennerberg

Reaganland

Neilshire

West Brigittestad

Ellisbury

Ankundingchester

Kenyattaview

Hermannton

New Angelica

North Destiny

Abshireshire

New Albertafort

East Carey

Peteville

North Ellsworth

Sigmundchester

West Assuntaview

Buckstad

North Carlo

Lake Elizaborough

East Carleefurt

Terrillchester

East Lulu

Lake Dortha

East Dena

Walshbury

South Alyceberg

Lake America

Port Eriberto

Erynborough

Lake Florenciomouth

Ratkeville

Nienowmouth

South Jana

Powlowskimouth

East Talonshire

Wehnerchester

Port Kelsie

Bashirianville

Torrancemouth

Leifburgh

Aftonmouth

Geraldinehaven

East Nat

New Shannon

Beckerhaven

Hazelfort

Jeromemouth

New Narciso

Lindchester

East Karleychester

Port Fidelburgh

South Carolynshire

South Carmelchester

New Darrionfurt

South Geovanni

Vernmouth

Carmelland

East Stephaniabury

Kirstenville

Linwoodhaven

North Dina

Jacquesland

Shieldsport

Jeffryhaven

Eichmannberg

North Libbyshire

South Ednamouth

Stammborough

Port Dewitt

Predovichaven

Lake Layla

West Reggie

North Pattie

Terrymouth

Dawsonstad

Burdetteport

Port Courtney

North Doug

Boganmouth

West Gavin

O'Konland

Colemanside

Stracketown

Heathcoteborough

Nameshire

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 North Daytonside
2 Port Eloisa
3 Westshire
4 Darioburgh
@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.
@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