TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

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>

# Scrollable

An option to keep the header and footer fixed while the content is scrollable. 

<x-modal scrollable>
    Your content goes here. It can be very long, so it will scroll.
</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.

# Persistent

An option to prevent the closing when click outside. 

<x-modal title="TallStackUi" persistent>
    TallStackUi
</x-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 Customized

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="$tsui.open.modal('modal-id')">
    Open
</x-button>
 
<x-button x-on:click="$tsui.close.modal('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>
Event Detail Fired when
open — The modal opens
close — The modal closes

# Focus Helper

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

<x-button x-on:click="$tsui.open.modal('modal-id')">
    Open
</x-button>
 
<x-modal id="modal-id" x-on:open="$tsui.focus('email')"> 
    <form>
        <x-input label="Email"
                 id="email" <!-- [tl! highlight] -->
                 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="$tsui.open.modal('modal-id')">
    Open
</x-button>
 
<x-modal id="modal-id" x-on:open="$tsui.focus('email', 1000)"> 
    <form>
        <x-input label="Email"
                 id="email" <!-- [tl! highlight] -->
                 hint="Insert your best email address" />
    </form>
</x-modal>

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

<x-button x-on:click="$tsui.open.modal('modal-id')">
    Open
</x-button>
 
<x-modal id="modal-id" x-on:open="$tsui.focus('email')"> 
    <form>
        <x-input label="Email"
                 data-focus="email" <!-- [tl! highlight] -->
                 hint="Insert your best email address" />
    </form>
</x-modal>

# Centered on a Breakpoint
NEW

An option to center the modal from the breakpoint or above. 

<!-- Bottom sheet below 768px, centered dialog from there upwards -->
<x-modal center="md">
    TallStackUI
</x-modal>
Value Classes
false items-end sm:items-start
true items-center
sm items-end sm:items-center
md items-end sm:items-start md:items-center
lg items-end sm:items-start lg:items-center
xl items-end sm:items-start xl:items-center
2xl items-end sm:items-start 2xl:items-center
The modal becomes centered only at the selected breakpoint. Below md, it follows the default layout, including the sm:items-start step. Rendering fails for any value other than the five supported breakpoints, such as center="true"

# Mobile Handle
NEW 

<x-modal handle>
    TallStackUI
</x-modal>
If the drag stays below the threshold, the panel returns to its original position. If it passes the threshold, the panel slides down and closes once it is offscreen. Upward drags have rubber band resistance. When center is true instead of a breakpoint, the modal cannot work as a bottom sheet or use handle.

# Paddingless
NEW 

<x-modal title="TallStackUI" paddingless>
    TallStackUI modal with no padding in the body.
</x-modal>

# Footer Alignment
NEW 

<x-modal>
    TallStackUI
    <x-slot:footer between>
        <x-button color="red">Delete</x-button>
        <x-button>Save</x-button>
    </x-slot:footer>
</x-modal>
 
<!-- Accepted: start, center, end, between, unwrapped -->
Attribute Result
(none) justify-end, the previous default
start justify-start
center justify-center
end justify-end, written out
between justify-between
unwrapped no aligning wrapper at all

Code highlighting provided by Torchlight