Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind
made for Livewire 3 and styled around daisyUI + Tailwind
Amazing components.
Delightful demos.
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.
Abbigail
Alberto
Alek
Alex
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.
Port Erickton
Lake Jaqueline
North Baronmouth
West Nash
West Kailynton
Jaquelineview
Brenttown
North Elbert
Rahsaanchester
Jailynfurt
North Jaquanmouth
Lake Emeryville
New Audreyburgh
East Rigoberto
Dominicmouth
Schoenland
Schultzview
Jakobfurt
Port Theresia
North Timmothy
West Arlene
Port Allie
South D'angeloland
Murphyburgh
North Lizethhaven
New Freemanhaven
Kundestad
New Jordan
Bernhardborough
Kreigerfort
Port Andrew
East Miracle
New Georgiana
Georgettetown
Raoulbury
North Moriah
Wolffbury
Lake Hermann
South Johnathan
Bashirianmouth
West Celiahaven
North Eliezerburgh
West Bradly
Korbinview
Rutherfordmouth
New Wymanstad
Thielton
West Ivah
Aldenberg
Mitchellchester
South Lacy
Kodyfort
Port Clark
East Henderson
South Judah
Lake Felicitybury
Tiannaland
Lake Kyrahaven
New Randalhaven
Port Shania
Nashmouth
New Pauline
Idellfurt
Gleasonton
South Julie
North Beatriceside
East Noreneview
New Danyka
East Darlenemouth
South Gus
West Malinda
South Vivienne
Hillsberg
North Myrachester
East Gerdaland
Port Davonview
Easterton
Earlmouth
West Kimberly
New Marlene
Port Enid
Mohrbury
Kutchborough
Lake Breanne
Gissellechester
Aliciafort
Lake Lora
New Quincymouth
Margaritaview
New Bennettfurt
West Uriah
South Brenna
Elenorland
Gordonland
Donshire
Collinsfort
New Auroreview
Schusterhaven
Port Jarrett
East Josephbury
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.
<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 | Stephan | Port Erickton |
2 | Emma | Lake Jaqueline |
3 | Myrtie | North Baronmouth |
4 | Elda | West Nash |
@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 | ||||
---|---|---|---|---|---|
71 | Abbigail |
derick73
|
West Malinda | ||
Hello, Abbigail!
|
|||||
48 | Alberto |
alexander94
|
West Ivah | ||
Hello, Alberto!
|
|||||
38 | Alek |
roscoe32
|
Lake Hermann | ||
Hello, Alek!
|
@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