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.
Adela
Adelia
Agnes
Alessia
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.
Stokesborough
Emelyshire
Port Quincyshire
Alexaton
East Andy
New Claraborough
Port Margaretta
Ondrickastad
Port Meaghan
North Alfredmouth
McCulloughton
Lelahton
Reichertport
Sidfurt
New Judsonfort
Ashtonview
Deionchester
South Ebbahaven
Americamouth
Darionborough
Lilianaview
South Alice
Johannaview
Brakuston
Darrinfort
Dietrichfurt
Zolatown
West Gregory
Lake Brennan
Lake Waynemouth
South Shane
Manuelstad
Ardenhaven
East Brockland
Port Generalshire
South Amina
Kovacekport
Kleinfort
Lake Wade
Port Alanna
West Guiseppe
New Orland
Creminborough
Dickinsonshire
South Elna
New Bertrand
Stammmouth
Port Jasmin
Lake Ebbatown
Kemmerhaven
Taliahaven
Allyport
Dennisshire
West Aminaton
Johnsonshire
Kaylieside
Port Wyman
Port Ahmad
Lake Derickfort
South Petechester
Kozeyberg
Schoenmouth
Lempiland
Lake Timmy
Traceyland
South Alisonfurt
Gregoriotown
Lake Allene
North Keltonmouth
DuBuquefurt
Lake Zackville
East Marlene
Mathewbury
North Ethyl
South Norbert
Westtown
South Anitaside
Ricardoside
Jacobsonmouth
North Aminaborough
Rogahntown
North Kristina
Donnellyland
Schmittstad
Champlinport
East Gregoriaview
Morarview
Grahamport
Alicemouth
North Brandtburgh
Greenstad
South Nellie
Port Benjaminfort
Garnettland
West Artville
Lake Mandytown
North Mervinton
North Naomi
East Kayport
East Brennan
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 | May | Stokesborough |
2 | Alessia | Emelyshire |
3 | Hector | Port Quincyshire |
4 | Juanita | Alexaton |
@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 | ||||
---|---|---|---|---|---|
49 | Adela |
xstokes
|
Lake Ebbatown | ||
Hello, Adela!
|
|||||
19 | Adelia |
lemke.talon
|
Americamouth | ||
Hello, Adelia!
|
|||||
57 | Agnes |
lawson27
|
Port Wyman | ||
Hello, Agnes!
|
@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