There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

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>

# Focus Helper

Ah helper to interact with modal events to easily focus an input when modal open.

<x-button x-on:click="$modalOpen('modal-id')">
    Open
</x-button>
 
<x-modal id="modal-id" x-on:open="$focusOn('email')"> 
    <form>
        <x-input label="Email"
                 id="email" 
                 hint="Insert your best email address" />
    </form>
</x-modal>

You can control the time (in milliseconds) to wait before focusing the input, default is 250 : 

<x-button x-on:click="$modalOpen('modal-id')">
    Open
</x-button>
 
<x-modal id="modal-id" x-on:open="$focusOn('email', 1000)"> 
    <form>
        <x-input label="Email"
                 id="email" 
                 hint="Insert your best email address" />
    </form>
</x-modal>

Additionally, you can use a custom data-focus HTML attribute to determine the input to be focused: 

<x-button x-on:click="$modalOpen('modal-id')">
    Open
</x-button>
 
<x-modal id="modal-id" x-on:open="$focusOn('email')"> 
    <form>
        <x-input label="Email"
                 data-focus="email" 
                 hint="Insert your best email address" />
    </form>
</x-modal>

# Configurations

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

Code highlighting provided by Torchlight