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.

Aditya

Adonis

Adrain

Aidan

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.

Raynorside

Shanonfort

Margarettland

Roobchester

Fadelmouth

Ethelynport

South Freida

South Yvonne

East Jerrodport

West Kelsieville

West Tad

East Vincenzabury

Ryanchester

North Simeonside

Hankville

Magdalenachester

West Rolandoview

Port Jerod

Lehnerchester

Port Edwinmouth

North Roselynfort

Lake Adrain

East Lillieberg

South Clementinaville

East Alberto

East Sven

Schillerhaven

Port Jaleelmouth

Beckerberg

West Josie

West Judd

New Kenton

West Jewelstad

Streichstad

North Kadin

Janetville

Port Loribury

Willyside

Jerdeton

Gislasonshire

Jamelport

Willieton

Port Harveyton

Marquardtfurt

Lake Fleta

Sauerberg

East Aubree

Bartellberg

East Ezequielland

Bechtelarburgh

Jamilshire

East Janiceton

Reneeborough

Lake Emmettmouth

South Sibyl

Port Joanie

New Dinoburgh

West Frieda

Steuberside

North Demetrisside

East Trevorstad

Kemmerville

East Ollietown

New Beverlyside

Bartellberg

Geovanyfurt

West Christ

Port Ceciliamouth

East Clotildeview

Thompsonport

Lake Gianni

Gleasonfort

Auerland

Elianview

Port Jaunita

Murazikbury

Virgiebury

Francescomouth

Friedrichborough

Axelview

Osinskiberg

Romaguerashire

Stoltenbergland

Port Claudview

West Marjoryview

New Jeanette

West Audramouth

Port Norval

Pollichland

Brittanyview

Port Elbertview

East Lucienne

Walkerport

South Albinabury

North Karinetown

Floyfort

Lake Orenhaven

North Keenanfort

Hansmouth

East Waltonfort

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	Luisa	Raynorside
2	Tiffany	Shanonfort
3	Hannah	Margarettland
4	Elinor	Roobchester

@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
	36	Aditya	cielo.schuster	Janetville
Hello, Aditya!
	19	Adonis	nitzsche.freddie	Lehnerchester
Hello, Adonis!
	30	Adrain	callie23	West Josie
Hello, Adrain!

@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