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.
Abbie
Albina
Alfonso
Aliyah
@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.
Port Arielle
Arthurshire
East Minervashire
Jensenton
South Pasquale
Rempelborough
East Eli
Krisland
North Assunta
Vivienneport
Runolfssonland
Chancechester
East Jackie
South Tia
East Gage
South Emery
New Shyannstad
New Anjali
Rippinview
Aldenmouth
Lake Dewayne
Lake Dashawn
Shaniefurt
North Anne
Murazikport
South Sophia
South Phyllisberg
Hahnhaven
Aureliamouth
Heidenreichview
Theodorebury
Adolfoburgh
East Rylan
Alyssonfort
Doylechester
Wunschhaven
Mertzside
North Kathrynfort
Steubertown
Jamelstad
Karsonshire
New Charlotteton
Greenchester
West Isabelside
Fisherland
Sunnymouth
East Willis
Lake Jaquan
Kurtisborough
Rempelville
Bernierfurt
Hartmannville
Lorenzaside
Handmouth
Greenholtburgh
Gregshire
New Heaven
New Davion
Lake Cathrinebury
Dooleychester
East Deondre
Trantowview
East Isobel
New Alexander
East Ashlee
Mosciskiport
Cummingsshire
Alexanneborough
Greenmouth
West Lenny
Langoshport
Chanelchester
Kuhicchester
Ornchester
East Earline
Sanfordside
Christophemouth
East Aleen
Hillfort
Port Amanda
Rohanberg
Port Dante
Gibsontown
Port Thelma
Feestmouth
North Dante
Marjoriebury
Romagueramouth
Ashleyview
Theodoraville
New Augustus
Langland
South Edside
South Genetown
New Jody
Kilbackmouth
Gusikowskiton
Margemouth
East Dahliaville
Port Maraburgh
@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 | Lambert | Port Arielle |
| 2 | Sigurd | Arthurshire |
| 3 | Torrey | East Minervashire |
| 4 | Rocio | Jensenton |
@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
@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