mary
Do more. Code less.
Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind
GET STARTED

The elegant and minimalist demo.
Get surprised how smooth was to built it.

See the demo Source code

The refreshing storefront demo.
Get amazed how much you can do with minimal effort.

See the demo
Less code, more action. 
@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
It. Just. Works.
 
No results found.
Adelia
Alana
Alexanne
Ana 
@php                              
    $users = $this->users;   
@endphp                         
<x-choices
    label="Searchable"
    wire:model="selected_users"
    :options="$users"
    searchable />
Forms.
USD 
<x-form wire:submit="save">
    <x-input label="Name" wire:model="name" icon="o-user" placeholder="Hello" />
    <x-input label="Amount" wire:model="amount" prefix="USD" money />
 
    <x-slot:actions>
        <x-button label="Cancel" />
        <x-button label="Save" class="btn-primary" type="submit" spinner="save" />
    </x-slot:actions>
</x-form>
Tables.
# Nice Name City
1 Duncan Ebertchester
2 Iliana Brendantown
3 Clementina Port Lenorefort
4 Lyla West Harrison
5 Hailie Mertzchester 
@php
    // public array $selected = [1, 3];
 
    $users = App\Models\User::with('city')->take(5)->get();
 
    $headers = [
        ['key' => 'id', 'label' => '#', 'class' => 'text-red-400'], # <-- css
        ['key' => 'name', 'label' => 'Nice Name'],
        ['key' => 'city.name', 'label' => 'City']   # <-- nested object
    ];
@endphp
 
{{-- See console ouput --}}
{{-- You can use any `$wire.METHOD` on `@row-xxxx` --}}
<x-table
    :headers="$headers"
    :rows="$users"
    striped
    selectable
    wire:model="selected"
    @row-click="console.log($event.detail)"
    @row-selection="console.log($event.detail)" />
And more ...
LET`S DO IT