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.
Abdul
Abner
Alessandra
Alexanne
@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.
East Cheyenneberg
Port Manuel
East Eldora
North Felicity
South Elnamouth
Aldaton
South Leashire
West Jordi
New Chase
North Alfred
Toyburgh
Avaland
West Louveniabury
Lubowitzmouth
Collierfurt
Lake Camden
Wisozkmouth
Montanafurt
Dickensview
West Jamarcusberg
Koepphaven
Javontemouth
Hermistonland
Lake Madiechester
Borerview
Lake Sonia
Kuphalfurt
North Brannon
South Kayley
Priceview
Lake Kiraberg
Port Tristonport
Stacyfurt
Port Mackenzie
East Vickyland
West Monroehaven
Marianport
Lake Asashire
New Norris
Alexannechester
Port Johathan
New Einoton
O'Connellshire
Clairefort
Weissnatview
Donnellborough
Hermanfurt
North Nayeli
Rogahnport
South Freddiemouth
West Geovany
Crystalfort
Lake Alfreda
Dayneland
Yostchester
South Joellefurt
Lake Angelo
Lake Elishaside
New Henriettefort
New Dulcemouth
Ellsworthberg
Reaganfurt
Lake Waldohaven
Yolandaview
Lake Aurelioview
East Margieborough
New Rodolfo
East Xanderfort
Port Darianchester
West Ramonafurt
Casperbury
Rueckerton
Hilpertfort
Port Diannamouth
Jimmyfort
North Luciusland
Rosettaton
Colleenfurt
South Vivien
Hesselmouth
Lynchstad
Kshlerinmouth
North Chasemouth
Kohlertown
South Marcelle
Beershire
Bergechester
Bethbury
North Oma
Isabellefort
South Zeldaview
Aydenchester
Streichville
West Blaise
Shemarshire
West Lilianland
West Verla
Mariannemouth
West Sterlinghaven
West Art
@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 | Tevin | East Cheyenneberg |
| 2 | Brianne | Port Manuel |
| 3 | Nyah | East Eldora |
| 4 | Rosalia | North Felicity |
@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 | ||||
|---|---|---|---|---|---|
| 79 | Abdul |
fay.klein
|
South Vivien | ||
|
Hello, Abdul!
|
|||||
| 48 | Abner |
roma54
|
North Nayeli | ||
|
Hello, Abner!
|
|||||
| 56 | Alessandra |
clittle
|
South Joellefurt | ||
|
Hello, Alessandra!
|
@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
