maryUI
Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind
Bootcamp Installation
Sponsors
Sponsor
Amazing components.
⌘ + G (meta key + G)

Search for "a" to see what kind of content it returns.

Crop image

Add images
Images | Max 100Kb
Delightful demos.
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.
Abel
Agustina
Ali
Alva
Search happens on server side
@php                              
    $users = $this->users;       
@endphp                         
<x-choices
    label="Users - server side"
    wire:model="selected_users"
    :options="$users"
    icon="s-bolt"
    hint="Search happens on server side"
    searchable />
 
No results found.
Schmelerview
Jimmyberg
Preciousshire
South Bernadine
Taniaburgh
West Lurline
South April
Willmsview
New Immanuelberg
Port Jaceyberg
South Austinborough
Port Katherinefort
Lake Stefan
New Shanelleshire
Port Amari
New Gaylord
North Aniyaside
North Koryland
New Kobyhaven
New Marioshire
West Verliechester
Gusikowskiton
Jacintostad
Elroyburgh
Streichstad
Lake Myah
Quitzonland
Johnsonbury
West Milliebury
New Shanellestad
Kundemouth
North Annieland
Cruickshankfort
Hickletown
East Vidamouth
North Desiree
Boyerview
North Fabian
Murazikport
Nikolauston
Aubreyfort
Vedaland
South Van
East Chanelville
Gailtown
Lehnerfurt
North Marcelville
Boehmland
Lake Estefania
Port Bertrambury
South Doris
Port Gregoryhaven
New Darius
North Eula
West Celestinostad
Serenityburgh
East Kelsieborough
Ramonland
Odieview
Lake Donald
North Fredy
New Tom
Lefflerton
Nettieville
South Wendyshire
Harberborough
Ratkeburgh
Maudeberg
Wiegandstad
Murazikhaven
Isaiahberg
Kuhicview
Lake Lillian
Saraiside
South Tyreekstad
O'Keefebury
Lake Halleville
North Eulahstad
North Norbert
Braulioburgh
Kerlukechester
Weimannland
Angiestad
Rutherfordbury
South Hank
South Broderick
Lake Jerrell
Hamillport
New Antone
Archibaldburgh
Emardshire
East Thomasshire
Kirkville
Bednarberg
Sauerburgh
Kuhnville
North Sibylbury
Ortizfort
Prohaskaville
Lake Macey
Search happens on frontend side
@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.
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>
Drawer & Modal
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 separator class="w-11/12 lg:w-1/3">
    <div>Click outside, on `CANCEL` button or `CLOSE` icon to close.</div>
 
    <x-slot:actions>
        <x-button label="Cancel" wire:click="$toggle('showDrawer')" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</x-drawer>
Hello
Livewire example

Click outside, press `ESC` or click `CANCEL` button to close.

 
@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" subtitle="Livewire example" separator>
    <div>Click outside, press `ESC` or click `CANCEL` button to close.</div>
 
    <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 Schmelerview
2 Jimmyberg
3 Preciousshire
4 South Bernadine 
@php
    use App\Models\User; 
    $users = User::with('city')->take(4)->get();
 
    $headers = [
        ['key' => 'id', 'label' => '#', 'class' => 'w-1 bg-yellow-500/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
50 Abel
Hello, Abel!
21 Agustina
Hello, Agustina!
87 Ali
Hello, Ali! 
@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 = [
        ['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
    ];
 
    $cell_decoration = [
        'name' => [
            'bg-yellow-500/20 italic' => fn(User $user) => Str::of($user->name)->startsWith('A')
        ]
    ];
@endphp
 
<x-table
    wire:model="expanded"
    :headers="$headers"
    :rows="$users"
    :cell-decoration="$cell_decoration"
    :sort-by="$sortBy"
    link="/docs/components/table?user_id={id}&city={city.name}"  {{-- Make rows clickables --}}
    expandable
    with-pagination
>
    {{--  Expansion slot --}}
    @scope('expansion', $user)
        <div class="border border-dashed rounded-lg 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" />
    @endscope
</x-table>
And more ... LET`S DO IT