Shadcn UI

Overview of the New Laravel Ecosystem Laravel recently shifted its approach to application scaffolding. By replacing legacy packages like Jetstream and Breeze, the team introduced a series of dedicated starter kits tailored to specific frontend preferences. The React Starter Kit serves as a complete, ready-to-go application rather than a dependent package. This means the code belongs to you from day one, allowing for total customization without the constraints of an underlying vendor library. It bridges the gap between a robust PHP backend and a dynamic React frontend. Prerequisites and Tooling To follow this guide, you should have a solid grasp of Laravel fundamentals, React component architecture, and the command line. You will need the following tools: - **PHP 8.2+** and **Composer** - **Node.js** and **NPM** - **Laravel Installer**: The easiest way to scaffold new projects. - **Laravel Herd**: Recommended for a seamless local development environment, including built-in mail trapping. Key Libraries & Tools - Inertia.js: The essential bridge that connects server-side routing with client-side components. - Tailwind CSS 4: The latest utility-first CSS framework for rapid UI development. - ShadCN UI: A collection of re-usable components that you copy and paste into your apps. - Vite: The lightning-fast build tool for modern frontend development. Code Walkthrough: Installation and Layouts You can initiate a project using the Laravel installer. This process sets up the database, authentication, and frontend assets automatically. ```bash laravel new my-app --starter=react ``` Once installed, you can modify the application's look by swapping layouts. Unlike previous iterations, the React Starter Kit includes multiple built-in layout variations like `Simple`, `Card`, and `Split` for authentication, and `Sidebar` or `Header` for the main dashboard. ```javascript // resources/js/layouts/AppLayout.tsx import { AppSidebarLayout } from '@/components/app-sidebar-layout'; // Switch to AppHeaderLayout to move navigation to the top ``` Customizing the App Sidebar The sidebar is highly configurable. By adjusting the `variant` and `collapsible` props in the `AppSidebar` component, you can change the UI from a standard sidebar to a floating menu or an off-canvas overlay. ```javascript <Sidebar variant="floating" collapsible="icon" > {/* Navigation items */} </Sidebar> ``` Syntax Notes and Best Practices Tailwind CSS 4 removes the need for a `tailwind.config.js` by default, moving configuration directly into your `app.css`. Use CSS variables to define theme overrides like fonts or custom colors. When adding components via ShadCN UI, always check if you want to override existing logic; the kit includes many components out of the box that you can extend rather than replace. Tips & Gotchas - **Email Verification**: To enforce verification, implement the `MustVerifyEmail` interface on your `User` model and add the `verified` middleware to your routes. - **Database**: The kit defaults to SQLite, which is perfect for local prototyping but requires migration to MySQL or PostgreSQL for production. - **Environment**: Always update your `.env` file with local mail settings from Laravel Herd to test password resets and verification flows effectively.

