mary-ui.com Open in urlscan Pro
216.24.57.1  Public Scan

Form analysis
3 forms found in the DOM

<form wire:submit="save" class="grid grid-flow-row auto-rows-min gap-3">
  <div>
    <!-- STANDARD LABEL -->
    <label for="mary8dd47b04ebc22475b33aa03fb0251d4ename" class="pt-0 label label-text font-semibold">
      <span> Name </span>
    </label>
    <!-- PREFIX/SUFFIX/PREPEND/APPEND CONTAINER -->
    <!-- PREFIX / PREPEND -->
    <div class="flex-1 relative">
      <!-- MONEY SETUP -->
      <!-- INPUT -->
      <input id="mary8dd47b04ebc22475b33aa03fb0251d4ename" placeholder="Hello " class="input input-primary w-full peer pl-10" type="text" wire:model="name">
      <!-- ICON  -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <svg class="inline w-5 h-5 absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
        data-slot="icon">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"></path>
      </svg>
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!-- CLEAR ICON  -->
      <!-- RIGHT ICON  -->
      <!-- INLINE LABEL -->
      <!-- HIDDEN MONEY INPUT + END MONEY SETUP -->
    </div>
    <!-- SUFFIX/APPEND -->
    <!-- END: PREFIX/SUFFIX/APPEND/PREPEND CONTAINER  -->
    <!-- ERROR -->
    <!-- HINT -->
  </div>
  <div>
    <!-- STANDARD LABEL -->
    <label for="mary95d8560240a4e16df38b6ad88933f421amount" class="pt-0 label label-text font-semibold">
      <span> Amount </span>
    </label>
    <!-- PREFIX/SUFFIX/PREPEND/APPEND CONTAINER -->
    <div class="flex">
      <!-- PREFIX / PREPEND -->
      <div class="rounded-l-lg flex items-center bg-base-200 border border-primary border-r-0 px-4"> USD </div>
      <div class="flex-1 relative">
        <!-- MONEY SETUP -->
        <div wire:key="money-1871182532" x-data="{ amount: $wire.get('amount') }" x-init="$nextTick(() => new Currency($refs.myInput, {&quot;init&quot;:true,&quot;maskOpts&quot;:{&quot;locales&quot;:&quot;en-US&quot;}}))">
          <!-- INPUT -->
          <input id="mary95d8560240a4e16df38b6ad88933f421amount" placeholder=" " x-ref="myInput" :value="amount" @input="$nextTick(() => $wire.set('amount', Currency.getUnmasked(), false))" inputmode="numeric"
            class="input input-primary w-full peer rounded-l-none" type="text">
          <!-- ICON  -->
          <!-- CLEAR ICON  -->
          <!-- RIGHT ICON  -->
          <!-- INLINE LABEL -->
          <!-- HIDDEN MONEY INPUT + END MONEY SETUP -->
          <input type="hidden" wire:model="amount" value="">
        </div>
      </div>
      <!-- SUFFIX/APPEND -->
      <!-- END: PREFIX/SUFFIX/APPEND/PREPEND CONTAINER  -->
    </div>
    <!-- ERROR -->
    <!-- HINT -->
  </div>
  <!--[if BLOCK]><![endif]-->
  <hr class="my-3">
  <div class="flex justify-end gap-3">
    <!--[if BLOCK]><![endif]--> <button wire:key="maryac59bfe95b833dcebd36bc53c1138575" type="button" class="btn normal-case">
      <!-- SPINNER LEFT -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!-- ICON -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!-- LABEL / SLOT -->
      <!--[if BLOCK]><![endif]--> <span class=""> Cancel </span>
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!--[if ENDBLOCK]><![endif]-->
      <!-- ICON RIGHT -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!-- SPINNER RIGHT -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!--[if BLOCK]><![endif]--> </button>
    <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <button wire:key="mary720db7b10e3f5f71848baa13bc0c104c" type="submit" class="btn normal-case btn-primary" wire:target="save" wire:loading.attr="disabled">
      <!-- SPINNER LEFT -->
      <!--[if BLOCK]><![endif]--> <span wire:loading="" wire:target="save" class="loading loading-spinner w-5 h-5"></span>
      <!--[if ENDBLOCK]><![endif]-->
      <!-- ICON -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!-- LABEL / SLOT -->
      <!--[if BLOCK]><![endif]--> <span class=""> Save </span>
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!--[if ENDBLOCK]><![endif]-->
      <!-- ICON RIGHT -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!-- SPINNER RIGHT -->
      <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
      <!--[if BLOCK]><![endif]--> </button>
    <!--[if ENDBLOCK]><![endif]-->
  </div>
  <!--[if ENDBLOCK]><![endif]-->
</form>

DIALOG

<form class="modal-backdrop" method="dialog">
  <button @click="$wire.myModal = false" type="button">close</button>
</form>

DIALOG

<form class="modal-backdrop" method="dialog">
  <button type="submit">close</button>
</form>

Text Content

maryUI
Sponsor Bootcamp Docs News Source

