Flux UI

Overview Livewire 4 represents a massive leap forward for the Laravel ecosystem, focusing on developer experience and performance without the pain of a total rewrite. This update addresses the fragmentation within the community by unifying component styles—combining the best of Volt and traditional class-based components. By introducing the **Blaze compiler** and **Islands architecture**, the framework tackles the "Livewire is slow" myth head-on, offering tools that can speed up page rendering by up to 10x while maintaining the reactive, "no-JavaScript-required" workflow that developers love. Prerequisites To follow along with these techniques, you should have a solid grasp of: * **PHP & Laravel basics**: Understanding of routing, Blade templates, and class structures. * **Livewire 3**: Familiarity with how state and actions work in the current version. * **Alpine.js**: Basic knowledge of client-side reactivity. * **Tailwind CSS**: Useful for implementing the new loading indicator patterns. Key Libraries & Tools * **Livewire 4**: The core full-stack framework for Laravel. * **Blaze**: A new optimization layer that "code-folds" Blade components to remove runtime overhead. * **Pest 4**: A testing framework used for high-level browser testing within components. * **Flux UI**: A high-quality component kit that benefits from these performance upgrades. * **Sushi**: An array-to-Eloquent driver mentioned as a community favorite. Code Walkthrough: The Unified Component Model In Livewire 4, the goal is to stop the confusion between functional, class-based, and Volt styles. The new default is a single-file, class-based structure located in `resources/views/components` alongside your standard Blade components. Single-File Components Creating a counter now looks like this: ```php <?php use function Livewire\{state, rules}; new class extends Livewire\Component { public $count = 0; public function increment() { $this->count++; } }; ?> <div> <button wire:click="increment">+</button> <span>{{ $count }}</span> </div> <script> this.watch('count', (value) => { console.log('Count changed to: ' + value); }); </script> ``` In this example, the logic, view, and script live together. Notice the `<script>` tag at the bottom—it no longer requires `@script` directives. The `this` keyword in JavaScript replaces the older `$wire` syntax, offering a more native feel. These scripts are served as **ES6 modules**, meaning they are cached by the browser and can use native imports. Multi-File Conversion If a component grows too large, you can automatically convert it to a **Multi-File Component (MFC)** using the CLI. This moves the logic into a dedicated directory with separate `.php`, `.blade.php`, and `.js` files, maintaining Caleb Porzio's "Single Responsibility Principle" by keeping related files collocated in one folder. Syntax Notes: PHP 8.4 Property Hooks Livewire 4 leans heavily into PHP 8.4 features to simplify state management. The most impactful change is the use of **Property Hooks**, which replace many old `updating` and `updated` lifecycle methods. Validation with Setters You can now intercept property updates directly at the language level: ```php public int $count = 0 { set => max(0, $value); } ``` Memoization with Getters Instead of creating custom computed property methods, use native getters. These are excellent for deriving state for your views: ```php public int $multiple { get => $this->count * 5; } ``` You can even use asymmetric visibility (`public get, protected set`) to make a property readable by the view but immutable from the client, effectively replacing the `@locked` attribute. The Blaze Compiler: Vaporizing Runtime Overhead One of the most impressive technical feats in version 4 is **Blaze**. Caleb Porzio identified that the primary bottleneck in large Blade views isn't PHP itself, but the overhead of resolving and merging attributes for thousands of components. Blaze uses a technique called **code folding**. It parses your Blade templates and identifies static parts—like Tailwind CSS classes or HTML structures that never change—and renders them at compile time. This turns a complex component tree back into raw, concatenated PHP strings. In benchmarks, this reduced a page with 29,000 view instances from 1.6 seconds down to just 131 milliseconds. Best of all, it works for standard Blade components, not just Livewire ones. Practical Examples: Islands and Infinite Scroll **Islands architecture** allows you to isolate expensive parts of a page so they don't block the rest of the UI. This is a game-changer for dashboards with slow database queries. Implementing an Island Wrap a slow section in the `@island` directive: ```blade @island('revenue-chart', lazy: true) <div class="chart"> {{ $this->expensiveRevenueQuery() }} </div> @placeholder <x-skeleton-loader /> @endisland ``` By setting `lazy: true`, the main page loads instantly. Livewire then makes a separate, isolated request for the island. Actions taken within the island only rerender the island itself. Infinite Pagination Islands also unlock high-performance pagination. By changing the render mode to `append`, you can create an infinite scroll effect with minimal code: ```blade @island('reports', mode: 'append') @foreach($reports as $report) <div>{{ $report->title }}</div> @endforeach @endisland <button wire:intersect="$paginator->nextPage()" wire:island="reports"> Loading more... </button> ``` The `wire:intersect` directive triggers the next page when the button enters the viewport, and because the island is in `append` mode, it only fetches and patches the new results into the DOM. Tips & Gotchas * **Priority Polling**: In Livewire 4, human-initiated actions (like clicks) now automatically cancel background polling requests. This prevents the UI from feeling "locked" when background updates are happening. * **Data Loading Attributes**: Any element triggering a request now receives a `data-loading` attribute. Use Tailwind CSS modifiers like `data-loading:opacity-50` to handle loading states without writing complex `wire:loading` logic. * **Ref Management**: Use `wire:ref="myModal"` to target specific components for events. This solves the issue of global event listeners accidentally closing every modal on the page when only one was intended. * **PHP 8.4 Requirement**: To use the advanced property hooks, you must ensure your server is running PHP 8.4. While Livewire 4 aims for "mostly no breaking changes," these specific syntax upgrades require modern PHP.

