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.
Abagail
Abigail
Adonis
Adriana 
@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.
Elisefurt
South Georgiannaton
Beerstad
West Travon
Kohlertown
Hellerfurt
Port Deonfort
North Mikel
East Turnerland
Baumbachtown
Lake Domenico
New Filiberto
South Eulahmouth
Ellenside
Trantowbury
West Davin
Wizaburgh
Daretown
Corineshire
Kentontown
Kristianland
South Vivienville
North Grace
Nikoview
Ziemannville
North Darian
North Agustinachester
Damonside
Townemouth
South Marietta
Doyleborough
East Danefort
Boehmville
Carrollport
New Maudie
West Ewell
South Colbyview
South Franciscamouth
Lake Alfred
South Heathermouth
Demetriusfort
Cartwrightchester
Lomaborough
West Cielo
Traceville
Antwonland
East Harryborough
Beulahton
West Cordellfurt
Considinestad
Kyleville
North Nikofort
East Stanville
Port Lululand
Leoniebury
West Lilyanfort
New Abagail
Lake Wilhelmineton
Kamilleville
Mariannetown
Lake Marcus
Lake Luis
New Rheafurt
Rohanton
Port Kurtisview
Port Roselynmouth
Beerville
Jacobsonfurt
Cristport
Lake Alexanefort
West Henry
New Frederiquehaven
Beverlytown
Lake Myriam
Veumberg
East Jovany
South Estherville
North Caleighborough
North Merlin
Port Albin
Stromanside
Port Lilianeville
Wisokyborough
South Houstonview
West Maximusmouth
Nicolasshire
Turcotteborough
Arnulfoton
New Jaynestad
Lake Simeon
North Richie
Verlaside
Corneliusside
Rogahnside
East Lincolnhaven
Lake Noelia
Hegmannhaven
West Kurt
North Favian
Lake Nakiamouth 
@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 Elisefurt
2 South Georgiannaton
3 Beerstad
4 West Travon 
@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
61 Abagail
Hello, Abagail!
59 Abigail
Hello, Abigail!
42 Adonis
Hello, Adonis! 
@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