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.
Abagail
Adelbert
Afton
Alessandra
@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.
Lake Joycechester
Elizamouth
Port Roxannefort
Botsfordside
South Amie
South Coyland
Port Oscarstad
East Randallmouth
South Royal
East Zackary
Margemouth
Port Alessandra
Funkland
Spencerland
Weldonview
Steuberland
South Roslynburgh
Schultzborough
New Carolanneport
Port Myrtleberg
Angieborough
Lake Seanfurt
Titusfurt
Port Orphamouth
Dougshire
Billland
Reystad
North Dahliafort
Pollichchester
West Lolita
North Edmondborough
East Wendy
Krajcikville
Schmidtfort
Port Amara
South Bayleemouth
North Johathanbury
South Janicetown
Port Loyal
North Missouri
Toyshire
South Holden
South Claud
Bernadetteburgh
Lake Jannieburgh
Bernardchester
Boyleberg
South Annalise
Legrosport
West Joannie
Ricardostad
Volkmanburgh
South Marion
Boganport
Georgianashire
Port Antonette
Lockmanborough
Tedville
Garnetmouth
Wisokyside
South Kiley
Port Kellyview
New Edenville
Marleybury
Hesselshire
Lake Wava
North Antonia
Taliastad
West Duane
Lake Jaedenland
Okunevashire
Hellerland
New Nannie
West Ilenehaven
Lavernport
North Daniellamouth
Shyanneside
West Merl
East Adah
West Dejaburgh
South Maybelle
Zulaberg
Schulistfurt
West Derek
Port Gretabury
Lake Monroeland
Kuhlmanbury
Port Lavernatown
Davidton
Klingborough
Hyattport
South Alysafort
Burdetteberg
Claudeland
West Ole
Batzfort
Beulahton
Andresmouth
Sebastianfurt
Dickensville
@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 | Alexzander | Lake Joycechester |
| 2 | Holly | Elizamouth |
| 3 | Trey | Port Roxannefort |
| 4 | Ruby | Botsfordside |
@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 | ||||
|---|---|---|---|---|---|
| 42 | Abagail |
apfannerstill
|
South Holden | ||
|
Hello, Abagail!
|
|||||
| 99 | Adelbert |
milton.cartwright
|
Sebastianfurt | ||
|
Hello, Adelbert!
|
|||||
| 64 | Afton |
sarina.treutel
|
Marleybury | ||
|
Hello, Afton!
|
@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