Gorgeous UI components for Livewire
powered by daisyUI and Tailwind
Be amazed at how much you can achieve with minimal effort.
Amazing components
⌘ + G
(meta key + G)
Search for "a" to see what kind of content it returns.
Demos
Bird
The Issue Tracker
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
No results found.
Abigale
Adolfo
Albert
Alessandro
@php $users = $this->users; @endphp <x-choices label="Users - server side" wire:model="selected_users" :options="$users" icon="o-bolt" hint="Search happens on server side" searchable />
No results found.
Nyasiaburgh
Nikolaschester
East Johnnieport
Lake Opheliahaven
West Amya
Daishaberg
South Karina
Brownview
East Ivoryhaven
South Aric
Port Einar
Lake Jocelynstad
New Dereck
North Alvena
Harrismouth
South Kari
Champlinstad
East Gracielaton
Jameyhaven
East Isabellemouth
Lake Justiceborough
Rodrickview
New Jimmy
South Brianne
South Chaddport
Lake Shannychester
Pourosbury
Evefort
Dareville
New Delbert
West Bud
Port Avismouth
East Dortha
South Catherinechester
Johnnieborough
Ibrahimville
South Antwan
O'Konfurt
South Eleanore
Port Maritzaview
Ortiztown
North Jadenberg
Ortizville
Port Serenityshire
New Guadalupe
Port Nelson
North Aleneport
Melvinhaven
East Coreneside
Heathmouth
East Lesleyberg
Christelleberg
Adellabury
Riceside
North Olaf
South Brandynport
New Juanitaside
Cordieview
Libbiefort
West Alaynamouth
Port Jeremy
East Kadeside
Port Idell
Wilbertstad
Josueville
Onieshire
West Craigtown
South Lawson
Aliyahmouth
North Elinore
Brodytown
Port Laneburgh
Kuvalisport
East Joseview
Kaylieport
Freedaside
Bradmouth
Swiftport
Kossfurt
Stehrmouth
Eleazarberg
Ceasarhaven
Kianland
Aliyahmouth
Osinskifurt
Santinaview
Quitzonstad
Meganeton
Labadiefort
West Ryleighchester
Kingshire
Lake Naomi
South Chynaview
Myaport
West Valentin
South Kaseyton
Port Christian
Destinymouth
Reicherttown
North Percivalmouth
@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
@php $cities = App\Models\City::take(3)->get(); $roles = [ ['id' => 1 , 'name' => 'Administrator', 'hint' => 'Can do anything.' ], ['id' => 2 , 'name' => 'Editor', 'hint' => 'Can not delete.' ], ]; @endphp <x-form wire:submit="save"> <x-input label="Name" wire:model="name" icon="o-user" placeholder="Full name" /> <x-input label="Amount" wire:model="amount" prefix="USD" money /> <x-select label="City" wire:model="city_id" icon="o-flag" :options="$cities" /> <x-range label="Level" wire:model="level" hint="Select a level" class="range-xs" /> <x-toggle label="E-mails" wire:model="email" hint="No spam, please." right /> <x-slot:actions> <x-button label="Cancel" /> <x-button label="Save" class="btn-primary" type="submit" spinner="save" /> </x-slot:actions></x-form>
Dialogs
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 class="w-11/12 lg:w-1/3"> Click outside, on `CANCEL` button or `CLOSE` icon to close. <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"> Click outside, press `ESC` or click `CANCEL` button to close. <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 | Zora | Nyasiaburgh |
| 2 | Xavier | Nikolaschester |
| 3 | Aubrey | East Johnnieport |
| 4 | Dudley | Lake Opheliahaven |
@php use App\Models\User; $users = User::with('city')->take(4)->get(); $headers = [ ['key' => 'id', 'label' => '#', 'class' => 'w-1 bg-warning/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 | ||||
|---|---|---|---|---|---|
| 93 | Abigale |
harley64
|
South Chynaview | ||
|
Hello, Abigale!
|
|||||
| 58 | Adolfo |
tromp.ellsworth
|
Cordieview | ||
|
Hello, Adolfo!
|
|||||
| 28 | Albert |
zluettgen
|
Evefort | ||
|
Hello, Albert!
|
@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 settings $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 ];@endphp <x-table wire:model="expanded" {{-- Controls rows expansion --}} :headers="$headers" :rows="$users" :sort-by="$sortBy" {{-- Make it sortable --}} link="/docs/components/table?user_id={id}&city={city.name}" {{-- Make rows clickable --}} expandable {{-- Make it expand --}} with-pagination {{-- Enable pagination --}}> {{-- Expansion slot --}} @scope('expansion', $user) <div class="border border-base-content/20 border-dashed rounded p-5 "> Hello, {{ $user->name }}! </div> @endscope {{-- Actions Slot --}} @scope('actions', $user) <x-button icon="o-trash" wire:click="delete({{ $user->id }})" spinner class="btn-circle btn-ghost" /> @endscope {{-- Cell scope --}} @scope('cell_username', $user) <x-badge :value="$user->username" class="badge-primary badge-soft" /> @endscope</x-table>
Enjoy a full set of UI components ...
LET`S DO IT