maryUI

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.

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.

Alia

Alison

Aliyah

Amya

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 />

Cities - frontend side

No results found.

Turnerport

Chaseland

Breanastad

Derekhaven

Hoppeborough

East Janetfort

Lake Eliezer

Duanebury

New Patricia

Port Anamouth

McCulloughfort

Parisianmouth

Hudsonview

New Sibylland

East Abrahamton

Lake Karaside

Madisenborough

New Prudence

Bergstrommouth

Oralhaven

Port Elinore

Kristopherville

North Ahmad

O'Connermouth

Hintzside

Sabinatown

Newtonbury

Hailiehaven

West Gabriella

Jesseshire

Howeborough

Helgafurt

Bradport

Keeblerport

Faheyville

Port Treverborough

Sabrynaview

New Lisaview

North Myaborough

Lake Diegoville

West Gastonshire

Hauckland

Tarynburgh

Juvenalbury

North Autumn

Port Melynaville

Keyonfurt

Cortezton

West Bonnie

Medafort

East Norene

North Freidaland

Kennithfort

East Tina

Westview

Uptonburgh

Port Whitney

New Josie

New Rasheedland

North Genovevaland

South Cristobalfurt

Volkmanview

South Svenborough

Considineport

Vellamouth

Nienowburgh

Gislasonburgh

Ariellebury

Lake Roosevelthaven

Reynoldstad

Rhiannonhaven

Samanthaside

North Bernita

Port Judyville

Kertzmannfort

Charleyberg

North Maxie

North Jarred

South Berta

Vivienport

Sauerland

Hahnborough

North Florian

Federicoside

West Melynaville

New Wilfred

Gusttown

West Raphaellemouth

Boehmville

West Vicente

Breitenbergton

South Trishabury

South Pierre

Hagenesside

Savionland

Romaguerashire

Lake Brandiburgh

West Austen

Stammfurt

Binsbury

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.

Name

Amount

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>

@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.

#	Nice Name	City
1	Eleonore	Turnerport
2	Hulda	Chaseland
3	Katherine	Breanastad
4	Mateo	Derekhaven

@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	Username	City
	41	Alia	nader.abigayle	West Gastonshire
Hello, Alia!
	8	Alison	antonina.tremblay	Duanebury
Hello, Alison!
	71	Aliyah	sconn	Rhiannonhaven
Hello, Aliyah!

@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