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.
Aglae
Albert
Alessandra
Alexandra 
@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.
South Berthafurt
Carleytown
Port Lysanneton
Lake Darrelside
Kileytown
Kohlerstad
Sammiefort
Cormierbury
North Faefort
Sanfordshire
New Fayfurt
South Todview
Emeryfurt
East Deliaview
Lake Lucile
Lake Gerhardmouth
Ziemeberg
North Aldenshire
Schinnerside
West Cloydchester
Rowenaberg
Westonville
Austenberg
Susanaview
Littelmouth
Port Jacehaven
Whitestad
Kirlinmouth
Wilbertberg
Jacquesborough
Clemmieborough
South Constantinbury
West Estashire
South Creolahaven
North Domenickborough
Port Jonasshire
New Peytonfort
New Isaacland
Leuschketon
South Teagan
Carolanneport
New Isaiah
Oscarfurt
Streichmouth
West Herminioland
Bernadinechester
West Carlosmouth
North Aidaborough
Swaniawskiview
Brownmouth
South Camryn
East Sheridanfort
Port Arielleshire
Elmomouth
Ivahberg
West Skylarhaven
Bartonside
Garthland
Altenwerthside
East Alverta
Adelafurt
Sengerfort
New Trevaberg
Yundthaven
Volkmanfurt
Cristborough
South Miguelville
West Deon
Port Sarinachester
Pamelaburgh
Ronaldohaven
North Palmafort
West Rocky
New Pierre
West Cassandrafort
East Kayley
Lake Rahul
Gerrytown
Thompsonport
Hannahmouth
Romaineton
Danielchester
Carmeltown
Murrayland
New Kiera
Port Priscillahaven
North Frankie
Willton
Donnellyberg
Lueburgh
Laruebury
Bauchburgh
Michalebury
East Turner
New Cameron
Kuhlmanberg
East Maurice
Shanellebury
Doylefurt
East Dawn 
@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 South Berthafurt
2 Carleytown
3 Port Lysanneton
4 Lake Darrelside 
@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
35 Aglae
Hello, Aglae!
41 Albert
Hello, Albert!
48 Alessandra
Hello, Alessandra! 
@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