maryUI v1
maryUI v1 is deprecated! Upgrade to v2 →

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.
Abdiel
Adelia
Adolfo
Adriel
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.
South Kiannaburgh
Lake Petra
North Trace
South Marianaville
Schultzside
North Eltafurt
Nakiafurt
South Jackie
Lake Kadehaven
Goodwinborough
East Rodgerburgh
Darwinshire
Port Kathleenberg
Houstonberg
Bobbieport
Erickastad
Baileyburgh
Lake Rubenhaven
Lake Sandy
Schmelerville
Lake Gilbertview
Braulioberg
Claudinefurt
Smithshire
North Lennietown
Adrianburgh
West Jaylin
West Adonishaven
New Jeanie
Armstrongtown
New Justonville
Jordifurt
South Janellebury
Spinkastad
Nienowchester
West Abbigail
East Jenniferport
Hegmannland
Beckerland
Bernhardmouth
East Magnusstad
Lake Susannaside
Kihnview
West Jairo
Lake Clarissashire
Lanefort
Bruenside
Lake Erynside
Eichmannborough
Maximilianfort
Lake Ron
Bednarborough
Treutelbury
Ulisesland
South Evalyn
New Romaview
South Korbinville
Kennyport
Wehnerberg
Scarlettborough
West Rebekah
Christiansenville
North Coleman
Jerodton
Schmidtside
Jadonland
Predovicmouth
South Janiyamouth
North Faefort
Donnellyville
Lake Lucioustown
New Elvie
New Colby
New Faustino
East Brisafurt
Port Amariburgh
Irmaport
Raynorchester
Kshlerinton
South Rodger
Carliehaven
Boylehaven
West Isidrostad
Janessaland
Freidaview
Macejkovicburgh
Harveyview
Baileyfort
West Myriamton
Rippinstad
West Vanessatown
Zemlakport
West Humbertoport
Legrosport
Walterborough
Boyerbury
New Deloresport
Colleenville
Robbview
Marcelinaborough
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 South Kiannaburgh
2 Lake Petra
3 North Trace
4 South Marianaville 
@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
1 Abdiel
Hello, Abdiel!
39 Adelia
Hello, Adelia!
48 Adolfo
Hello, Adolfo! 
@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