Overview: Why Modern Starter Kits Matter Building a robust authentication system from scratch is a repetitive, error-prone task that can stall the momentum of a new project. Laravel has long solved this with Breeze and Jetstream, but the latest evolution of Laravel Starter Kits shifts the focus toward modern UI aesthetics and developer experience. These kits aren't just boilerplate; they are a curated selection of industry-best tools like Tailwind CSS V4 and Shadcn UI, providing a professional-grade foundation for SaaS applications. By leveraging these kits, you bypass the hours spent configuring build tools, setting up dark mode, and designing responsive sidebars. Instead, you start with a fully functional, high-fidelity dashboard that is ready for production. This tutorial explores the React and Livewire flavors of these kits, demonstrating how to install, customize, and extend them to fit your specific application needs. Prerequisites To follow along with this guide, you should have a baseline understanding of the following: * **PHP & Laravel:** Basic familiarity with the Laravel framework, including Eloquent models and routing. * **Terminal Usage:** Comfort using the command line to run `composer` and `php artisan` commands. * **Local Development Environment:** Tools like Laravel Herd or Valet to serve your local `.test` sites. * **Frontend Basics:** A working knowledge of either React (for the Inertia kit) or Blade templates (for the Livewire kit). Key Libraries & Tools Before we dive into the code, let's identify the heavy lifters in these new kits: * **Laravel Starter Kits:** The official scaffolding packages for rapid application setup. * **Shadcn UI:** A collection of re-usable components built using Radix UI and Tailwind CSS. Unlike a traditional library, these are copied directly into your project for total control. * **Tailwind CSS V4:** The newest version of the utility-first CSS framework, featuring improved performance and a simplified configuration process. * **Inertia.js V2:** The bridge between Laravel and modern frontend frameworks like React or Vue. * **Livewire & Volt:** A full-stack framework for Laravel that allows you to build dynamic interfaces using PHP. Volt adds an elegant, single-file functional API to Livewire. * **Pest:** A delightful PHP testing framework focused on simplicity and readability. Code Walkthrough: Installing and Customizing React The React starter kit uses Inertia.js to deliver a seamless single-page application (SPA) experience. Let's look at the installation process and how to toggle between different visual layouts. 1. Installation Start by using the Laravel installer to create a new project. You will be prompted to choose your stack. Select React and choose the built-in Laravel authentication unless you specifically need WorkOS integration. ```bash Create a new React project laravel new react-app ``` During installation, you can opt for Pest as your testing framework. The installer uses a "drift" plugin to automatically convert standard PHPUnit tests into the Pest syntax, ensuring your test suite is modern from day one. 2. Switching Layouts in React The new kits include multiple authentication layouts: `Simple`, `Card`, and `Split`. To change the appearance of your login or registration pages, you only need to modify a single import in the Inertia layout file. Navigate to `resources/js/layouts/auth-layout.tsx` (or the equivalent `.js` file). You can swap the layout component being used: ```javascript // resources/js/layouts/auth-layout.tsx // To change to a split layout with a quote and image on the left: import { AuthSplitLayout } from '@/layouts/auth/auth-split-layout'; export default function AuthLayout({ children }) { return <AuthSplitLayout children={children} />; } ``` 3. Adding Shadcn Components Because Shadcn UI components are just files in your `resources` directory, adding new ones is a matter of running an `npx` command. For instance, to add a toggle switch to your dashboard: ```bash npx shadcn-ui@latest add switch ``` Then, import it directly into your dashboard page: ```javascript // resources/js/pages/dashboard.tsx import { Switch } from "@/components/ui/switch"; export default function Dashboard() { return ( <div> <h1>Dashboard</h1> <Switch /> </div> ); } ``` Deep Dive: Livewire, Volt, and Functional PHP If you prefer staying within the PHP ecosystem while maintaining a dynamic frontend, the Livewire kit is the primary choice. This kit heavily utilizes Volt, which allows you to define your component logic and Blade template in the same file. 1. Creating a Volt Component A Volt component represents a modern way to handle state in Laravel. Instead of having a separate Class file and Blade file, everything is co-located. ```bash php artisan make:volt counter ``` This creates a file at `resources/views/livewire/counter.blade.php`. Here is how you write a functional counter using the Volt API: ```php <?php use function Livewire\Volt\{state}; state(['count' => 0]); $increment = fn () => $this->count++; ?> <div> <h1>{{ $count }}</h1> <button wire:click="increment">+</button> </div> ``` 2. Livewire Routing Livewire components can be served as full-page components. In your `routes/web.php`, you can map a URL directly to a Volt component without needing a controller: ```php use Livewire\Volt\Volt; Volt::route('/counter', 'counter'); ``` This approach dramatically reduces the "boilerplate" code required to get a functional page onto the screen. Syntax Notes * **Class Names:** In React components, remember to use `className` instead of `class`. When working with the Split Layout, ensure your text colors (like `text-white`) are applied to visible containers, or they may be obscured by background divs. * **Middleware:** The kits come with `password.confirm` middleware pre-configured. Applying this to a route forces the user to re-enter their password before viewing sensitive settings. * **Email Verification:** To enable mandatory email verification, simply ensure your `User` model implements the `MustVerifyEmail` contract and uncomment the relevant line in your model file. Practical Examples * **SaaS Dashboard:** Use the `SidebarLayout` as the foundation for a multi-tenant dashboard. Since the sidebar is fully customizable, you can easily add dynamic menu items based on the user's subscription tier. * **Marketing Pages:** The `AuthSplitLayout` is perfect for modern landing pages where you want a high-resolution brand image or customer testimonial to sit alongside the sign-up form. * **Internal Tools:** Use the Livewire kit with Shadcn equivalents to build rapid CRUD interfaces. The ability to keep logic and views in a single Volt file makes maintaining dozens of internal forms much easier. Tips & Gotchas * **Asset Watcher:** Always keep `npm run dev` or `vite` running in the background. If your layout changes aren't appearing, it's likely because the asset watcher isn't picking up your file saves. * **Shadcn Portability:** Remember that Shadcn UI isn't a package you update via `composer` or `npm`. If you want the latest version of a component, you generally re-run the `add` command and overwrite the existing file. * **Vue Compatibility:** If you choose the Vue starter kit, be aware that as of early 2025, some Shadcn Vue components may still be catching up to Tailwind CSS V4. Check the official documentation for the latest compatibility patches. * **Testing:** Use Pest to verify your customizations. If you delete a component you think is unused, run `vendor/bin/pest` to ensure you haven't broken a dependency in the authentication flow.

