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
Adrien
Alanna
Alejandrin
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 Daytonside
Port Eloisa
Westshire
Darioburgh
Angeloberg
Hodkiewiczborough
Aniyahfurt
East Jordonstad
Port Taryntown
Karleychester
Kerlukefort
Trompside
Leschland
Lake Athena
Rennerberg
Reaganland
Neilshire
West Brigittestad
Ellisbury
Ankundingchester
Kenyattaview
Hermannton
New Angelica
North Destiny
Abshireshire
New Albertafort
East Carey
Peteville
North Ellsworth
Sigmundchester
West Assuntaview
Buckstad
North Carlo
Lake Elizaborough
East Carleefurt
Terrillchester
East Lulu
Lake Dortha
East Dena
Walshbury
South Alyceberg
Lake America
Port Eriberto
Erynborough
Lake Florenciomouth
Ratkeville
Nienowmouth
South Jana
Powlowskimouth
East Talonshire
Wehnerchester
Port Kelsie
Bashirianville
Torrancemouth
Leifburgh
Aftonmouth
Geraldinehaven
East Nat
New Shannon
Beckerhaven
Hazelfort
Jeromemouth
New Narciso
Lindchester
East Karleychester
Port Fidelburgh
South Carolynshire
South Carmelchester
New Darrionfurt
South Geovanni
Vernmouth
Carmelland
East Stephaniabury
Kirstenville
Linwoodhaven
North Dina
Jacquesland
Shieldsport
Jeffryhaven
Eichmannberg
North Libbyshire
South Ednamouth
Stammborough
Port Dewitt
Predovichaven
Lake Layla
West Reggie
North Pattie
Terrymouth
Dawsonstad
Burdetteport
Port Courtney
North Doug
Boganmouth
West Gavin
O'Konland
Colemanside
Stracketown
Heathcoteborough
Nameshire
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 | Marcos | North Daytonside |
2 | Robyn | Port Eloisa |
3 | Rowland | Westshire |
4 | Keith | Darioburgh |
@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 |
kiehn.selina
|
Powlowskimouth | ||
Hello, Adela!
|
|||||
81 | Adrien |
kovacek.amparo
|
North Libbyshire | ||
Hello, Adrien!
|
|||||
92 | Alanna |
davis.kimberly
|
Port Courtney | ||
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