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.
Delightfull demos
Will be updated soon to v2
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.
Adelia
Aletha
Alexzander
Ally
@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.
East Victoria
Devonland
Andystad
Port Cathy
North Lelandburgh
Cristchester
New Sonyaberg
Andersonville
Port Lolita
Caseyport
Madalynfort
Dionville
Favianfurt
Lake Eloy
Nolanton
Vidatown
Jamarcusville
Carmelchester
South Hailiestad
New Corbintown
Lake Richmond
Henryville
Hudsonfort
Kubfort
Lake Jackson
West Elishaton
South Kristopher
New Kaitlin
Stantonfort
West Jacquesmouth
Zorahaven
East Colton
Kuhlmanville
New Cheyenneton
Mullerhaven
Jordanechester
South Elton
Balistrerimouth
West Clark
Emardstad
East Harley
North Jaunita
Coltfurt
Lake Nannie
New Marianefort
East Brandt
Chloeport
Gretchenton
West Marlon
North Elnahaven
Feeneyhaven
Lake Samantabury
East Maziemouth
East Earnestland
North Harrison
Eugenemouth
Letitiaville
Strackebury
Chadrickberg
North Brennan
East Vernie
Reichelhaven
Kautzerbury
Jaydonberg
East Eve
Ginabury
Lake Austinburgh
Port Inesland
Lubowitzmouth
New Jonathanhaven
Carrollland
Boyershire
Kariannestad
Sporerland
West Opal
East Bria
Oswaldoberg
Letafort
West Lilyton
South Filomena
Mrazmouth
Wolfbury
Hudsonmouth
Cathyburgh
Isabelshire
East Obie
Robertofort
Streichland
Gaylordmouth
New Clemensborough
East Estella
West Emmieville
Wintheiserland
Alyshaton
West Amosport
Marksview
East Florida
Jesusburgh
North Parker
East Elvie
@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 | Madelyn | East Victoria |
| 2 | Genevieve | Devonland |
| 3 | Fatima | Andystad |
| 4 | Zella | Port Cathy |
@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 | Adelia |
olaf18
|
Wintheiserland | ||
|
Hello, Adelia!
|
|||||
| 53 | Aletha |
djenkins
|
East Maziemouth | ||
|
Hello, Aletha!
|
|||||
| 42 | Alexzander |
morar.gregg
|
North Jaunita | ||
|
Hello, Alexzander!
|
@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