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
Coming soon
new
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.
Abdiel
Adrian
Afton
Agnes
@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.
South Danialfort
Haagberg
Muellerview
Mrazfurt
Trompfort
South Kristian
Port Zola
North Charity
North Joannieshire
Caesarborough
South Jillian
Considineview
East Grace
Shanieside
South Bellaberg
Jaleelborough
Dallasview
East Hannahview
Lake Luciano
Alfonzofort
West Camrenview
Gennaroview
Baileytown
Greenfeldershire
New Mayraburgh
Schadenmouth
Rogerfort
North Mathildemouth
Yesenialand
McLaughlinfort
Farrelltown
Satterfieldview
Satterfieldfort
Kesslerburgh
East Brisa
Wehnerton
Harveyhaven
Bogisichberg
Lake Omaton
Reillyside
Waelchiville
South Anya
Medhurstchester
West Lisa
Port Joaniefurt
Port Mathias
South Katherine
Lake Denisburgh
Trompbury
Port Vernicemouth
Murielshire
Lake Germaine
West Zorashire
Port Eveborough
Sophiafort
North Winfieldchester
New Violette
Reynoldsville
West Cyril
Port Berryberg
Jadenbury
Fosterchester
Beahanville
New Donaldton
Grantburgh
Adamland
East Bellaport
New Marco
McKenziebury
Gerlachland
East Urbanbury
Shaneview
South Glenna
Larkinchester
West Janelle
Port Derekmouth
Moniquechester
Port Juanita
Darylmouth
Novellamouth
Coryton
Port Kristinfurt
Greenholttown
Huelburgh
Anselmouth
West Natalia
New Erinside
East Jacinthe
North Arch
East Kaylin
East Ezequiel
Raleighmouth
North Caitlyn
New Eloisemouth
Langoshbury
North Nyah
South Floyd
Keeblerberg
Aleentown
New Vernon
@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 | Freddie | South Danialfort |
| 2 | Pete | Haagberg |
| 3 | Corine | Muellerview |
| 4 | Norene | Mrazfurt |
@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 | ||||
|---|---|---|---|---|---|
| 67 | Abdiel |
cruickshank.reuben
|
East Bellaport | ||
|
Hello, Abdiel!
|
|||||
| 90 | Adrian |
destin.jakubowski
|
East Kaylin | ||
|
Hello, Adrian!
|
|||||
| 7 | Afton |
renee21
|
Port Zola | ||
|
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