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.
Abbey
Alexandra
Anahi
Anita 
@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.
Antoninahaven
Sanfordburgh
Ondrickafort
Braedenland
East Francesca
South Coy
Mertzhaven
East Vanceside
Port Westonside
Lennaport
Schillerside
North Mabletown
Faheyville
Landenville
Port Arlofurt
East Nannie
Millerton
New Keyonton
Fritschborough
Millerside
New Katelinburgh
Lake Jack
Clayhaven
Cristton
Vandervortfurt
Linashire
North Clarkburgh
Marianneport
Corkeryview
Jenniebury
Armandostad
Port Miaborough
Karolannville
West Favian
Port Easter
Baileyburgh
New Grady
Port Tiannaborough
Enriquechester
North Phoebe
Giovannafort
McKenzieshire
West Alfredoborough
South Norvalstad
Tromptown
Charleyland
East Edwardburgh
Predovicmouth
Fadelfurt
Bartellport
Port Andretown
West Wilsonshire
South Domenic
Carterhaven
Alainachester
Raultown
Gislasonhaven
Cordiatown
Kundefurt
South Bret
Daveport
East Juwanborough
South Kirsten
Lake Taya
South Shaunberg
Lake Heloise
Abeburgh
Zeldaton
Murazikburgh
Estellmouth
Bogisichstad
Cummingsside
North Ashlystad
South Retashire
Port Sigurd
South Shaunmouth
Malloryport
Santinohaven
New Gladyce
Eastonport
Kennithfurt
Winstonfurt
North Jovani
East Brenden
Floyshire
Lake Brendaborough
Annettabury
North Christport
New Judeport
East Cathyton
Port Nikita
East Lucinda
Hudsonshire
North Kolemouth
Lake Margaretmouth
West Jaiden
Jacobsonchester
Leslyfurt
Cronafort
South Deshawnview 
@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 Antoninahaven
2 Sanfordburgh
3 Ondrickafort
4 Braedenland 
@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
46 Abbey
Hello, Abbey!
17 Alexandra
Hello, Alexandra!
64 Anahi
Hello, Anahi! 
@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