maryUI
maryUI v2 beta available! Try it →

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
Abel
Addison
Aiden
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 Adonis
Cruickshankshire
Port Michaleton
Eveburgh
New Jackson
Frederickfurt
North Laron
New Violetburgh
Sammymouth
Port Jessefort
Lake Obiefort
Deckowside
Theresebury
Metzfurt
New Tristian
Johannfort
Berniermouth
West Effieview
East Hildegardhaven
Thelmastad
South Fannie
North Saulstad
North Pearliemouth
East Tryciaberg
Yundtmouth
Juliofort
Jeanettetown
New Hillard
South Janyhaven
Huelsland
Langworthville
Vincentberg
Fayfurt
West Burnice
Julienhaven
Myraton
Koelpinfort
Larissaview
West Peteshire
Port Tonyburgh
North Agnesport
Jadenberg
West Henderson
South Nakia
South Laceyfurt
Criststad
Hodkiewiczburgh
Zacheryhaven
North Gonzalotown
New Sherwood
Watsonmouth
Monahanchester
Lake Abbeychester
Gersonview
Unaberg
East Toyborough
Boyershire
East Unique
Weimannport
Lake Gwendolynborough
Gutmannton
New Alessandro
New Emelia
Lake Frida
Robeltown
Mohamedfurt
Lake Roderickborough
Manuelatown
Port Marjolaine
Jadenburgh
Dallinton
New Alivia
Wisokyport
Port Brandiview
Port Cicero
Port Yasmeen
South Chaddtown
Lake Keyon
O'Konberg
Madelynburgh
North Grant
South Janyfurt
McKenzieburgh
Lebsackville
Lake Blaze
North Arely
Carmeloshire
West Arnoldfurt
Port Marionmouth
New Ritaton
Marioton
South Calistaborough
North Elveraville
Watsicastad
Blandaburgh
Wiltonbury
Juwanberg
Port Presley
Elisafurt
Medhurstborough
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 Adonis
2 Cruickshankshire
3 Port Michaleton
4 Eveburgh 
@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
84 Abagail
Hello, Abagail!
50 Abel
Hello, Abel!
74 Addison
Hello, Addison! 
@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