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
 
No results found.
Adam

Adele

Adolphus

Alanna

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 Cierraberg

South Aylin

Port Americobury

Mohammadport

Olsonstad

Kshlerinchester

Port Jana

South Dorthaborough

Port Reedmouth

O'Connelltown

Port Garland

Urielview

North Ronchester

Thompsonshire

Rafaelfurt

Roweberg

Kristianberg

Pfefferberg

Clarkhaven

Port Marty

South Reginald

Olinville

New Arno

Mayertshire

South Shannon

North Stephanie

Boehmview

Stephenbury

Koelpinberg

Kuhicstad

East Chet

Selmerfort

Kilbackshire

Douglasland

Willmsstad

O'Connellborough

North Rosalynberg

East Emie

Rutherfordhaven

Whitebury

West Mollytown

South Hazleberg

Rockystad

Lake Florian

Littelmouth

Diamondland

Cordiastad

Larrymouth

Lake Joanny

Cartermouth

North Jarrell

Port Fordton

New Jacynthehaven

Javontemouth

West Nash

Koelpinchester

South Rosettamouth

East Savannahmouth

Vonmouth

Rossiehaven

Port Adrielmouth

Elijahbury

Satterfieldmouth

North Nash

Caitlynbury

Koelpinmouth

Jakubowskiport

New Ivahhaven

Murazikside

North Lowell

Lake Yazmin

East Agustinaborough

South Viva

Gideonport

Nellieberg

South Jairostad

Jocelyntown

South Easterside

Port Ervin

East Birdie

Port Bonnie

East Bettye

Lake Zachariah

Port Lily

Kuhnland

East Ambrose

South Simone

Nolanchester

New Stanland

West Jeffery

Kundemouth

Monahanmouth

Hermanport

Schusterborough

North Travon

East Emily

Rosenbaumburgh

Fritzchester

South Ottiston

Port Boyd

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 Cierraberg
2 South Aylin
3 Port Americobury
4 Mohammadport
@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
77 Adam
Hello, Adam!
42 Adele
Hello, Adele!
92 Adolphus
Hello, Adolphus!
@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