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.

Aiden

Alan

Alfonso

Amanda

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.

New Jake

McClureside

New Bonnie

Hettingerville

Esmeraldahaven

Dickensberg

South Chestermouth

Citlalliland

North Caylaport

Zellahaven

Lake Cleta

Effertzville

Kyleefort

Loweside

Sawaynland

Handchester

West Natasha

South Mateo

Lake Teagan

South Paris

Shanieview

New Taylorfurt

Considinetown

Lake Benborough

New Kaciebury

Sharonfort

Romanborough

Hollieburgh

Walterside

Liabury

Hansenchester

Misaelbury

North Easton

Fredafort

Hamilltown

Katharinahaven

Kuhicmouth

Yasmeenmouth

East Brooke

Windlerstad

South Francis

Rickeyside

Kochchester

Whiteshire

O'Reillymouth

South Vernie

Langbury

Naomieville

West Beverlyview

South Adelleberg

Lake Westleychester

Constanceview

New Mayra

Ronaldohaven

Balistrerichester

Donnellyfort

Rueckerside

New Candidaside

South Brannon

New Cleora

North Idaville

Lake Imeldatown

Solonchester

Mayertburgh

North Raeganton

Dantebury

West Ara

Port Harrison

New Retahaven

Breitenbergside

Port Amyabury

Eulahchester

South Amaya

Lake Kennithmouth

South Adrianna

West Amani

Warrenside

Leschside

Strosinbury

O'Connerfurt

Estatown

Luisfurt

West Verlie

Wiegandfurt

Annamarieborough

Schowaltermouth

Ricohaven

Orphachester

Ignaciomouth

Lake Pattie

Wolfmouth

Lake Sophiamouth

Joanneland

Nienowstad

Kirstinchester

North Geovany

North Angiemouth

Randitown

West Gussiehaven

Torreyville

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	Gail	New Jake
2	Kadin	McClureside
3	Isadore	New Bonnie
4	Garrison	Hettingerville

@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
	60	Aiden	veum.norma	New Cleora
Hello, Aiden!
	23	Alan	russel.grady	Considinetown
Hello, Alan!
	30	Alfonso	hshanahan	Liabury
Hello, Alfonso!

@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