The Vision of Managed Infrastructure Laravel Cloud represents a monumental shift in how developers interact with the infrastructure that powers their applications. The goal isn't just to provide a hosting space but to eliminate the friction that exists between writing code and making it live. For years, Laravel developers chose between the flexibility of Laravel Forge and the serverless simplicity of Laravel Vapor. This new platform bridges that gap by offering a fully managed, autoscaling environment that handles everything from compute to MySQL and PostgreSQL databases without requiring the user to manage an underlying AWS or DigitalOcean account. Speed served as the primary North Star for the development team. During early planning sessions in Amsterdam, the team set an ambitious goal: a deployment time of one minute or less. They surpassed this target through aggressive optimization, achieving real-world deployment times of approximately 25 seconds. This speed is not merely a vanity metric; it fundamentally changes the developer's feedback loop. When a push to a GitHub repository results in a live environment in less time than it takes to make a cup of coffee, the barrier to iteration vanishes. This efficiency is achieved through a bifurcated build and deployment process that leverages Docker and Kubernetes to ensure that code transitions from a repository to a live, edge-cached environment with zero downtime. The Engine Room: Scaling with Kubernetes Underpinning the entire platform is Kubernetes, which the engineering team describes as the "engine room" of the operation. The decision to use Kubernetes wasn't taken lightly, as it introduces significant complexity. However, it provides the isolation, self-healing capabilities, and scalability necessary for a modern cloud platform. The architecture separates concerns into specialized clusters: a build cluster and a compute cluster. When a user initiates a deployment, the build cluster pulls the source code and bakes it into a Docker image based on the user's specific configuration (such as PHP version or Node.js requirements). This image is then stored in a private registry. The compute cluster’s operator—a custom piece of software watching for deployment jobs—then pulls this image and creates new "pods." These pods spin up while the old version of the application is still serving traffic. Only when the new pods pass health checks does Kubernetes route traffic to them, ensuring that users never see a 500 error during a transition. This ephemeral nature of pods means storage is not persistent locally; developers must use object storage like Amazon S3 to ensure files survive between deployments. Strategic Choices: React, Inertia, and the API Choosing a technology stack for a platform as complex as Laravel Cloud required balancing immediate development speed with long-term flexibility. The team ultimately landed on a stack featuring React and Inertia.js. While Livewire is a staple in the Laravel ecosystem, the team felt the React ecosystem offered a more mature set of pre-built UI components—specifically citing Shadcn UI—that allowed them to prototype and build the complex "canvas" dashboard without a dedicated designer in the earliest stages. This decision also looks toward the future. The team knows a public API is a high-priority requirement for the community. By using Inertia.js, the front end and back end stay closely coupled for rapid development, but the business logic is carefully abstracted. This abstraction is achieved through the heavy use of the **Action Pattern**. Every major operation, from adding a custom domain to provisioning a database, is encapsulated in a standalone Action class. This means that when the time comes to launch the public API, the team won't need to rewrite their logic; they will simply call the existing Actions from new API controllers. This methodical approach prevents the codebase from becoming a tangled web of controller-resident logic, ensuring the platform remains maintainable as it scales to thousands of users. Development Patterns for Robust Systems Developing a cloud platform requires handling hundreds of external API calls to service providers. To keep local development fast and reliable, the team utilizes a strict **Fakes** pattern. Instead of calling real infrastructure providers during local work, the application binds interfaces to the Laravel service container. If the environment is set to "fake," the container injects a mock implementation that simulates the behavior of the real service—even simulating the latency and logs of a real deployment. Furthermore, the team has embraced testing coverage as a critical safety net. While some developers view high coverage percentages as an empty goal, for the Laravel Cloud team, it serves as an early warning system. Because the platform manages sensitive infrastructure, missing an edge case in a deployment script can have catastrophic results. The CI/CD pipeline enforces strict coverage limits; if a new pull request causes the coverage to drop, it is a signal that an edge case or a logic branch has been ignored. This rigorous standard, combined with Pest for testing and Laravel Pint for code style, ensures the codebase remains clean and predictable even as the team grows. Database Innovation and Hibernation A standout feature of the platform is its approach to cost management through hibernation. Recognizing that many applications—especially staging sites and hobby projects—don't receive 24/7 traffic, the team implemented a system where both compute and databases can "go to sleep." If an environment receives no HTTP requests for a set period, the Kubernetes pods are spun down, and the user stops paying for compute resources. The moment a new request arrives, the system wakes up, usually within 5 to 10 seconds. This logic extends to the database layer. The serverless PostgreSQL offering supports similar hibernation. For users who prefer MySQL, the platform recently added support in a developer preview mode. The platform handles the complexities of database connectivity by automatically injecting environment variables into the application runtime. When a database is attached via the dashboard, the system detects it and automatically enables database migrations in the deployment script. This level of automation removes the manual "plumbing" that usually accompanies setting up a new environment, allowing developers to focus entirely on the application logic. Implications for the Laravel Ecosystem The launch of Laravel Cloud fundamentally alters the economics of the Laravel ecosystem. By moving to a model where developers pay only for what they use through compute units and autoscale capacity, the barrier to entry for high-scale applications is lowered. Teams no longer need a dedicated DevOps engineer to manage complex Kubernetes configurations or manually scale server clusters during traffic spikes. The platform manages the "undifferentiated heavy lifting" of infrastructure. Looking forward, the roadmap includes first-party support for Laravel Reverb for real-time applications and the much-requested "preview deployments." These preview environments will allow teams to spin up a fully functional, isolated version of their app for every GitHub pull request, facilitating better QA and stakeholder reviews. As the platform matures and introduces more fine-grained permissions and a public API, it is poised to become the default choice for developers who value shipping speed and operational simplicity over the manual control of traditional server management.

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.