> ## 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

> 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.

<Warning>
  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.
</Warning>

## Available starter kits

Laravel 13 provides the following four starter kits:

<CardGroup cols={2}>
  <Card title="React" icon="react">
    A modern SPA using React 19, TypeScript, Tailwind 4, and [shadcn/ui](https://ui.shadcn.com).
    [Inertia.js](https://inertiajs.com) lets you use React while retaining server-side routing.
  </Card>

  <Card title="Vue" icon="vuejs">
    Uses the Vue 3 Composition API, TypeScript, Tailwind, and [shadcn-vue](https://www.shadcn-vue.com/).
    Like React, it integrates with the server via Inertia.js.
  </Card>

  <Card title="Livewire" icon="bolt">
    [Livewire](https://livewire.laravel.com) 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](https://fluxui.dev).
  </Card>

  <Card title="Svelte" icon="s">
    An SPA using Svelte 5, TypeScript, Tailwind, and [shadcn-svelte](https://www.shadcn-svelte.com/).
    Combines with Inertia.js to build a modern frontend.
  </Card>
</CardGroup>

### 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          |

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

<Info>
  If you want a big-picture view of the differences between Blade, Livewire, Inertia, and an independent SPA, reading [Frontend](/en/frontend) first will help you choose.
</Info>

## How to install

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

<Steps>
  <Step title="Install the Laravel installer">
    If you haven't already installed it, get the Laravel installer via Composer.

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

  <Step title="Create a new application">
    Run the `laravel new` command. An interactive prompt including the starter kit choice is displayed.

    ```bash theme={null}
    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.
  </Step>

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

  <Step title="Prepare the database">
    Verify the database configuration in the `.env` file, then run migrations.

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

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

    Visit `http://localhost:8000` in your browser and you'll see "Register" and "Log in" links in the navigation.
  </Step>
</Steps>

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.

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

    ```tsx theme={null}
    // 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';
    ```
  </Tab>

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

    ```js theme={null}
    // Sidebar layout (default)
    import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

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

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

    ```blade theme={null}
    {{-- To switch to the 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}
    // Sidebar layout (default)
    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

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

### Changing the auth page layout

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

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

    ```tsx theme={null}
    // 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';
    ```
  </Tab>

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

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

    // To switch to the 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}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

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

### 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`.

```php theme={null}
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)

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

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

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

## Caveats

<Warning>
  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.
</Warning>

## Next steps

<Card title="Authentication introduction" icon="lock" href="/en/authentication">
  Learn more about Laravel's authentication features, including using the `Auth` facade and protecting routes.
</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 — the starter kit orchestrator](/en/blog/maestro-introduction.md)
- [Laravel Console Starter](/en/packages/laravel-console-starter/index.md)
- [Laravel Chisel — a post-install script library for starter kits](/en/blog/chisel-introduction.md)