SearchK
Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind
Bootcamp Installation
Sponsors
Private sponsors are not listed here.
Sponsor
Amazing components.
⌘ + G (meta key + G)

Search for "a" to see what kind of content it returns.

Crop image


--------------------------------------------------------------------------------



--------------------------------------------------------------------------------

Cancel Crop

Add images
Images | Max 100Kb

Delightful demos.
Ping
The real time chat demo.

Flow
The dashboard demo.

Orange
The refreshing storefront demo.

Paper
The elegant and minimalist demo.

Lists
Art
virgil.nitzsche


--------------------------------------------------------------------------------

Onie
swift.lacy


--------------------------------------------------------------------------------

Callie
gbayer


--------------------------------------------------------------------------------

@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

 
No results found.
Abbie


--------------------------------------------------------------------------------

Adriana


--------------------------------------------------------------------------------

Adrianna


--------------------------------------------------------------------------------

Alexandre


--------------------------------------------------------------------------------

Search happens on server side
@php                              
    $users = $this->users;       
@endphp                         
<x-choices
    label="Users - server side"
    wire:model="selected_users"
    :options="$users"
    icon="s-bolt"
    hint="Search happens on server side"
    searchable />

--------------------------------------------------------------------------------

Cities - frontend side

 
No results found.
South Danny


--------------------------------------------------------------------------------

South Woodrowville


--------------------------------------------------------------------------------

North Wilburn


--------------------------------------------------------------------------------

Lake Van


--------------------------------------------------------------------------------

East Maritza


--------------------------------------------------------------------------------

Port Alejandraville


--------------------------------------------------------------------------------

New Chesley


--------------------------------------------------------------------------------

Lake Shania


--------------------------------------------------------------------------------

Carleystad


--------------------------------------------------------------------------------

Lake Berylshire


--------------------------------------------------------------------------------

East Elvera


--------------------------------------------------------------------------------

North Michealborough


--------------------------------------------------------------------------------

South Jameyburgh


--------------------------------------------------------------------------------

Port Clareport


--------------------------------------------------------------------------------

East Mosesville


--------------------------------------------------------------------------------

East Sibylborough


--------------------------------------------------------------------------------

West Mariah


--------------------------------------------------------------------------------

Kubborough


--------------------------------------------------------------------------------

Gulgowskiview


--------------------------------------------------------------------------------

Okunevafurt


--------------------------------------------------------------------------------

South Lorineburgh


--------------------------------------------------------------------------------

South Zitamouth


--------------------------------------------------------------------------------

West Kennedi


--------------------------------------------------------------------------------

Casperside


--------------------------------------------------------------------------------

Schmelerstad


--------------------------------------------------------------------------------

Gorczanyside


--------------------------------------------------------------------------------

Lake Chase


--------------------------------------------------------------------------------

West Rodstad


--------------------------------------------------------------------------------

Lake Lindsay


--------------------------------------------------------------------------------

New Judetown


--------------------------------------------------------------------------------

Port Edna


--------------------------------------------------------------------------------

West Kyle


--------------------------------------------------------------------------------

North Tracymouth


--------------------------------------------------------------------------------

New Leonorastad


--------------------------------------------------------------------------------

New Columbusfurt


--------------------------------------------------------------------------------

Eddbury


--------------------------------------------------------------------------------

South Antoninachester


--------------------------------------------------------------------------------

Gabeshire


--------------------------------------------------------------------------------

Hillsville


--------------------------------------------------------------------------------

Catalinastad


--------------------------------------------------------------------------------

Jadeberg


--------------------------------------------------------------------------------

Lelialand


--------------------------------------------------------------------------------

Lake Roselyn


--------------------------------------------------------------------------------

Marlenfurt


--------------------------------------------------------------------------------

West Aronfurt


--------------------------------------------------------------------------------

South Owen


--------------------------------------------------------------------------------

Streichtown


--------------------------------------------------------------------------------

West Elnora


--------------------------------------------------------------------------------

New Adeline


--------------------------------------------------------------------------------

Spinkaberg


--------------------------------------------------------------------------------

Michelleton


--------------------------------------------------------------------------------

West Katrinaport


--------------------------------------------------------------------------------

Faeborough


--------------------------------------------------------------------------------

McLaughlinville


--------------------------------------------------------------------------------

Port Caesarland


--------------------------------------------------------------------------------

South Jedburgh


--------------------------------------------------------------------------------

Stephonchester


--------------------------------------------------------------------------------

Osinskiport


--------------------------------------------------------------------------------

Normatown


--------------------------------------------------------------------------------

South Jerroldhaven


--------------------------------------------------------------------------------

South Justina


--------------------------------------------------------------------------------

Millsfort


--------------------------------------------------------------------------------

Rickieberg


--------------------------------------------------------------------------------

North Kris


--------------------------------------------------------------------------------

Mannton


--------------------------------------------------------------------------------

Lake Felicitystad


--------------------------------------------------------------------------------

South Chloefurt


--------------------------------------------------------------------------------

D'Amoreport


