![](/laravel.png)
![](/livewire.png)
![](/tailwind.png)
![](/daisy.png)
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.
Abe
Adonis
Albin
Alex
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.
South Phoebe
West Kristamouth
New Cheyennemouth
Greenfort
Waelchiborough
South Ernestburgh
Hermannshire
Lake Delphinebury
North Devantestad
Muellerstad
New Ettie
Maudside
Hammesside
Brendamouth
East Enochville
North Princesshaven
North Theodora
Madelynnbury
Samantafort
New Jasontown
North Joannieshire
East Jett
Bodechester
South Deonte
Braunshire
North Lucindafurt
Port Lydia
Francesville
Vergieville
East Royceton
Lake Concepcion
New Mark
Rauchester
Brandyside
New Sydnieland
Port Furman
New Landen
Haneville
New Walkerton
Millsbury
Claudefort
Katharinafort
Kubside
South Patsy
Huelfort
Dantefort
Boehmfort
Ziemannfort
Bellmouth
Kshlerinstad
New Lioneltown
Mattfort
Paulineton
Schultzfort
New Johnathonshire
New Emmetmouth
Lake Kiana
South Aditya
East Wilhelmview
Dickiport
Amymouth
West Cristopherview
New Issacview
New Dianna
Ondrickashire
East Mariamland
New Wilburnport
New Margaretshire
Alejandramouth
South Madisenburgh
North Nathaniel
Michaelfurt
Kshlerintown
Howeland
East Abigaylemouth
South Deontaemouth
Lake Jose
Gleasonhaven
Larrytown
Lake Norris
North Myrtle
East Danafurt
Saulfurt
New Rolandoview
East Ellashire
Purdyland
Borerchester
North Jeanette
New Kareemton
West Raven
Judahmouth
Ardithborough
Trentonhaven
Collinsmouth
Lake Jaydonland
Kertzmannburgh
Lake Marisachester
East Jasonside
North Dimitri
Garretthaven
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 | Dee | South Phoebe |
2 | Valerie | West Kristamouth |
3 | Russ | New Cheyennemouth |
4 | Timothy | Greenfort |
@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 | ||||
---|---|---|---|---|---|
44 | Abe |
nlegros
|
South Patsy | ||
Hello, Abe!
|
|||||
28 | Adonis |
ukeeling
|
Francesville | ||
Hello, Adonis!
|
|||||
23 | Albin |
kaycee.erdman
|
Bodechester | ||
Hello, Albin!
|
@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