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.
Aiyana
Akeem
Alisha
Allan
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 Joanshire
East Velmachester
Lake Carrie
Eliezerside
Nelleport
Destinyport
Kamrynburgh
Kesslerstad
Wizaland
West Brisaville
New Kaelahaven
Port Helenstad
Izabellashire
East Royport
Sigmundhaven
West Dandreshire
Anselview
New Elnora
Runtehaven
Reillybury
South Adaline
Bernhardhaven
Larkinville
Rolfsonhaven
East Lionel
New Magdalena
Carolinabury
East Leonelmouth
Haleystad
Tobyfurt
Lake Moises
Wiegandfort
Fannieburgh
Ernestinaberg
Lake Stephanie
Delilahmouth
Ozellashire
North Aimeeport
Alecport
Port Cathrynbury
New Vernonmouth
Elliottville
East Giuseppeside
Feeneychester
Irvinghaven
Dinamouth
Bodetown
New Braxton
Port Therese
New Garnet
Port Rickshire
Douglashaven
Dandreland
Lynchland
Gusthaven
East Esperanza
Kurtchester
West Silas
Annabelberg
Mertztown
Port Celestinemouth
West Ciarahaven
East Nilsfort
Dominiqueborough
East Blair
Dorthyshire
Maurinefurt
Jenkinsside
Lorainefort
New Werner
North Albin
Salmaland
Sandychester
Lake Walkertown
Wiegandmouth
Howellmouth
Titusfort
Grimesside
West Emilyland
West Carlo
West Andreannemouth
Rippinhaven
Berylton
Marcfurt
Bergetown
Nevatown
West Martinbury
Coltenberg
South Grace
Lake Halle
New Schuyler
Meggieborough
Kilbackton
East Brownfort
New Adellashire
Leolaborough
Kaileeshire
West Hyman
Scottieshire
East Nolan
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 | Lillie | Lake Joanshire |
2 | River | East Velmachester |
3 | Zula | Lake Carrie |
4 | Rowland | Eliezerside |
@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 | ||||
---|---|---|---|---|---|
48 | Aiyana |
arjun.farrell
|
New Braxton | ||
Hello, Aiyana!
|
|||||
5 | Akeem |
boyle.burley
|
Nelleport | ||
Hello, Akeem!
|
|||||
22 | Alisha |
natasha.breitenberg
|
Bernhardhaven | ||
Hello, Alisha!
|
@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