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.

Abagail

Abdul

Alice

Allie

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.

Leschfurt

Trompburgh

Port Ethel

Creminville

Shanaton

Port Cordiamouth

Hardyburgh

North Deloresville

West Winonastad

Westleyborough

Lake Muhammadburgh

Leannonburgh

Shanieport

East Zula

New Oswaldoberg

New Kipview

West Kacieview

North Nellie

East Johanna

South Nils

New Isabelview

Kirstenville

Magdalenfurt

East Mabelleburgh

Pfefferville

North Tobin

Hagenesberg

West Sonya

Gloverview

New Okey

Jonesstad

New Russ

Antwanville

Port Ismaelfort

Terryton

Stoltenbergshire

Rhiannaberg

West Albertoburgh

Harveyberg

Kariville

North Josieberg

West Thurmanchester

Jakubowskiview

New Kelly

South Reanna

Hyattview

Port Ellenville

Lake Bryon

New Aliceshire

Kulasland

East Martin

Terrymouth

New Sarina

South Dixiestad

East Dimitrimouth

Travisberg

Port Kyleigh

West Macieport

Shieldstown

West Mackenzieberg

North Fabian

Dickensstad

South Rex

New Janisside

Koelpintown

Kshlerinfort

Port Devanberg

New Madelyn

Dietrichchester

West Trinity

New Antoneview

Tonyshire

West Zachariah

Bellaburgh

Douglasville

Port Ally

New Carmelland

Phoebeburgh

Jacobiborough

Windlershire

East Adella

Jaidaport

Kesslerhaven

Port Maci

Buckridgemouth

Starkside

Altenwerthshire

Elishabury

South Foster

New Jesse

East Cheyenne

South Broderickton

Port Kittyview

Lake Robbie

Paucekton

West Maurineland

Lake Waltonview

Willowfort

West Adrienberg

Susiefurt

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	Allie	Leschfurt
2	Jarrod	Trompburgh
3	Mariane	Port Ethel
4	Marcelino	Creminville

@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
	28	Abagail	arne.strosin	West Sonya
Hello, Abagail!
	20	Abdul	nfeil	South Nils
Hello, Abdul!
	46	Alice	reynolds.dena	Hyattview
Hello, Alice!

@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