Weave Code
Modal Laravel Package
steelants/modal
A lightweight Laravel package from SteelAnts for adding modal dialogs to your application. It provides a simple way to define and render modals in Blade views, keeping setup minimal and integration straightforward for common UI needs.
At a glance
Frequently asked questions about Modal
- How do I open a Livewire component inside a Bootstrap modal in Laravel?
- Install the package with composer require steelants/modal, add its modal container Blade partial to your main layout, make sure Bootstrap 5 CSS and the Bootstrap JS bundle are loaded, then dispatch the package's open event from the Livewire component or button that should trigger the modal. The package listens for that event on the client side and swaps the target Livewire component into the modal shell. It is intentionally thin, so there is no config file, migration or database footprint to manage.
- Does steelants/modal work with Livewire 3?
- This is the first thing to verify before adopting it. The repository does not make Livewire 3 support obvious, and depending on the release it may rely on Livewire 2's emit and $listeners API rather than Livewire 3's dispatch and #[On] attributes. Read the composer.json constraint and the event listener in the source rather than trusting the README. If it is pinned to Livewire 2, treat it as unusable on a current Laravel 11 project without a fork.
- Do I need Bootstrap 5 to use steelants/modal, or does it work with Tailwind?
- It is built specifically for Bootstrap 5: the modal markup and classes are Bootstrap, and the show and hide behaviour depends on Bootstrap's JavaScript. It is not a Tailwind or TALL-stack package, so a Tailwind-only application would need to fork the views or reimplement the styling. If your app already ships Bootstrap 5, that is exactly the gap the more popular Tailwind-first modal packages leave open.
- How do I install and set up steelants/modal in a Laravel app?
- Run composer require steelants/modal, then publish any views or assets the package offers if you want to customise the modal markup. Include the package's modal container partial once in your application layout so the modal shell exists on every page, and confirm that Bootstrap 5 CSS plus the Bootstrap JS bundle are actually loaded. Finally, dispatch the package's open event from the component or button that should show the modal.
- How do I pass parameters to a Livewire component mounted inside the modal?
- Parameters are passed when you dispatch the open event from the triggering component, so the nested component receives them through its normal mount method. The exact shape, an associative array versus serialized props, is not well documented, so read the package source or test it directly. For anything complex, pass an identifier and load the model inside the nested component's mount instead of trying to serialize large objects into the event payload.
- Is steelants/modal safe to use in production?
- Treat it as a small, unproven package: it has very few stars, no dependents, a single maintainer and no visible test suite, so there is no downstream pressure to fix breakage. The code surface is small enough to read and vendor in an afternoon, which is the safer route for production. If you adopt it, fork it or copy it into your application so an abandoned upstream cannot block a Livewire or Laravel upgrade.
- How do I close the modal and are nested modals supported in steelants/modal?
- Closing is normally done by dispatching the package's close event or calling a Livewire action the modal exposes, so check the shipped Blade views for the exact event names. Nested modals and whether a child component keeps its state after closing and reopening are not documented, and those are the usual failure points in this class of package. Cover multi-level modals with your own tests before shipping them.
- What are the alternatives to steelants/modal for modals in Laravel Livewire?
- The best-known alternative is wire-elements/modal, which is Tailwind-oriented and more widely used. If you are on Bootstrap, you can also wire Bootstrap's own modal JavaScript to Livewire events yourself, or use Filament's modal actions if you are already inside Filament. For a single modal, a small Alpine plus Livewire implementation is often less risk than adding another dependency.
- Does steelants/modal require the Bootstrap JavaScript bundle?
- Yes. Showing and hiding the modal, the backdrop and scroll locking are all Bootstrap JavaScript behaviours, so the bundle must be present in your layout. If your build trims Bootstrap's JS or your Content Security Policy blocks it, the modal will typically fail silently rather than throw an obvious error. Confirm the bundle is loaded before scoping any integration work.
- How do I test a Livewire component that opens a modal with steelants/modal?
- At the component level, use Livewire::test and assert that the expected event is dispatched when the trigger action runs, for example assertDispatched with the package's open event name. For the modal itself, use a browser test with Laravel Dusk or Pest's browser testing to confirm that it opens, renders the nested component and closes. Because the package ships no test suite of its own, keep those tests in your application so upgrades become a quick regression run instead of a manual check.
Weaver
How can I help you explore Laravel packages today?