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

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

Add images
Images | Max 100Kb
Delightful demos.
Paper
The elegant and minimalist demo.
Orange
The refreshing storefront demo.
Flow
The dashboard demo (coming soon).
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.
Abigayle

Adalberto

Alanis

Alberta

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

Port Kayden

Lake Liamborough

Alejandraland

East Gwen

Lavonburgh

South Princessland

Colebury

New Arielleshire

West Jerrod

Port Ceasarport

Treutelborough

Lake Rydershire

East Darrickshire

Daishaview

Pfannerstillberg

South Emilianoberg

Port Keonville

Lake Bennie

New Elsie

New Geraldineshire

Boyerchester

Port Karlie

Port Terrencemouth

New Guadalupeview

West Meganetown

West Reginaldside

East Jeanette

North Tianaville

Hickleview

West Ludieview

Effertzport

New Shaina

North Stacytown

New Roma

West Odamouth

South Cecilechester

West Gracie

Mollyborough

Lake Rachelle

East Ryder

Port Regan

Labadietown

West Fernmouth

Baumbachmouth

West Gradyport

Lake Clarabelle

East Kathrynview

South Evangeline

Port Emie

Mozellchester

East Marshallbury

South Thelmastad

Carterchester

New Rosetta

Andreberg

Luciemouth

Russelfurt

Port Ike

Tarynburgh

Krajcikland

North Santino

Vickiestad

New Miles

North Ernesto

Patriciaton

West Amosbury

Creminmouth

West Florine

West Jeremy

East Feltonton

Weimannborough

North Juanitafort

Croninville

North Mustafabury

New Ulices

Abdielton

Dellaview

Arianestad

Toyshire

North Luthermouth

East Aglae

Millerview

Lake Arnold

Bellaborough

West Wyattfort

Americomouth

Creminside

North Shyanne

Hudsonstad

Lake Khalidchester

Eldridgeport

Williamsonborough

Euniceport

East Rosinastad

East Kiana

Terrystad

Hipolitoville

Giaville

Codyborough

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="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 Kesslerview
2 Port Kayden
3 Lake Liamborough
4 Alejandraland
@php
use App\Models\User;
$users = User::with('city')->take(4)->get();
 
$headers = [
['key' => 'id', 'label' => '#', 'class' => 'w-1 bg-yellow-50'], # <-- 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 Abigayle
Hello, Abigayle!
92 Adalberto
Hello, Adalberto!
86 Alanis
Hello, Alanis!
@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-50 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