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

Powerful suite of Blade components for TALL Stack apps.

Installation

WARNING!

2.x is in public beta while we gather community feedback.

TallStackUI is a powerful suite of 30+ ready-to-use components for TALL Stack applications. TallStackUI is unlike anything you've ever seen, from its conception to construction and general availability. Beforehand we want to tell you a little about our motivation.

TallStackUI was created by AJ, a FullStack PHP developer for 10 years, passionate about the Laravel and Livewire ecosystem, especially the TALL Stack, a universe of possibilities with little time and effort. AJ is an active developer in the community, contributing to Laravel, Livewire, PestPHP and other open-source solutions.

TallStackUI was created with a focus on Livewire 3 so the usage requirements are:

  • PHP 8.1 or above
  • Laravel 10 or Laravel 11
  • Livewire 3
  • AlpineJS 3
  • TailwindCSS 3

1. Include the TallStackUI as a composer dependency of your project:

composer require tallstackui/tallstackui:^2.0@beta

2. Prepare your base layout:

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

The TallStackUI script must be loaded above of the the @vite tag.

3. Edit the tailwind.config.js of your application inserting this content:

import forms from '@tailwindcss/forms';
 
presets: [
require('./vendor/tallstackui/tallstackui/tailwind.config.js')
],
 
content: [
// ...
 
'./vendor/tallstackui/tallstackui/src/**/*.php',
],
 
plugins: [forms],

Your TailwindCSS setup must load the form plugin

4. Run the following command:

npm run build && php artisan optimize:clear

If you've made it this far by completing all of the steps above, you're probably ready to test TallStackUI in your application, but we strongly recommend that you continue reading the other pages in the Getting Started section to learn more about TallStackUI rather than trying to create your first components right now.

Code highlighting provided by Torchlight