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.
Abdiel
Abigayle
Adeline
Adonis 
@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.
Guidostad
West Miguelton
Auerfort
Shieldsland
Pourosland
New Ned
Strackemouth
Betsyville
New Crystal
South Monte
North Maverickburgh
New Elton
East Sydni
South Brandichester
East Karahaven
Perryfurt
Destanyport
Lake Svenland
East Alisonmouth
West Paulinestad
Corkerymouth
Lake Laynemouth
Port Zion
Jordonshire
Walkerfort
North Kaitlyn
New Devon
New Vivienne
Buckridgefort
Leuschkeburgh
Ziememouth
South Antoniettaport
North Destineyberg
East Ubaldoport
Roselynshire
Crawfordside
North Tabitha
Fadelchester
West Carmela
Thielmouth
Pourosborough
Turnerberg
East Khalidport
West Shyanne
East Emilio
West Jaiden
Lake Margarita
Port Aliceville
Mitchellmouth
New Kristyside
West Stefan
New Yolandaside
Jonesview
Lake Stephenhaven
Ricetown
Pedrofurt
Volkmanside
Gaetanoland
Zeldamouth
Brennanton
Bartolettitown
Veronafurt
West Melisa
Howellmouth
Schmidtfurt
South Kathryne
South Josh
Bradtkeborough
Anibalburgh
Colehaven
West Wardview
Jaredfurt
West Phyllis
South Dandreburgh
Claudstad
Port George
Nienowport
Legrosborough
New Sebastian
East Brandon
North Ozella
North Napoleon
South Newtonview
West Melvina
New Alyson
Flatleyport
O'Haraville
New Torreymouth
North Hendersonport
Maeview
Stoltenbergton
Port Noah
Nolanton
Port Brian
Millsport
Mannville
Lake Marcellus
Port Tatefurt
Reillychester
Wiegandville 
@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 Guidostad
2 West Miguelton
3 Auerfort
4 Shieldsland 
@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
64 Abdiel
Hello, Abdiel!
36 Abigayle
Hello, Abigayle!
39 Adeline
Hello, Adeline! 
@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