V2 is in public beta! 🎉 Report any issues on the repository.

Powerful suite of Blade components for TALL Stack apps.

AlpineJS

All JavaScript in TallStackUI is actually code blocks based on AlpineJS, a lightweight framework created by the same creator of Livewire. For this reason, it is extremely important that AlpineJS is loaded on every page - for example, loaded by the layout of your application. If you do not load it, several TallStackUI components will not work, because they depend on AlpineJS-based code.

At this point you might be thinking: "Livewire 3 delivers AlpineJS automatically! Why should I care about that?". Well, some inattentive people don't realize that Livewire 3 only delivers AlpineJS automatically when there are Livewire components on the page. In other words: imagine that you have a dropdown in your layout - offered by TallStackUI, but there are no Livewire components on the page. What will happen? The dropdown will not work! That's why we recommend "forced" loading of Livewire with the method below! 

<html>
    <head>
        <!-- ... -->
 
        <tallstackui:script />
        @livewireStyles
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <!-- ... -->
 
        @livewireScripts 
    </body>
</html>

Code highlighting provided by Torchlight