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

Adelia

Agnes

Alessia

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.
Stokesborough

Emelyshire

Port Quincyshire

Alexaton

East Andy

New Claraborough

Port Margaretta

Ondrickastad

Port Meaghan

North Alfredmouth

McCulloughton

Lelahton

Reichertport

Sidfurt

New Judsonfort

Ashtonview

Deionchester

South Ebbahaven

Americamouth

Darionborough

Lilianaview

South Alice

Johannaview

Brakuston

Darrinfort

Dietrichfurt

Zolatown

West Gregory

Lake Brennan

Lake Waynemouth

South Shane

Manuelstad

Ardenhaven

East Brockland

Port Generalshire

South Amina

Kovacekport

Kleinfort

Lake Wade

Port Alanna

West Guiseppe

New Orland

Creminborough

Dickinsonshire

South Elna

New Bertrand

Stammmouth

Port Jasmin

Lake Ebbatown

Kemmerhaven

Taliahaven

Allyport

Dennisshire

West Aminaton

Johnsonshire

Kaylieside

Port Wyman

Port Ahmad

Lake Derickfort

South Petechester

Kozeyberg

Schoenmouth

Lempiland

Lake Timmy

Traceyland

South Alisonfurt

Gregoriotown

Lake Allene

North Keltonmouth

DuBuquefurt

Lake Zackville

East Marlene

Mathewbury

North Ethyl

South Norbert

Westtown

South Anitaside

Ricardoside

Jacobsonmouth

North Aminaborough

Rogahntown

North Kristina

Donnellyland

Schmittstad

Champlinport

East Gregoriaview

Morarview

Grahamport

Alicemouth

North Brandtburgh

Greenstad

South Nellie

Port Benjaminfort

Garnettland

West Artville

Lake Mandytown

North Mervinton

North Naomi

East Kayport

East Brennan

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 Stokesborough
2 Emelyshire
3 Port Quincyshire
4 Alexaton
@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