Gorgeous UI components for Livewire
powered by daisyUI and Tailwind
Be amazed at how much you can achieve with minimal effort.
Sponsors
Partners
Showcase your brand here for
monthly visitors.
Amazing components
+ G (meta key + G)
Search for "a" to see what kind of content it returns.
Add images
Images | Max 100Kb
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
Users - server side
Search happens on server side
No results found.
Adele

Ahmad

Alanna

Alexa

@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 />

Cities - frontend side
Search happens on frontend side
No results found.
Port Clint

Boganbury

New Trystanchester

Paoloport

Russelville

Friesenborough

Lake Hersheltown

Abshireland

East Ronaldo

North Warrenport

East Lue

Coyfort

Jovanborough

North Eileenville

New Phoebe

Caesarton

North Delphine

Kuphalshire

Kohlerbury

Minervahaven

Lake Emmanuelle

Lake Maud

West Blanca

Hermanbury

Pagacview

New Christafort

Bashirianhaven

Balistrerihaven

East Cara

Millerberg

Isaishire

East Sabrynabury

Lake Taylor

Hannahport

Port Collinfort

New Braxtonton

Lake Rodrigo

Port Eldora

Kassulkeside

Port Junior

Kiehnport

Darrionbury

Lake Alejandraberg

Lake Conrad

Donside

East Guiseppe

Parisiantown

Lake Bradhaven

East Freidatown

Nigelmouth

East Cornellside

Port Arnaldo

South Halle

Horacioshire

East Jeffrey

Goldnerland

East Gerryview

Pollichview

Borerborough

Blicktown

East Elouise

Uptonton

Lake Abbigail

Quitzonborough

Jadynborough

Port Wilberville

Mollieland

Chelseatown

New Gilberto

North Jaquanberg

Fayhaven

East Marisolview

Keelington

North Hansshire

Maidaborough

East Erwinshire

Pfefferport

North Lolaside

Stephaniaberg

Ernestoview

East Omaport

North Darwin

South Rubieview

East Floridastad

Homenickstad

Hattiefurt

Krischester

West Granvillebury

Lindbury

Port Verdie

McCulloughshire

Armstrongtown

Batzbury

West Angelineberg

Gusikowskichester

Stehrton

East Bochester

West Madisyn

Port Alexandrine

Prohaskahaven

@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
Name
Amount
City
Level
Select a level

@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 Port Clint
2 Boganbury
3 New Trystanchester
4 Paoloport
@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
@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