maryUI

Gorgeous UI components for Livewire

Be amazed at how much you can achieve with minimal effort.

Bootcamp Installation

Sponsors

Sponsor

Partners

Showcase your brand here for

monthly visitors.

Contact Open analytics

Amazing components

⌘ + G (meta key + G)

Search for "a" to see what kind of content it returns.

Add images

Images | Max 100Kb

Demos

Bird

The Issue Tracker

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

Search happens on server side

No results found.

Ahmed

Alexane

Alvena

Alycia

@php     
        $users = $this->users;
@endphp
<x-choices
    label="Users - server side"
    wire:model="selected_users"
    :options="$users"
    icon="o-bolt"
    hint="Search happens on server side"
    searchable />

Cities - frontend side

Search happens on frontend side

No results found.

New Jonathon

Lake Earnestine

North Linaville

Schoenborough

Xaviermouth

Lucilefort

Wintheisershire

O'Connerborough

Jakubowskiview

Chelseachester

Boyershire

New Vanmouth

Larsonton

West Zackery

Bellestad

Virginieville

Hanehaven

Lake Alysha

West Graysonburgh

Port Dwight

Port Montanaland

Carliton

Port Efrainmouth

East Marilouport

South Nonaburgh

Billton

Wildermanmouth

Yostfurt

Palmafort

Hellerton

Shanelburgh

Lake Devinbury

Wilsonchester

Concepcionport

Jaytown

East Billystad

West Wilmerborough

Sherwoodbury

Roweview

East Maximillia

West Theresa

New America

South Mariane

Trinityton

Littelville

New Carolborough

West Jaceville

North Mariannatown

North Micheleside

Adrianchester

New Glendaton

Lake Rossieburgh

North Brady

Dashawnton

Wolfview

Adalinefurt

New Michale

West Josiane

Melvinaton

Port Madysonburgh

Elliechester

Conroyhaven

New Rachaelview

Lake Alfredomouth

Corkeryland

New Viola

West Chanel

Barrowsfurt

New Jarrellhaven

DuBuqueville

Louview

South Lafayetteborough

Port Delmer

Freedaview

Kozeyfurt

Port Zackeryfurt

Walterbury

New Mireyahaven

Fisherside

Mantestad

South Damianfort

East Blairmouth

South Stantontown

Port Jamison

West Enrico

East Helmer

Cameronburgh

Dawnberg

Port Margret

New Mosemouth

North Michaelaburgh

New Jeanburgh

Nicoletteville

West Laverna

Daynehaven

Goyetteside

Cronaville

Uptonchester

East Anthonymouth

Dickensside

@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

City

Level

Select a level

E-mails

No spam, please.

@php    
    $cities = App\Models\City::take(3)->get();
     $roles = [
        ['id' => 1 , 'name' => 'Administrator', 'hint' => 'Can do anything.' ],
        ['id' => 2 , 'name' => 'Editor', 'hint' => 'Can not delete.' ],
    ];
@endphp
<x-form wire:submit="save">
    <x-input label="Name" wire:model="name" icon="o-user" placeholder="Full name" />
    <x-input label="Amount" wire:model="amount" prefix="USD" money />
    <x-select label="City" wire:model="city_id" icon="o-flag" :options="$cities" />
    <x-range label="Level" wire:model="level" hint="Select a level" class="range-xs" />
    <x-toggle label="E-mails" wire:model="email" hint="No spam, please." right />

    <x-slot:actions>
        <x-button label="Cancel" />
        <x-button label="Save" class="btn-primary" type="submit" spinner="save" />
    </x-slot:actions>
</x-form>

Dialogs

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 class="w-11/12 lg:w-1/3">
    Click outside, on `CANCEL` button or `CLOSE` icon to close.

    <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">
    Click outside, press `ESC` or click `CANCEL` button to close.

    <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	Cortez	New Jonathon
2	Irving	Lake Earnestine
3	Katheryn	North Linaville
4	Earnest	Schoenborough

@php
    use App\Models\User; 
    $users = User::with('city')->take(4)->get();

    $headers = [
        ['key' => 'id', 'label' => '#', 'class' => 'w-1 bg-warning/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
	74	Ahmed	okeefe.rosendo	Freedaview
Hello, Ahmed!
	25	Alexane	oblock	South Nonaburgh
Hello, Alexane!
	43	Alvena	nshields	South Mariane
Hello, Alvena!

@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 settings
    $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
    ];
@endphp

<x-table
    wire:model="expanded"                                        {{-- Controls rows expansion --}}
    :headers="$headers"
    :rows="$users"
    :sort-by="$sortBy"                                           {{-- Make it sortable --}}
    link="/docs/components/table?user_id={id}&city={city.name}"  {{-- Make rows clickable --}}
    expandable                                                   {{-- Make it expand --}}
    with-pagination                                              {{-- Enable pagination --}}
>
    {{--  Expansion slot --}}
    @scope('expansion', $user)
        <div class="border border-base-content/20 border-dashed rounded p-5 ">
            Hello, {{ $user->name }}!
        </div>
    @endscope

    {{-- Actions Slot --}}
    @scope('actions', $user)
        <x-button icon="o-trash" wire:click="delete({{ $user->id }})" spinner class="btn-circle btn-ghost" />
    @endscope

    {{-- Cell scope --}}
    @scope('cell_username', $user)
        <x-badge :value="$user->username" class="badge-primary badge-soft" />
    @endscope
</x-table>

Enjoy a full set of UI components ...

LET`S DO IT