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.

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.

Aiyana

Akeem

Alisha

Allan

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.

Lake Joanshire

East Velmachester

Lake Carrie

Eliezerside

Nelleport

Destinyport

Kamrynburgh

Kesslerstad

Wizaland

West Brisaville

New Kaelahaven

Port Helenstad

Izabellashire

East Royport

Sigmundhaven

West Dandreshire

Anselview

New Elnora

Runtehaven

Reillybury

South Adaline

Bernhardhaven

Larkinville

Rolfsonhaven

East Lionel

New Magdalena

Carolinabury

East Leonelmouth

Haleystad

Tobyfurt

Lake Moises

Wiegandfort

Fannieburgh

Ernestinaberg

Lake Stephanie

Delilahmouth

Ozellashire

North Aimeeport

Alecport

Port Cathrynbury

New Vernonmouth

Elliottville

East Giuseppeside

Feeneychester

Irvinghaven

Dinamouth

Bodetown

New Braxton

Port Therese

New Garnet

Port Rickshire

Douglashaven

Dandreland

Lynchland

Gusthaven

East Esperanza

Kurtchester

West Silas

Annabelberg

Mertztown

Port Celestinemouth

West Ciarahaven

East Nilsfort

Dominiqueborough

East Blair

Dorthyshire

Maurinefurt

Jenkinsside

Lorainefort

New Werner

North Albin

Salmaland

Sandychester

Lake Walkertown

Wiegandmouth

Howellmouth

Titusfort

Grimesside

West Emilyland

West Carlo

West Andreannemouth

Rippinhaven

Berylton

Marcfurt

Bergetown

Nevatown

West Martinbury

Coltenberg

South Grace

Lake Halle

New Schuyler

Meggieborough

Kilbackton

East Brownfort

New Adellashire

Leolaborough

Kaileeshire

West Hyman

Scottieshire

East Nolan

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	Lillie	Lake Joanshire
2	River	East Velmachester
3	Zula	Lake Carrie
4	Rowland	Eliezerside

@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
	48	Aiyana	arjun.farrell	New Braxton
Hello, Aiyana!
	5	Akeem	boyle.burley	Nelleport
Hello, Akeem!
	22	Alisha	natasha.breitenberg	Bernhardhaven
Hello, Alisha!

@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