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.
Abagail
Abdul
Alice
Allie
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.
Leschfurt
Trompburgh
Port Ethel
Creminville
Shanaton
Port Cordiamouth
Hardyburgh
North Deloresville
West Winonastad
Westleyborough
Lake Muhammadburgh
Leannonburgh
Shanieport
East Zula
New Oswaldoberg
New Kipview
West Kacieview
North Nellie
East Johanna
South Nils
New Isabelview
Kirstenville
Magdalenfurt
East Mabelleburgh
Pfefferville
North Tobin
Hagenesberg
West Sonya
Gloverview
New Okey
Jonesstad
New Russ
Antwanville
Port Ismaelfort
Terryton
Stoltenbergshire
Rhiannaberg
West Albertoburgh
Harveyberg
Kariville
North Josieberg
West Thurmanchester
Jakubowskiview
New Kelly
South Reanna
Hyattview
Port Ellenville
Lake Bryon
New Aliceshire
Kulasland
East Martin
Terrymouth
New Sarina
South Dixiestad
East Dimitrimouth
Travisberg
Port Kyleigh
West Macieport
Shieldstown
West Mackenzieberg
North Fabian
Dickensstad
South Rex
New Janisside
Koelpintown
Kshlerinfort
Port Devanberg
New Madelyn
Dietrichchester
West Trinity
New Antoneview
Tonyshire
West Zachariah
Bellaburgh
Douglasville
Port Ally
New Carmelland
Phoebeburgh
Jacobiborough
Windlershire
East Adella
Jaidaport
Kesslerhaven
Port Maci
Buckridgemouth
Starkside
Altenwerthshire
Elishabury
South Foster
New Jesse
East Cheyenne
South Broderickton
Port Kittyview
Lake Robbie
Paucekton
West Maurineland
Lake Waltonview
Willowfort
West Adrienberg
Susiefurt
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 | Allie | Leschfurt |
2 | Jarrod | Trompburgh |
3 | Mariane | Port Ethel |
4 | Marcelino | Creminville |
@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 | ||||
---|---|---|---|---|---|
28 | Abagail |
arne.strosin
|
West Sonya | ||
Hello, Abagail!
|
|||||
20 | Abdul |
nfeil
|
South Nils | ||
Hello, Abdul!
|
|||||
46 | Alice |
reynolds.dena
|
Hyattview | ||
Hello, Alice!
|
@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