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.
Adam
Adelbert
Adele
Alvera
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.
Port Wymanborough
Pfeffertown
Port Sylvanchester
Armandview
Mitchellborough
South Pattiefort
Lake Daytonport
Lake Katarinamouth
Jaunitabury
Harveychester
Janniehaven
Laviniaview
West Gwendolyn
East John
Hannahstad
Lake Cordie
Alexiemouth
New Jaycebury
Mackstad
Lake Myrtis
Port Karson
Demetrisfort
East Kalehaven
Greenmouth
Emiechester
Berylton
North Roberto
Aronstad
Jodyview
Kilbackland
Uptonville
West Veldahaven
New Mateo
Lake Leliamouth
Buckridgefort
Benjaminbury
Lake Tiara
Karlland
Lake Ashleeport
East Kenneth
Beierberg
Schinnermouth
Lake Justyn
Leetown
Stephanyview
Jenkinsstad
West Ahmed
East Jarret
Connellyfurt
South Arvilla
North Troy
Garrickmouth
Greenborough
North Claudine
Lakinland
Boyleport
Margarettside
North Magaliberg
Lake Sarah
Zoiefurt
West Hallieville
Ronnychester
East Myahstad
West Zula
Judgeberg
Port Zelmaside
North Bianka
Strackemouth
Jessicaside
East Wilmafort
Port Hayleyland
Mozellport
Satterfieldside
Mayertton
Paucekchester
East Gerald
West Brittanyhaven
Lake Lisa
Maudport
Norrismouth
West Lavernaview
Hintzton
Jovanstad
Johnsonchester
Valentineshire
West Theresiahaven
Jordynport
Queeniemouth
Stevemouth
Lefflerberg
Brakusborough
South Rogelio
New Katelinfort
Port Lucy
West Jerald
Babyview
Harbertown
Lake Joshuaburgh
Westbury
Jessland
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 | Consuelo | Port Wymanborough |
| 2 | Theresia | Pfeffertown |
| 3 | Manuela | Port Sylvanchester |
| 4 | Anibal | Armandview |
@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 | ||||
|---|---|---|---|---|---|
| 36 | Adam |
flavie83
|
Benjaminbury | ||
|
Hello, Adam!
|
|||||
| 82 | Adelbert |
corrine22
|
Hintzton | ||
|
Hello, Adelbert!
|
|||||
| 88 | Adele |
emory.gerhold
|
Queeniemouth | ||
|
Hello, Adele!
|
@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