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.
Abraham
Aletha
Alexandrine
Alice
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.
East Alena
Strosinton
East Efren
Lake Hobart
East Rebeccabury
Rozellaview
Janaeshire
Wilfridmouth
New Orinborough
North Estel
Greenholtmouth
Mayerton
Lake Dane
Blickport
Gibsonfurt
Carloton
New Madelynburgh
Bernhardland
Hudsonstad
Sarahton
Wiegandport
Gusikowskihaven
Lake Eulahland
West Estevan
North Devin
Velmafurt
Lake Rosettamouth
Marisolburgh
Finnchester
Kleinmouth
Dariusville
Kreigerton
East Leland
Vandervortstad
New Christopher
Alishastad
Murrayview
Flavieberg
South Ida
East Mayaton
Lake Sisterfort
Ibrahimport
Brownstad
Todburgh
Port Jaquelin
New Chasity
Waylonfort
Osinskiport
Kshlerinstad
East Joseph
North Lulu
Elvisfurt
Tessiemouth
South Aliviaside
Laurybury
Port Eda
Nyasialand
Perrybury
East Stephanborough
West Erick
Casperburgh
South Hipolito
East Hipolitostad
North Vivianhaven
West Deron
Keshawnview
Richieburgh
Pascalebury
East Noble
West Iliana
West Orland
New Pauline
Ellsworthside
East Columbusbury
Port Scot
West Meggiechester
Tremayneshire
Beerborough
Port Kelsie
Wiegandburgh
Lubowitzborough
Kleinside
South Gunnerbury
Pfannerstillborough
Rhodaside
West Aditya
New Brycen
Maziefort
Ednaside
Feliciamouth
South Leoraview
North Reillyborough
Orinshire
Lednerland
Satterfieldland
Lake Anne
Huelsstad
Lake Aminaton
Conroystad
Bruenville
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 | Marguerite | East Alena |
2 | Drake | Strosinton |
3 | Greyson | East Efren |
4 | Alice | Lake Hobart |
@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 | ||||
---|---|---|---|---|---|
12 | Abraham |
efrain71
|
Mayerton | ||
Hello, Abraham!
|
|||||
87 | Aletha |
ike15
|
New Brycen | ||
Hello, Aletha!
|
|||||
96 | Alexandrine |
waters.arlie
|
Lake Anne | ||
Hello, Alexandrine!
|
@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