Laravel Modal Component

Free · MIT

A dialog overlay component with backdrop, transitions, and support for named modals triggered via Alpine.js or Livewire events.

A Modal built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::modal>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::modal name="example">
    <p>This is the modal content.</p>
</x-aura::modal>

<!-- Open the modal from anywhere -->
<x-aura::button x-on:click="$dispatch('open-modal', 'example')">
    Open Modal
</x-aura::button>

See the full API, props and live examples in the Modal documentation.

Overview

The <x-aura::modal> component renders a dialog window that appears on top of the page content with a backdrop overlay. It supports named modals that can be opened and closed via Alpine.js $dispatch events or Livewire, configurable max width, glass morphism styling, and smooth enter/leave transitions. The modal is teleported to the document body to avoid z-index stacking issues.

Props

Prop	Type	Default	Description
`name`	`string\|null`	`null`	Unique identifier for the modal. Used with dispatch events to open/close.
`maxWidth`	`string`	`'lg'`	Maximum width of the modal. Options: `sm`, `md`, `lg`, `xl`, `2xl`, `full`.
`glass`	`bool`	`false`	Enable glass morphism styling on the modal panel.
`closeable`	`bool`	`true`	Whether the modal can be closed by clicking the backdrop or the close button.
`slideOver`	`bool`	`false`	Reserved for slide-over panel behavior.
`position`	`string`	`'right'`	Position for slide-over mode.

Slots

Slot	Description
Default (`$slot`)	The main body content of the modal.
`trigger`	Optional trigger element. Clicking it opens the modal without dispatch events.
`title`	When provided, renders a header bar with the title text and an optional close button.
`footer`	When provided, renders a footer section below the body, typically used for action buttons.