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

Aletha

Alexandrine

Alice

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.
East Alena

Strosinton

East Efren

Lake Hobart

East Rebeccabury

Rozellaview

Janaeshire

Wilfridmouth

New Orinborough

North Estel

Greenholtmouth

Mayerton

Lake Dane

Blickport

Gibsonfurt

Carloton

New Madelynburgh

Bernhardland

Hudsonstad

Sarahton

Wiegandport

Gusikowskihaven

Lake Eulahland

West Estevan

North Devin

Velmafurt

Lake Rosettamouth

Marisolburgh

Finnchester

Kleinmouth

Dariusville

Kreigerton

East Leland

Vandervortstad

New Christopher

Alishastad

Murrayview

Flavieberg

South Ida

East Mayaton

Lake Sisterfort

Ibrahimport

Brownstad

Todburgh

Port Jaquelin

New Chasity

Waylonfort

Osinskiport

Kshlerinstad

East Joseph

North Lulu

Elvisfurt

Tessiemouth

South Aliviaside

Laurybury

Port Eda

Nyasialand

Perrybury

East Stephanborough

West Erick

Casperburgh

South Hipolito

East Hipolitostad

North Vivianhaven

West Deron

Keshawnview

Richieburgh

Pascalebury

East Noble

West Iliana

West Orland

New Pauline

Ellsworthside

East Columbusbury

Port Scot

West Meggiechester

Tremayneshire

Beerborough

Port Kelsie

Wiegandburgh

Lubowitzborough

Kleinside

South Gunnerbury

Pfannerstillborough

Rhodaside

West Aditya

New Brycen

Maziefort

Ednaside

Feliciamouth

South Leoraview

North Reillyborough

Orinshire

Lednerland

Satterfieldland

Lake Anne

Huelsstad

Lake Aminaton

Conroystad

Bruenville

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 East Alena
2 Strosinton
3 East Efren
4 Lake Hobart
@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