> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# Starter kits

> Scaffold authentication and a modern UI in minutes using Laravel's official starter kits.

## What are starter kits?

Starter kits are official scaffolding packages for Laravel applications. They generate all the code needed for user registration, login, password reset, email verification, and a matching UI — so you can focus on building your application rather than setting up authentication from scratch.

When you run `laravel new`, the installer prompts you to choose a starter kit. The selected kit generates routes, controllers, views, and frontend code directly inside your application. Because the code is yours, you can customise it freely.

<Warning>
  In Laravel 12 and later, the classic **Breeze** and **Jetstream** packages are no longer the recommended starting point for new projects. The new first-party starter kits described below replace them. Existing Breeze or Jetstream projects continue to work, but new projects should use the options below.
</Warning>

## Available starter kits

Laravel 13 ships with four starter kits:

<CardGroup cols={2}>
  <Card title="React" icon="react">
    React 19, TypeScript, Tailwind CSS v4, and [shadcn/ui](https://ui.shadcn.com). Powered by [Inertia.js](https://inertiajs.com) for server-side routing with a React frontend.
  </Card>

  <Card title="Vue" icon="vuejs">
    Vue 3 Composition API, TypeScript, Tailwind CSS, and [shadcn-vue](https://www.shadcn-vue.com/). Also powered by Inertia.js.
  </Card>

  <Card title="Livewire" icon="bolt">
    Build dynamic UIs in pure PHP with [Laravel Livewire](https://livewire.laravel.com) and Blade templates. Includes [Flux UI](https://fluxui.dev). Best for teams that prefer to stay in PHP.
  </Card>

  <Card title="Svelte" icon="s">
    Svelte 5, TypeScript, Tailwind CSS, and [shadcn-svelte](https://www.shadcn-svelte.com/). Powered by Inertia.js.
  </Card>
</CardGroup>

### Choosing a starter kit

| Starter kit | Best for                                            |
| ----------- | --------------------------------------------------- |
| React       | Teams experienced with React and TypeScript         |
| Vue         | Teams coming from Vue or Nuxt backgrounds           |
| Livewire    | Teams who want to build everything in PHP and Blade |
| Svelte      | Teams experienced with Svelte or SvelteKit          |

<Tip>
  The authentication functionality is identical across all four kits. Pick the frontend technology your team is most comfortable with.
</Tip>

<Info>
  If you want the high-level trade-offs before picking a kit, start with [Frontend](/en/frontend).
</Info>

## Installation

Starter kits are selected at project creation time — they cannot be added to an existing project.

<Steps>
  <Step title="Install the Laravel installer">
    If you haven't already, install it globally via Composer:

    ```shell theme={null}
    composer global require laravel/installer
    ```
  </Step>

  <Step title="Create a new application">
    Run `laravel new` and follow the interactive prompts. You'll be asked to choose a starter kit and an authentication provider:

    ```shell theme={null}
    laravel new my-app
    ```

    Choose one of **React**, **Vue**, **Livewire**, or **Svelte**. You can also choose between standard Laravel authentication or **WorkOS AuthKit** (see below).
  </Step>

  <Step title="Install frontend dependencies">
    ```shell theme={null}
    cd my-app
    npm install && npm run build
    ```
  </Step>

  <Step title="Prepare the database">
    Update your `.env` file with the correct database settings, then run:

    ```shell theme={null}
    php artisan migrate
    ```
  </Step>

  <Step title="Start the development server">
    ```shell theme={null}
    composer run dev
    ```

    Open `http://localhost:8000`. You'll see **Register** and **Log in** links in the navigation.
  </Step>
</Steps>

After installation, the following pages are available immediately:

| Feature            | URL                 |
| ------------------ | ------------------- |
| Registration       | `/register`         |
| Login              | `/login`            |
| Password reset     | `/forgot-password`  |
| Email verification | `/email/verify`     |
| Profile settings   | `/settings/profile` |

## Customising a starter kit

All generated files live inside your application, so you can modify them freely.

### Switching the app layout

Each starter kit includes a **sidebar** layout (default) and a **header** layout:

<Tabs>
  <Tab title="React">
    Edit `resources/js/layouts/app-layout.tsx`:

    ```tsx theme={null}
    // Default: sidebar layout
    import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

    // Switch to header layout
    import AppLayoutTemplate from '@/layouts/app/app-header-layout';
    ```
  </Tab>

  <Tab title="Vue">
    Edit `resources/js/layouts/AppLayout.vue`:

    ```js theme={null}
    // Default: sidebar layout
    import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

    // Switch to header layout
    import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
    ```
  </Tab>

  <Tab title="Livewire">
    Edit `resources/views/layouts/app.blade.php`:

    ```blade theme={null}
    {{-- Switch to header layout --}}
    <x-layouts::app.header>
        <flux:main container>
            {{ $slot }}
        </flux:main>
    </x-layouts::app.header>
    ```
  </Tab>

  <Tab title="Svelte">
    Edit `resources/js/layouts/AppLayout.svelte`:

    ```js theme={null}
    // Default: sidebar layout
    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

    // Switch to header layout
    import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';
    ```
  </Tab>
</Tabs>

### Switching the auth layout

Login and registration pages support **simple**, **card**, and **split** layouts:

<Tabs>
  <Tab title="React">
    Edit `resources/js/layouts/auth-layout.tsx`:

    ```tsx theme={null}
    // Default: simple layout
    import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

    // Switch to split layout
    import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';
    ```
  </Tab>

  <Tab title="Vue">
    Edit `resources/js/layouts/AuthLayout.vue`:

    ```js theme={null}
    // Default: simple layout
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

    // Switch to split layout
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';
    ```
  </Tab>

  <Tab title="Livewire">
    Edit `resources/views/layouts/auth.blade.php`:

    ```blade theme={null}
    <x-layouts::auth.split>
        {{ $slot }}
    </x-layouts::auth.split>
    ```
  </Tab>

  <Tab title="Svelte">
    Edit `resources/js/layouts/AuthLayout.svelte`:

    ```js theme={null}
    // Default: simple layout
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

    // Switch to split layout
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';
    ```
  </Tab>
</Tabs>

## WorkOS AuthKit

When running `laravel new`, you can choose **WorkOS AuthKit** as the authentication provider. This adds:

* Social login (Google, Microsoft, GitHub, Apple)
* Passkey authentication
* Magic link (passwordless email login)
* Single sign-on (SSO)

<Info>
  WorkOS AuthKit requires a WorkOS account. It is free for up to 1 million monthly active users.
</Info>

After selecting WorkOS, add the required environment variables to your `.env` file:

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

## Important note

<Warning>
  Starter kits must be selected **at project creation time**. They cannot be added to an existing project. If you need authentication in an existing project, implement it manually or start a new project.
</Warning>

## Next steps

<Card title="Testing" icon="flask" href="/en/testing">
  Learn how to write automated tests for your Laravel application.
</Card>


## Related topics

- [Creating a Laravel Starter Kit](/en/advanced/starter-kit-creation.md)
- [Laravel Fortify and Starter Kits](/en/advanced/fortify.md)
- [Laravel Maestro — Orchestrator for Starter Kit Development](/en/blog/maestro-introduction.md)
- [Laravel Chisel — Post-install Script Library for Starter Kits](/en/blog/chisel-introduction.md)
- [Laravel Console Starter](/en/packages/laravel-console-starter/index.md)