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.
Abby
Akeem
Alexandrea
Alycia
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.
Schowaltermouth
North Pierce
New Tiara
West Ivory
Turnerside
Hortenseview
Port Leifburgh
Lake Destini
Adamsport
West Miles
Douglasstad
Dachborough
New Josephinechester
Beierbury
Weimanntown
South Carletonborough
Heaneyborough
Pfannerstillfurt
West Paxton
East Biankaland
Glenmouth
Dominicshire
Emardville
Geovanybury
Raynorburgh
Littelhaven
Metzshire
West Graciela
South Zulaton
West Jarrell
East Keelyhaven
Trantowside
New Brigitte
Ottilieport
North Davion
West Dorian
Boscotown
Santinamouth
Feestton
East Dinaland
Ebertmouth
Joshuahfurt
Daisyburgh
Steuberside
New Bridgetmouth
Brendanborough
Hesselton
Lake Jacksonview
Boehmtown
North Miller
East Chaim
Boylebury
Rodriguezview
West Teresa
Schillershire
East Verdaborough
Anthonyview
North Jodieville
North Queenmouth
Lakinhaven
Lake Katelin
Romanville
Port Kaela
West Carmen
McClurehaven
South Rylan
South Raheem
Judahbury
New Anna
Lake Yadiraburgh
Kristaburgh
Emeryside
Runolfssonbury
Port Kirstinview
East Dorian
East Daniellamouth
New Loniemouth
Elianehaven
South Gertrudeside
Lake Florinebury
Katharinashire
North Esmeralda
Ivahfort
Prosaccoport
Lake Verdie
Victoriahaven
Johnnyville
New Cristopherburgh
Marvinton
East Charlie
Greenfelderland
North Lola
New Gavinfurt
South Tellyport
Madysonville
North Norrisville
East Sabryna
Tylermouth
West Hollie
Lake Pansy
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 Schowaltermouth
2 North Pierce
3 New Tiara
4 West Ivory 
@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
44 Abby
Hello, Abby!
58 Akeem
Hello, Akeem!
95 Alexandrea
Hello, Alexandrea! 
@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