Gorgeous UI components for Livewire
powered by daisyUI and Tailwind
Be amazed at how much you can achieve with minimal effort.
Demos
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.
Adrien
Aglae
Aimee
Alda
@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.
North Betsyborough
Ignacioberg
South Delaney
South Destineeshire
Langworthside
Lake Deshaun
Brianaberg
New Nellaland
West Devanteview
North Tiannafort
New Rudy
Estefaniastad
South Rhiannonton
Turcottechester
South Emiliabury
New Katelinshire
Port Gabefort
Lake Annabellemouth
Lake Wayne
Lake Lily
New Carmeloburgh
East Claymouth
South Kathryne
New Omerfurt
Stoltenbergtown
Port Kathryneport
West Lemuelstad
New Ottohaven
North Diamond
Beerhaven
Tamiachester
North Laurineland
Rolfsonmouth
Port Dejahfort
Port Augustine
South Nova
South Lonnie
New Gina
East Daniela
Minamouth
Kshlerinside
Port Sylvesterfurt
Spencerchester
West Kevonbury
West Noraton
Lake Minaside
West Lillyview
West Berniceville
Abbieland
West Cristal
Padbergbury
Josuehaven
Dickinsonville
Hegmannbury
South Merlton
South Brendonmouth
Simeonberg
West Alfordview
West Elizabeth
New Dorothy
Port Myrtie
North Herminatown
Halvorsonborough
Lake Israel
Lake Alison
Elenaview
East Betsyville
East Evangeline
New Litzyville
Maxinechester
North Osborne
West Scot
New Monica
Kunzehaven
Lake Alanna
South Annabellemouth
Kreigertown
Lake Nicholefort
New Judy
North Cecilia
Erynmouth
Port Nicolas
New Chanceberg
South Rodolfochester
Vonberg
Skylafort
Alexannebury
New Caryport
Stokesview
Euniceshire
Elizabethview
Barneyville
Reesefurt
Aldaville
Port Crystelport
North Aureliefort
New Antoniettahaven
Schoenfort
Lindsayview
Port Sharonstad
@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 | Merritt | North Betsyborough |
| 2 | Cristal | Ignacioberg |
| 3 | Mike | South Delaney |
| 4 | Ole | South Destineeshire |
@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 | ||||
|---|---|---|---|---|---|
| 63 | Adrien |
willms.raquel
|
Halvorsonborough | ||
|
Hello, Adrien!
|
|||||
| 5 | Aglae |
kstanton
|
Langworthside | ||
|
Hello, Aglae!
|
|||||
| 41 | Aimee |
meredith.white
|
Kshlerinside | ||
|
Hello, Aimee!
|
@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