Shadcn UI

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.

Navigating the Evolution of Laravel and PHP The ecosystem surrounding Laravel is undergoing a fundamental transformation. What began as a personal project by Taylor Otwell fifteen years ago has matured into a global standard for web development, currently seeing over 300,000 daily composer installs. At Laracon EU Amsterdam 2025, the community witnessed the closing of one chapter and the ambitious opening of another. This new era focuses on world-class developer experiences, stretching from local environments to a revolutionary infrastructure platform known as Laravel Cloud. Modern web development demands speed without sacrificing robustness. The shift toward a unified ecosystem—one that handles everything from the database to the edge—represents a strategic move to keep PHP as the default choice for building full-stack applications. This evolution isn't just about the framework itself; it's about the tools, libraries, and architectural patterns that empower developers to ship code in minutes rather than days. Deciphering Technical Excellence: Pipelines and Static Analysis Technical debt often stems from poorly organized logic. Bobby Bouwman presented a compelling case for the Pipeline pattern in Laravel. This architectural approach passes a subject through a series of independent "pipes," each performing a specific task before returning the result. It is the same pattern that powers Laravel's middleware kernel. By decoupling complex operations—such as syncing prices across multiple currencies or handling AI-driven messaging conditions—developers gain massive flexibility and testability. When each step in a process is a standalone class, swapping orders or adding conditional logic becomes trivial. To handle external failures like failed API calls during a pipeline, developers can implement the Saga pattern, which allows for compensating actions to roll back changes outside the database transaction. Beyond architecture, code quality is being bolstered by advanced tooling. Ryan Chandler broke down the mechanics of static analysis using PHPStan. Static analysis tools evaluate code without executing it, catching spelling errors, wrong argument counts, or type mismatches before they reach production. By understanding the Abstract Syntax Tree (AST), developers can write custom rules to enforce team-specific standards. For instance, a custom rule can prevent unnecessary calls to the `value()` helper when a closure isn't present. This transforms the static analyzer into an automated team member that never tires of reviewing syntax, allowing humans to focus on higher-level architecture. The Intelligence Layer: Word Embeddings and Semantic Search The integration of AI into web applications often feels like black box magic. Diana Scharf demystified this by introducing word embeddings. Computers do not understand human language; they understand math. An embedding model converts words or text chunks into high-dimensional vectors. These vectors represent human semantics numerically. By measuring the distance between these vectors—often using cosine similarity—a computer can determine that "cat" is more similar to "kitten" than it is to "car," even if the syntax is entirely different. Integrating these vectors into Laravel applications is now streamlined through extensions like PGVector for PostgreSQL. Developers can store these mathematical representations and perform nearest-neighbor searches directly in the database. This enables "Semantic Search," where a user can ask a question like "Where does the PHP elephant live?" and the system retrieves the most relevant context based on meaning rather than keywords. Combining this context with a generative model like GPT-3.5 Turbo allows for highly intelligent, context-aware chatbots that work within the specific data constraints of a private application. Performance Optimization: From WebSockets to OpCache Performance remains the primary bottleneck for scaling applications. Marcel Pociot identified the top culprits for slow requests: unoptimized database queries, slow external HTTP calls, and synchronous tasks that should be queued. A fundamental, yet often overlooked, optimization is OpCache. By compiling PHP code into bytecode and storing it in memory, OpCache eliminates the need for PHP to parse and compile files on every request. This simple toggle can reduce response times by over 60%. For real-time interactivity, the industry is moving away from resource-intensive polling. Bert De Smet demonstrated the power of Laravel Reverb, a first-party WebSocket server. Instead of having hundreds of clients pinging the server every few seconds, Reverb maintains an open connection. When a task is updated in the database, the server broadcasts an event, and the client updates instantly. This "happy path" for data synchronization preserves server resources while providing a seamless, single-page application (SPA) feeling through Livewire Navigate. Product Management for Developers: The Art of the Cut Effective development isn't just about writing code; it's about solving the right problems. John Rexer argued that every developer is a product manager, whether they admit it or not. The most dangerous trap in software engineering is the "hypothetical problem"—building features for future needs that may never materialize. Developers must act like "Truffle Pigs," rooting through ambiguous requests to find the core problem statement. By asking "What problem does this solve?", engineers can often reduce scope by 20% or more. Cutting features isn't an admission of laziness; it is a surgical tool for productivity. An ordered list of meaningful problems allows a team to move from task to task with clarity. When a problem is solved, the rule is simple: move on. Over-polishing a solution or solving adjacent non-problems leads to bloated legacy code and wasted capital. The Launch of Laravel Cloud: Infrastructure as Code, Simplified The highlight of the event was the reveal of Laravel Cloud by Taylor Otwell. Launching February 24th, this platform aims to be the most sophisticated deployment tool ever built for the PHP community. Laravel Cloud addresses the modern developer's expectation of shipping code in under a minute. It utilizes a canvas-based infrastructure view where developers can visually add databases, caches, and S3-compatible storage buckets with zero manual environment variable configuration. One of the most innovative features is application and database hibernation. For side projects or staging environments, the system can put the entire stack to sleep when not in use, meaning the user only pays for active compute time. The platform also natively supports Laravel Octane and FrankenPHP, allowing for high-performance execution out of the box. With the addition of automatic preview deployments for GitHub branches, Laravel Cloud completes a full-stack ecosystem that rivals the developer experience of any modern language. Future Horizons: Starter Kits and Community Growth As Laravel enters its next era, the barrier to entry continues to drop. New starter kits built with Inertia.js 2.0 and React 19 (or Vue) now include professional-grade UI components using Shadcn UI. For the Livewire community, the base components of Flux will become free, providing high-quality layouts, modals, and buttons as a standard. The framework's transition to Laravel 12 later this month promises a major update with zero breaking changes, emphasizing the team's commitment to stability. Laravel is no longer just a framework; it is a comprehensive productivity suite. The synergy between the core framework, the new Laravel Nightwatch monitoring tool, and the Cloud infrastructure represents a holistic approach to the software lifecycle. By focusing on the developer's ability to create something from nothing and ship it to the world, the ecosystem ensures its relevance for the next decade of web development.