--------------------------------------------------------------------------------

Russelstad


--------------------------------------------------------------------------------

Botsfordland


--------------------------------------------------------------------------------

Sporerborough


--------------------------------------------------------------------------------

Huelsside


--------------------------------------------------------------------------------

Anamouth


--------------------------------------------------------------------------------

Torpshire


--------------------------------------------------------------------------------

Jastfort


--------------------------------------------------------------------------------

Abdielburgh


--------------------------------------------------------------------------------

Bergemouth


--------------------------------------------------------------------------------

South Sidney


--------------------------------------------------------------------------------

New Wilber


--------------------------------------------------------------------------------

Rosemarieville


--------------------------------------------------------------------------------

Fayville


--------------------------------------------------------------------------------

New Marcellusshire


--------------------------------------------------------------------------------

O'Harachester


--------------------------------------------------------------------------------

Oberbrunnermouth


--------------------------------------------------------------------------------

Gutmannmouth


--------------------------------------------------------------------------------

Sipeston


--------------------------------------------------------------------------------

Emiliehaven


--------------------------------------------------------------------------------

Port Yolanda


--------------------------------------------------------------------------------

Kozeymouth


--------------------------------------------------------------------------------

Franeckiport


--------------------------------------------------------------------------------

Vonmouth


--------------------------------------------------------------------------------

Jewellton


--------------------------------------------------------------------------------

Macietown


--------------------------------------------------------------------------------

Perryfort


--------------------------------------------------------------------------------

Kyraport


--------------------------------------------------------------------------------

Melliebury


--------------------------------------------------------------------------------

North Vilma


--------------------------------------------------------------------------------

Gaylordshire


--------------------------------------------------------------------------------

Port Kaceychester


--------------------------------------------------------------------------------

Johnstonland


--------------------------------------------------------------------------------

Search happens on frontend side
@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
USD


--------------------------------------------------------------------------------

Cancel Save
<x-form wire:submit="save">
    <x-input label="Name" wire:model="name" icon="o-user" placeholder="Hello" />
    <x-input label="Amount" wire:model="amount" prefix="USD" money />
 
    <x-slot:actions>
        <x-button label="Cancel" />
        <x-button label="Save" class="btn-primary" type="submit" spinner="save" />
    </x-slot:actions>
</x-form>

Drawer & Modal
Open Drawer
Hello!


--------------------------------------------------------------------------------

Click outside, on `CANCEL` button or `CLOSE` icon to close.

--------------------------------------------------------------------------------

Cancel Confirm
@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 separator class="w-11/12 lg:w-1/3">
    <div>Click outside, on `CANCEL` button or `CLOSE` icon to close.</div>
 
    <x-slot:actions>
        <x-button label="Cancel" wire:click="$toggle('showDrawer')" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</x-drawer>

--------------------------------------------------------------------------------

Open Modal
Hello
Livewire example


--------------------------------------------------------------------------------



Click outside, press `ESC` or click `CANCEL` button to close.



--------------------------------------------------------------------------------

Cancel Confirm
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" subtitle="Livewire example" separator>
    <div>Click outside, press `ESC` or click `CANCEL` button to close.</div>
 
    <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.

# Nice Name City 1 Art South Danny 2 Onie South Woodrowville 3 Callie North
Wilburn 4 Donald Lake Van

@php
    use App\Models\User; 
    $users = User::with('city')->take(4)->get();
 
    $headers = [
        ['key' => 'id', 'label' => '#', 'class' => 'w-1 bg-yellow-500/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 Username City 59 Abbie
arvilla.moen
Normatown
Hello, Abbie!
61 Adriana
oboyer
South Justina
Hello, Adriana!
87 Adrianna
xfritsch
Emiliehaven
Hello, Adrianna!

« Previous Next »

Showing 1 to 3 of 100 results

1 2 3 4 5 6 ... 33 34
@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 = [
        ['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
    ];
 
    $cell_decoration = [
        'name' => [
            'bg-yellow-500/20 italic' => fn(User $user) => Str::of($user->name)->startsWith('A')
        ]
    ];
@endphp
 
<x-table
    wire:model="expanded"
    :headers="$headers"
    :rows="$users"
    :cell-decoration="$cell_decoration"
    :sort-by="$sortBy"
    link="/docs/components/table?user_id={id}&city={city.name}"  {{-- Make rows clickables --}}
    expandable
    with-pagination
>
    {{--  Expansion slot --}}
    @scope('expansion', $user)
        <div class="border border-dashed rounded-lg p-5 ">
            Hello, {{ $user->name }}!
        </div>
    @endscope
 
    {{-- Actions Slot --}}
    @scope('actions', $user)
        <x-button icon="o-trash" wire:click="delete({{ $user->id }})" spinner />
    @endscope
 
    {{-- Cell scope --}}
    @scope('cell_username', $user)
        <x-badge :value="$user->username" class="badge-primary" />
    @endscope
</x-table>

And more ... LET`S DO IT

Nothing found.




close

--------------------------------------------------------------------------------

maryUI
Sponsor