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.
Abbey
Aimee
Alanna
Alayna
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.
North Daytonton
Reganport
Beerborough
New Eleanoraport
East Helena
North Gabrielle
Beverlytown
Kimberlyton
Alyceview
Brendaview
Wardtown
North Zulaland
Pfefferhaven
Lake Lavadamouth
New Mitchelburgh
Lefflerview
Broderickfurt
Wunschland
Cecilport
Port Janieport
West Courtneyville
West Edenmouth
Sheabury
West Savanna
Destinview
Holdenbury
Port Damienview
Demetriusberg
Port Arelyberg
North Garrisonville
Kertzmannview
Grahamstad
West Dalton
Cronahaven
Lake Assunta
North Adrain
Marquiseborough
Lake Harmonburgh
Rahulport
West Makenzie
Tremblayhaven
East Mathewhaven
Leannland
New Quincystad
New Elaina
Starkport
Heidenreichstad
Altenwerthmouth
Paytonborough
New Haleigh
Medhurstfurt
Nelsfurt
Greenbury
Altenwerthmouth
Dickinsonstad
Toyville
Lake Hardy
East Shannonville
South Bulah
Soniafort
Swiftville
West Melodystad
Lake Judahville
O'Connershire
Lake Maurice
Kesslerburgh
South Dean
North Emmittmouth
North Kalliebury
New Dahliamouth
Stewartville
Fredmouth
West Nathanial
Port Jaquelinefort
North Lavern
Connellyberg
West Eliasport
North Cordie
Thaliaton
East Pearlport
Port Miaside
East Shane
Beierside
McLaughlintown
Windlermouth
Parisiantown
Port Jaronborough
Port Amyaville
Carolyneton
Jarrellland
D'Amorehaven
Cecileville
North Roel
Port Armando
West Serenity
East Earnestmouth
Hyattport
Port Melyssa
Murphyberg
Jamirchester
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 | Tate | North Daytonton |
2 | Providenci | Reganport |
3 | Etha | Beerborough |
4 | Dagmar | New Eleanoraport |
@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 | ||||
---|---|---|---|---|---|
98 | Abbey |
hwiza
|
Port Melyssa | ||
Hello, Abbey!
|
|||||
43 | Aimee |
jammie.towne
|
Leannland | ||
Hello, Aimee!
|
|||||
36 | Alanna |
bettye.wisozk
|
North Adrain | ||
Hello, Alanna!
|
@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