maryUI
Gorgeous UI components for Livewire
powered by daisyUI and Tailwind
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.
Crop image
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.
Adrain
Alessandra
Aletha
Alexie 
@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.
Bahringerport
Buddychester
Wiegandland
New Timothybury
Wizamouth
Port Guy
Lake Toney
Hilpertmouth
North Cleoshire
Boylefort
New Madisonhaven
Jarodshire
Lebsackport
West Darbyfurt
Port Karson
Lake Ashafurt
North Nestorport
Willhaven
Zackberg
West Nicholebury
East Elmostad
North Kimport
New Chandler
Littlechester
Sonyaville
Port Charlieland
Cristshire
South Dannie
Virginiaview
North Erynfort
Port Eloise
South Rheafurt
North Irma
East Tannertown
Langbury
South Daniella
Williamberg
Port Nestor
New Thaddeusbury
West Carloborough
New Audreychester
North Adrien
West Lessiemouth
Jasminview
Port Wendellbury
South Rosalialand
Port Mckennastad
Sporerfurt
West Elianview
New Jaysonland
Ressieport
New Suzanneville
Port Aliyaview
Rosalynside
South Thomasland
Haagmouth
South Jeramiemouth
Port Kyleigh
Sashaport
Gaylordbury
Port Kenneth
Courtneyshire
Tromphaven
Demarioville
Rasheedmouth
Port Eula
New Torey
North Collin
Boyerstad
East Lunamouth
Melvinmouth
Lake Nellafort
Selenaville
Bergnaumland
West Hellen
West Verona
New Johanna
South Mattiebury
Grimeschester
North Shaniya
Ratkeview
Schillerfort
South Myraside
Lake Kolbyhaven
Karliemouth
Bradtkehaven
Doylebury
Colleenfurt
Talonbury
North Estevan
New Tanya
Lake Odie
North Elaina
West Solon
Sanfordstad
West Morrisside
Hyattland
Violetteborough
Margueritechester
Ernserberg 
@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
City
Level
Select a level
@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>
Hello
Click outside, press `ESC` or click `CANCEL` button to close. 
@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
# City
1 Bahringerport
2 Buddychester
3 Wiegandland
4 New Timothybury 
@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
21 Adrain
Hello, Adrain!
88 Alessandra
Hello, Alessandra!
60 Aletha
Hello, Aletha! 
@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