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.
Abdiel
Abe
Alek
Alfonzo
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.
Kubfort
West Amani
Yundtmouth
Alexaneshire
East Winstonshire
Alenaville
West Zena
Valentinaside
Ebertberg
Port Urban
East Simchester
Sporerstad
South Torreyville
Buckton
South Elisa
Port Barton
Greenfort
West Kamrynport
Destineeton
Metzview
North Mayachester
North Clarissaside
South Jena
North Emerald
New Myahchester
North Rasheed
East Bethanyview
Robelmouth
Bellfurt
Cristberg
Wildermanport
Hegmannhaven
Lake Kassandra
Mooreton
Johnathanfurt
Hollystad
South Loraine
Strackestad
Darechester
Amandatown
Alfonzoside
Terrellview
Runtefort
New Raventon
Blockmouth
New Lottie
North Kaylah
Carlifort
Lake Amanda
West Rene
Leschmouth
Port Demetris
Port Claudie
Port Oranhaven
Cristopherborough
Langworthton
Lake Jenifertown
Kaitlinton
Willmshaven
Jadeborough
Farrellfort
New Goldatown
Kulasbury
West Bernadineview
New Rosanna
East Nikolasstad
Creminberg
Rohanberg
Delphineville
Port Constancebury
Runolfssonshire
Joannietown
Blockberg
Baileyland
Christbury
Paucekview
Ferryport
South Clarabellefort
Ernserview
East Rhoda
West Jazmynborough
Andyview
Quitzonbury
Lake Alberthachester
West Vinnie
South Mazie
North Josie
Monahanstad
Reillyville
Lake Malika
Abbottfort
Schadenchester
Lake Bria
Weissnatshire
New Aylin
Rosannaberg
North Magdalenstad
Velmaview
Port Carliburgh
Lake Eldred
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 | Llewellyn | Kubfort |
2 | Ericka | West Amani |
3 | Mona | Yundtmouth |
4 | Brielle | Alexaneshire |
@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 | ||||
---|---|---|---|---|---|
89 | Abdiel |
wilderman.geovanny
|
Reillyville | ||
Hello, Abdiel!
|
|||||
53 | Abe |
carroll.hayes
|
Port Claudie | ||
Hello, Abe!
|
|||||
13 | Alek |
bruce.dubuque
|
South Torreyville | ||
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