Starter kits

How to quickly set up authentication and UI with Laravel starter kits

What are starter kits

Starter kits are official scaffolding provided as a starting point for Laravel applications. You can set up authentication features—login, registration, password reset, and email verification—along with the corresponding UI all at once.

By selecting a starter kit when you create your application with laravel new, all the routes, controllers, views, and frontend code for authentication are generated for you automatically. Because all of the generated code lives inside your own application, you can customize it freely.

In Laravel 13, the previous Breeze and Jetstream starter kits have been retired. For new projects, use the starter kits described below. Existing projects that use Breeze or Jetstream continue to work, but they are not recommended for new development.

Available starter kits

Laravel 13 provides the following four starter kits:

React

A modern SPA using React 19, TypeScript, Tailwind 4, and shadcn/ui. Inertia.js lets you use React while retaining server-side routing.

Vue

Uses the Vue 3 Composition API, TypeScript, Tailwind, and shadcn-vue. Like React, it integrates with the server via Inertia.js.

Livewire

Livewire lets you build dynamic UIs with PHP alone. Ideal for teams that center their work on Blade templates or want to avoid using a JavaScript framework. Uses Flux UI.

Svelte

An SPA using Svelte 5, TypeScript, Tailwind, and shadcn-svelte. Combines with Inertia.js to build a modern frontend.

Which one to pick

Starter kit	Well-suited for
React	Teams familiar with the React ecosystem or TypeScript
Vue	Teams with experience in Vue or Nuxt
Livewire	Teams that want to focus development on PHP and Blade
Svelte	Teams with experience in Svelte or SvelteKit

Whichever you pick, the authentication features are exactly the same. Choose whatever frontend technology your team is most comfortable with.

If you want a big-picture view of the differences between Blade, Livewire, Inertia, and an independent SPA, reading Frontend first will help you choose.

How to install

You choose a starter kit when creating your project. Running the laravel new command lets you select a starter kit interactively.

1. Install the Laravel installer

   If you haven’t already installed it, get the Laravel installer via Composer.

   composer global require laravel/installer
   
2. Create a new application

   Run the laravel new command. An interactive prompt including the starter kit choice is displayed.

   laravel new my-app
   

   At the prompt, choose one of React, Vue, Livewire, or Svelte. You can also choose the authentication provider: standard Laravel authentication or WorkOS AuthKit.

3. Install frontend dependencies

   cd my-app
   npm install && npm run build
   
4. Prepare the database

   Verify the database configuration in the .env file, then run migrations.

   php artisan migrate
   
5. Start the development server

   composer run dev
   

   Visit http://localhost:8000 in your browser and you’ll see “Register” and “Log in” links in the navigation.

Installing a starter kit gives you the following authentication features ready to go:

Feature	URL
User registration	/register
Login	/login
Password reset	/forgot-password
Email verification	/email/verify
Edit profile	/settings/profile

Customizing the starter kit

All the generated code lives in your own application, so you can freely modify it. Most of the frontend code is in the resources/js directory (for Livewire, since it’s Blade-based, in resources/views).

Switching layouts

Each starter kit provides two layout options: “sidebar” and “header.” The default is the sidebar layout.

React

Edit resources/js/layouts/app-layout.tsx.

// Sidebar layout (default)
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// To switch to the header layout
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Vue

Edit resources/js/layouts/AppLayout.vue.

// Sidebar layout (default)
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

// To switch to the header layout
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Livewire

Edit resources/views/layouts/app.blade.php.

{{-- To switch to the header layout --}}
<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Svelte

Edit resources/js/layouts/AppLayout.svelte.

// Sidebar layout (default)
import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

// To switch to the header layout
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

Changing the auth page layout

Login and registration pages can also be chosen from three layout styles: “simple,” “card,” and “split.”

React

Edit resources/js/layouts/auth-layout.tsx.

// Simple layout (default)
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

// To switch to the split layout
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue

Edit resources/js/layouts/AuthLayout.vue.

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

// To switch to the split layout
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Livewire

Edit resources/views/layouts/auth.blade.php.

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

Svelte

Edit resources/js/layouts/AuthLayout.svelte.

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

// To switch to the split layout
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

Customizing user registration logic

The starter kits use action classes in the app/Actions/Fortify directory to handle user registration and password reset. For example, to add a phone number field during registration, edit CreateNewUser.php.

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'password' => Hash::make($input['password']),
    ]);
}

WorkOS AuthKit authentication

You can also choose WorkOS AuthKit as the authentication provider when running laravel new. WorkOS AuthKit adds the following features:

• Social authentication (Google, Microsoft, GitHub, Apple)
• Passkey authentication
• Email “Magic Auth”
• SSO (single sign-on)

Using WorkOS AuthKit requires a WorkOS account. It’s free for up to 1 million monthly active users.

If you select WorkOS, set the following environment variables in your .env file:

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

Caveats

Starter kits are chosen at project creation time. They cannot be added to an existing project after the fact. If you need auth UI, either select a starter kit for a new project or implement authentication manually.

Next steps

Authentication introduction

Learn more about Laravel’s authentication features, including using the Auth facade and protecting routes.