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.
Aaliyah
Abraham
Agustin
Alessandro
@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.
Jerroldborough
West Ruby
Lake Keyshawnside
Schambergerland
Spinkamouth
South Stevie
Schaeferport
North Elza
Gailfort
West Laurieburgh
West Zelma
Harrisshire
Antoinetteshire
South Albertha
Eliseshire
Buddymouth
New Felton
Charleyborough
Port Laurentown
Tyrelview
North Cesarside
Presleyport
Lake Imaland
Lindgrenhaven
Martinachester
Cleveberg
Janiceshire
Timmyhaven
Leuschkechester
Lake Alanis
Port Martyview
Osinskihaven
Brownstad
New Hortense
West Erika
West Deborahhaven
Daviston
Lake Gabrielle
Camilahaven
South Dayana
Eichmannport
Port Janice
Sadiemouth
Kubport
Aimeeview
New Ashleehaven
East Frankieton
South Lilyanville
Marksville
Huelhaven
Walterton
East Chaya
Loyalland
Holdenville
South Elishachester
Isomshire
South Mellie
Beaulahview
Lake Henri
Johnpaulland
Irvingside
East Myriam
East Rae
Lake Marcosfort
North Tyrique
Kodymouth
Faheyshire
Emmettmouth
Kilbackchester
Flatleyville
Port Zacheryfort
Annalisefurt
Prohaskachester
Weberfurt
Port Helga
North Harmony
Spencerville
South Kellenland
Port Ewaldmouth
South Enricobury
Feeneyport
Lonnieton
Laurelchester
East Noemifurt
North Modesta
Dickinsonmouth
Dallasview
Freemanchester
Brownview
Christaberg
North Florencioville
Hodkiewiczshire
New Laury
Schulistmouth
Kundeshire
Giovanimouth
Lake Immanuelside
Port Morgan
Greysonfurt
Port Josefaville
@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 | Thelma | Jerroldborough |
| 2 | Coralie | West Ruby |
| 3 | Orie | Lake Keyshawnside |
| 4 | Louvenia | Schambergerland |
@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 | ||||
|---|---|---|---|---|---|
| 41 | Aaliyah |
archibald20
|
Eichmannport | ||
|
Hello, Aaliyah!
|
|||||
| 24 | Abraham |
titus.hickle
|
Lindgrenhaven | ||
|
Hello, Abraham!
|
|||||
| 71 | Agustin |
sandy.pfeffer
|
Port Zacheryfort | ||
|
Hello, Agustin!
|
@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