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.
Alberto
Alford
Alice
Anastasia 
@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.
Blockport
Joyceshire
West Torrey
Boscofurt
Port Santiago
South Noeliaside
West Haroldtown
New Riverburgh
Ortizmouth
East Lera
Strosinberg
Jackyborough
Port Dasiaborough
O'Haraborough
Lake Pauline
Savanahside
South Edmund
Westside
Eulaliaborough
West Andreaneburgh
Pfannerstillborough
Wilfridburgh
Smithhaven
South Jayme
South Anika
Theodoreview
Mercedesside
Port Aubree
East Antone
South Soniatown
Strackeberg
Landenberg
Karolannport
New Frederic
New Lorenzabury
Ethabury
Kaelynmouth
Lake Willow
East Christop
Parisiantown
Port Forestville
O'Keefefort
North Terrence
Howellland
Marvinmouth
Brionnamouth
Larsonhaven
Feeststad
Floridachester
Gracieland
Albinborough
New Johantown
Paxtonfurt
South Nicolette
Steviemouth
New Chelseymouth
Pourosborough
Lake Tara
Carolynefurt
West Karianne
Aimeetown
Port Minnieville
Goldnerburgh
Veumborough
Sarinaville
New Eulahburgh
Jonesview
McDermotthaven
East Brandt
South Adalberto
Lyricborough
West Jane
Naderview
North Alysson
North Brandt
Jakubowskiside
Ryanmouth
Clementburgh
Merlport
Lindseystad
Port Barton
South Caleigh
Weimannstad
North Ariane
Brainland
Lake Marielatown
Turnertown
Port Khalilshire
East Jimmyland
New Missouri
Port Westonchester
West Salmafurt
Sporerchester
East Olaview
Altenwerthville
Remingtonside
Kutchfort
Carloside
East Ellen
Erickaberg 
@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 Blockport
2 Joyceshire
3 West Torrey
4 Boscofurt 
@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
97 Alberto
Hello, Alberto!
5 Alford
Hello, Alford!
2 Alice
Hello, Alice! 
@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