Overview Modern web development demands speed without sacrificing architectural integrity. Laravel Cloud solves this by providing a friction-less deployment path for the new Laravel 12 starter kits. This guide demonstrates how to move from a local `laravel new` command to a fully hosted environment in under five minutes, utilizing Livewire and Flux UI for a robust, production-ready foundation. Prerequisites To follow this workflow, you need a basic understanding of PHP and Git. Ensure you have the Laravel Installer (v5.0+) and Composer installed globally. You will also need a GitHub account to act as your source control provider for the cloud sync. Key Libraries & Tools * **Laravel 12**: The core framework providing the application backbone. * **Livewire**: A full-stack framework for building dynamic interfaces without leaving PHP. * **Flux UI**: The official UI component library for Livewire starter kits. * **Pest**: A developer-focused testing framework used for quality assurance. * **Laravel Cloud**: The hosting platform specifically optimized for Laravel applications. Code Walkthrough 1. Project Initiation Start by generating a fresh application with the starter kit flags. This command scaffolds authentication and the UI layer immediately. ```bash laravel new ship-to-cloud --livewire --auth --pest ``` 2. Local Development Orchestration Instead of managing multiple terminal tabs, use the `composer dev` command. This single process manages the PHP server, Vite assets, and Laravel Pail for real-time logging. ```bash composer dev ``` 3. Deployment Configuration Once pushed to GitHub, connect the repository to the Laravel Cloud dashboard. Crucially, ensure your deployment settings include the migration flag to prepare your database on the first boot. ```bash php artisan migrate --force ``` Syntax Notes Notice the use of the `--force` flag in the migration command. In production environments, Laravel protects against accidental data loss by preventing migrations; the force flag overrides this safeguard for automated CI/CD pipelines. Additionally, Laravel 12 utilizes Flux UI components which use a clean, declarative syntax like `<x-layouts.app.sidebar />` to manage complex layouts. Practical Examples This setup is ideal for **SaaS Prototyping**. By creating a "New Feature" branch in Git, Laravel Cloud can automatically spin up a dedicated preview environment. This allows you to test database-heavy changes in isolation before merging into the main production branch. Tips & Gotchas When setting up multiple environments, remember that Laravel Cloud can share a single database cluster across different branches. However, you should create separate database names within that cluster to avoid schema collisions between your `main` and `feature` branches.