We are working to upgrade the V2 to TailwindCSS v4

Powerful suite of Blade components for TALL Stack apps.

Modal

Modal component.

# Basic Usage 

<x-modal>
    TallStackUi
</x-modal>

# Title Slot 

<x-modal>
    <x-slot:title>
        TallStackUi
    </x-slot:title>
    TallStackUi
</x-modal>
 
<!-- or -->
 
<x-modal title="TallStackUi">
    TallStackUi
</x-modal>

# Footer Slot 

<x-modal>
    TallStackUi
    <x-slot:footer>
        TallStackUi
    </x-slot:footer>
</x-modal>
 
<!-- or -->
 
<x-modal footer="TallStackUi">
    TallStackUi
</x-modal>

# Background Blur 

<!-- sm, md, lg, xl -->
 
<x-modal title="TallStackUi" blur> <!-- sm blur -->
    TallStackUi
</x-modal>

# Size Variations 

<!-- sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full -->
 
<x-modal title="TallStackUi" size="2xl">
    TallStackUi
</x-modal>

Applicable only on desktop devices.

# Centered 

<x-modal title="TallStackUi" center>
    TallStackUi
</x-modal>

Applicable only on desktop devices.

# Z Index 

<x-modal title="TallStackUi" z-index="z-10">
    TallStackUi
</x-modal>

# Persistent

An option to prevent the closing when click outside.

<x-modal title="TallStackUi" persistent>
    TallStackUi
</x-modal>

Make sure to provide some way to close the modal when using this option, such as a button within the modal.

# Wireable

An option to control the modal via Livewire.

<!-- Livewire boolean property: $modal -->
 
<x-modal title="TallStackUi" wire>
    TallStackUi
</x-modal>
 
<x-button wire:click="$toggle('modal')">
    Open
</x-button>

# Wireable Personalized

Customize which property to use to control the modal via Livewire.

<!-- Livewire boolean property: $tallstackui -->
 
<x-modal title="TallStackUi" wire="tallstackui">
    TallStackUi
</x-modal>
 
<x-button wire:click="$toggle('tallstackui')">
    Open
</x-button>

# AlpineJS Helper

Helpers to open and close the modal using AlpineJS.

<x-modal id="modal-id">
    TallStackUi
</x-modal>
 
<x-button x-on:click="$modalOpen('modal-id')">
    Open
</x-button>
 
<x-button x-on:click="$modalClose('modal-id')">
    Close
</x-button>

# Events

An option to listen event when the modal is opening or closing.

<x-modal title="TallStackUi"
         x-on:open="alert('Opened!')"
         x-on:close="alert('Closed!')">
    TallStackUi
</x-modal>

# Configurations

This component contains settings available in the configuration file. Click here to learn more.

Code highlighting provided by Torchlight