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
No results found.
Adrain
Alene
Anastasia
Audie
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.
West Duane
Torphyburgh
Adamsport
Bahringerchester
Santaton
Beverlyshire
Westberg
New Addisonside
Theodoreview
Port Abdullah
New Emiliabury
Sylviaton
Obieside
West Kimberly
Schmelerburgh
Krisshire
East Emmanuelle
South Amina
West Valentinafurt
Naderland
Nevaland
Lake Tyresemouth
Jarrodchester
Lemkestad
New Letitia
Lake Darrell
South Trinity
Cielofort
Handstad
West Jewelview
West Chadd
Port Michaelamouth
Helmerberg
West Kennytown
Wuckerttown
West Laviniamouth
Bednarview
Howellmouth
Port Gabrielfurt
Satterfieldchester
West Sarinaside
Jackiefurt
Albinburgh
Nadermouth
West Bailee
Lake Delmerville
Camilaton
North Vicentahaven
Lake Jeremie
Legroston
North Lemuelstad
Lake Claire
Westontown
North Junior
Thielstad
Wymanchester
Johanntown
Pagacmouth
Raphaelfort
Wilhelmberg
New Tatyana
South Elmoremouth
Lake Kelsie
Karinaberg
Pagacfort
East Skylar
East Allyfort
Gunnarburgh
North Leanneland
Bergnaumton
Koeppberg
Hahnland
Lake Claudia
Feeneyville
Trantowhaven
Carolechester
Manteland
Lake Bryonville
Kiaraside
Hacketthaven
Haleyburgh
Willville
East Alexys
Beckershire
Leannontown
Port Valentinebury
O'Keefetown
Hermannbury
North Marcville
Moseborough
Rafaelmouth
Johnfort
West Adrian
Danykaport
North Susan
East Cordellborough
East Evangelineborough
Port Trentonland
Port Elna
New Ethelynfurt
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 | Edd | West Duane |
2 | Leon | Torphyburgh |
3 | Dorian | Adamsport |
4 | Jaron | Bahringerchester |
@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 | Adrain |
hvonrueden
|
Koeppberg | ||
Hello, Adrain!
|
|||||
10 | Alene |
yrice
|
Port Abdullah | ||
Hello, Alene!
|
|||||
63 | Anastasia |
whahn
|
Lake Kelsie | ||
Hello, Anastasia!
|
@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