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
Users - server side
 
No results found.
Abagail
Ada
Aglae
Alison
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.
West Alexannechester
Ernserport
West Cali
West Sammie
Port Modestabury
Ardenview
North Elverafort
Lake Frederik
South Eryn
Port Rickieshire
North Lorenzo
South Kaelyn
Lake Camillamouth
Schambergerland
Lunaborough
Benniefurt
New Raoul
O'Haraville
Erdmanchester
Port Marielle
New Claudia
Lake Brandon
South Susana
South Orrin
Hamillhaven
Lake Earlene
Willfort
Frederikshire
Oranfort
Eloisabury
Heathhaven
New Akeem
East Cortez
New Carey
Weberville
North Laronland
Port Dorothy
Drakechester
Walkerhaven
Port Emmet
Kuvalisborough
Crooksberg
West Lisa
West Viva
West Katlyn
Clintport
Jasminhaven
Henristad
Herzogbury
Verniceside
North Noeliachester
North Aubreyberg
Lake Morrismouth
Wisokyton
Tarahaven
New Colby
New Jacquelyn
Gibsonborough
East Ruby
North Moses
North Sheridan
Zitamouth
North Claire
Collierfort
West Katelynstad
North Rosaleeburgh
South Lomaland
Donnellburgh
South Leland
Nestorburgh
Bernhardstad
East Pearlie
Reillymouth
East Kennafort
South Leopold
Lake Roma
South Frankieview
South Agustinatown
Bruenmouth
Milfordstad
North Reina
Astridland
Kshlerinburgh
Shermanfurt
Margaretberg
Kochview
Dejahton
Andersonview
Lake Deannaborough
South Valentin
Port Fatima
Marvinstad
North Donavon
West Feliciamouth
Blickburgh
Considineshire
McKenzieville
West Tate
Cristianfurt
Richmondville
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 West Alexannechester
2 Ernserport
3 West Cali
4 West Sammie 
@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
51 Abagail
Hello, Abagail!
17 Ada
Hello, Ada!
61 Aglae
Hello, Aglae! 
@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