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.
⌘ + G
(meta key + G)
Search for "a" to see what kind of content it returns.
Add images
Images | Max 100Kb
Delightful demos.
Ping
The real time chat demo.
Flow
The dashboard demo.
Orange
The refreshing storefront demo.
Paper
The elegant and minimalist demo.
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.
Ahmed
Alayna
Alberto
Alexandra
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.
Konopelskiport
North Verlie
Port Leliaberg
North Sandra
Heidenreichmouth
North Kaitlyn
Lake Kattieview
Herzogberg
Rutherfordton
Franciscaborough
Crystaltown
Rennermouth
Cleveborough
Grahamton
South Daxmouth
West Shanon
Padbergshire
Kubland
Port Mikelton
Elisaburgh
Ezekielton
Sanfordmouth
Jaysonmouth
Metafort
Huelston
Lake Dorothy
New Jeanieland
Montyville
West Rickiemouth
Lake Juneville
East Benjaminbury
Keatonfurt
West Deronland
Floridaview
Port Roxannemouth
South Zion
West Ewaldfort
Margaritaberg
Port Carole
East Tanyafort
Kaleburgh
New Guidomouth
Solonstad
South Pattiemouth
South Saige
New Simone
Loweview
Port Virgilfort
North Cathryn
South Marcelletown
Gleasonburgh
Morissettemouth
East Dimitritown
Ahmedborough
South Kaela
Port Imogene
Daretown
South Leonie
Walterhaven
West Theresa
South Clayshire
Bodemouth
Port Litzychester
North Gilberto
Ethelynborough
Lake Zachery
Lake Selena
Doyleborough
Jalynton
Krajcikton
Cummerataport
Mohrborough
Elmofort
New Johanna
Preciousberg
Lake Eliezer
Mialand
Lake Elvabury
Glennafurt
Lauryntown
Bechtelarshire
Port Deshawnland
East Louvenia
Francescofort
Eldredbury
West Kentonshire
North Estella
Cormierborough
Elvisburgh
Bodeside
Micaelatown
West Dewitt
Joanfort
Naderbury
Halvorsonfurt
Shieldstown
Herzogtown
Kulasville
East Katelyn
Aniyahstad
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 | Mason | Konopelskiport |
| 2 | Brooklyn | North Verlie |
| 3 | Gracie | Port Leliaberg |
| 4 | Madilyn | North Sandra |
@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.
@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