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
Ping
The real time chat demo.
updated to v2
Flow
The dashboard demo.
updated to v2
Orange
The refreshing storefront demo.
updated to v2
Paper
The elegant and minimalist demo.
updated to v2
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.
Abigail
Adeline
Alexandrea
Alfonzo
@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.
North Casper
South Gregorioville
Wehnerburgh
Donavonland
Champlinborough
Vernaton
West Leonorberg
North Eliseoshire
Sharonview
Lake Nikkishire
Saraistad
Leathaview
Jaskolskibury
Lake Madaline
Lillianaport
New Joany
West Kaciefort
Port Albert
New Valentina
Vandervortchester
Lake Fernland
North Emilburgh
Ethamouth
West Norwoodtown
Luettgenton
East Katelin
West Joeview
Hansenfort
Priceland
Stantonton
Nathanview
North Sebastianstad
Terenceborough
East Faye
South Kallie
West Gino
West Cordell
East Samantha
Estelmouth
Kautzerton
Lake Brandi
Charlestown
Auerview
Steuberland
Lake Delfinaview
Lake Verdiehaven
East Zaria
Lakinberg
Huelsport
New Emmitt
South Vedabury
New Casandrashire
New Davonteborough
Palmafurt
New Laurynshire
Klockoborough
Oniebury
Rosendoberg
Novashire
Port Cathy
Weststad
Carmellaton
Monserratfurt
Romagueraton
Lockmanhaven
Kieraville
Mikefurt
Marquardtside
Ornbury
Dinastad
Jarontown
Lake Colemanport
Damarismouth
Ernserberg
Lake Bellemouth
New Glenna
Hannahmouth
Isabellborough
Aidamouth
North Irwintown
Jackyville
Wolffberg
Desmondfurt
Port Teresa
East Kiannaberg
Cartwrightport
North Luella
Fadelmouth
Darionbury
New Reyshire
Cesarstad
South Shanaberg
East Gustavemouth
West Heathbury
Kulasstad
North Gladycefurt
Lake Elliot
Andrewstad
Port Earlineborough
North Luigi
@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 | Willa | North Casper |
| 2 | Colin | South Gregorioville |
| 3 | Sydnee | Wehnerburgh |
| 4 | Kathlyn | Donavonland |
@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 | ||||
|---|---|---|---|---|---|
| 92 | Abigail |
ierdman
|
South Shanaberg | ||
|
Hello, Abigail!
|
|||||
| 41 | Adeline |
fae.nitzsche
|
Lake Brandi | ||
|
Hello, Adeline!
|
|||||
| 50 | Alexandrea |
dshields
|
New Emmitt | ||
|
Hello, Alexandrea!
|
@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 /> @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