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

> Cómo configurar rápidamente la autenticación y la UI con los starter kits de Laravel

## ¿Qué es un starter kit?

Un starter kit es un andamiaje oficial pensado como punto de partida para una aplicación Laravel.
Permite configurar de golpe la autenticación (inicio de sesión, registro, restablecimiento de contraseña, verificación de correo, etc.) junto con su UI.

Basta con elegir un starter kit al crear la aplicación con `laravel new` para que se generen automáticamente todas las rutas, controladores, vistas y el código frontend relacionados con la autenticación.
Como todo el código generado vive en tu propia aplicación, puedes personalizarlo libremente.

<Warning>
  En Laravel 13 se han retirado los antiguos **Breeze** y **Jetstream**.
  Para los proyectos nuevos, utiliza los starter kits que se presentan a continuación.
  Los proyectos existentes que usen Breeze o Jetstream seguirán funcionando, pero ya no se recomiendan para desarrollos nuevos.
</Warning>

## Starter kits disponibles

En Laravel 13 se ofrecen los siguientes cuatro starter kits.

<CardGroup cols={2}>
  <Card title="React" icon="react">
    SPA moderna con React 19, TypeScript, Tailwind 4 y [shadcn/ui](https://ui.shadcn.com).
    Gracias a [Inertia.js](https://inertiajs.com) puedes usar React manteniendo el enrutamiento del lado del servidor.
  </Card>

  <Card title="Vue" icon="vuejs">
    Adopta la Composition API de Vue 3, TypeScript, Tailwind y [shadcn-vue](https://www.shadcn-vue.com/).
    Al igual que React, se integra con el servidor a través de Inertia.js.
  </Card>

  <Card title="Livewire" icon="bolt">
    [Livewire](https://livewire.laravel.com) permite construir UIs dinámicas solo con PHP.
    Ideal para equipos centrados en plantillas Blade o que quieren evitar frameworks de JavaScript. Utiliza [Flux UI](https://fluxui.dev).
  </Card>

  <Card title="Svelte" icon="s">
    SPA con Svelte 5, TypeScript, Tailwind y [shadcn-svelte](https://www.shadcn-svelte.com/).
    Combinado con Inertia.js permite construir un frontend moderno.
  </Card>
</CardGroup>

### ¿Cuál elegir?

| Starter kit | Equipos ideales                                            |
| ----------- | ---------------------------------------------------------- |
| React       | Equipos habituados al ecosistema de React y TypeScript     |
| Vue         | Equipos con experiencia en Vue o Nuxt                      |
| Livewire    | Equipos que quieren desarrollar centrándose en PHP y Blade |
| Svelte      | Equipos con experiencia en Svelte o SvelteKit              |

<Tip>
  Elijas el que elijas, las funciones de autenticación son idénticas. Elige la tecnología frontend con la que tu equipo se sienta más cómodo.
</Tip>

<Info>
  Si quieres una visión general de las diferencias entre Blade, Livewire, Inertia y SPAs independientes, lee primero [Frontend](/es/frontend) para decidir mejor.
</Info>

## Instalación

Un starter kit se elige al crear el proyecto. Al ejecutar `laravel new`, un asistente interactivo te ofrece seleccionarlo.

<Steps>
  <Step title="Instalar el instalador de Laravel">
    Si aún no lo tienes instalado, obténlo con Composer.

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

  <Step title="Crear una nueva aplicación">
    Ejecuta `laravel new`. Aparecerán prompts interactivos que incluyen la elección del starter kit.

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

    Elige **React**, **Vue**, **Livewire** o **Svelte** en el prompt.
    También podrás elegir entre la autenticación estándar de Laravel o WorkOS AuthKit como proveedor de autenticación.
  </Step>

  <Step title="Instalar las dependencias del frontend">
    ```bash theme={null}
    cd my-app
    npm install && npm run build
    ```
  </Step>

  <Step title="Preparar la base de datos">
    Comprueba la configuración de base de datos en `.env` y ejecuta las migraciones.

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

  <Step title="Iniciar el servidor de desarrollo">
    ```bash theme={null}
    composer run dev
    ```

    Al acceder a `http://localhost:8000` verás enlaces "Register" y "Log in" en la navegación.
  </Step>
</Steps>

Una vez instalado el starter kit, dispones de estas funciones de autenticación:

| Funcionalidad                  | URL                 |
| ------------------------------ | ------------------- |
| Registro de usuario            | `/register`         |
| Inicio de sesión               | `/login`            |
| Restablecimiento de contraseña | `/forgot-password`  |
| Verificación de correo         | `/email/verify`     |
| Edición del perfil             | `/settings/profile` |

## Personalizar el starter kit

Como todo el código generado vive en tu aplicación, puedes modificarlo con total libertad.
La mayor parte del código frontend se encuentra en `resources/js` (en Livewire, al ser Blade, en `resources/views`).

### Cambio de layout

Cada starter kit incluye dos layouts: "sidebar" y "header".
Por defecto se usa el layout con sidebar.

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

    ```tsx theme={null}
    // Layout con sidebar (por defecto)
    import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

    // Para cambiar al layout con header
    import AppLayoutTemplate from '@/layouts/app/app-header-layout';
    ```
  </Tab>

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

    ```js theme={null}
    // Layout con sidebar (por defecto)
    import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

    // Para cambiar al layout con header
    import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
    ```
  </Tab>

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

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

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

    ```js theme={null}
    // Layout con sidebar (por defecto)
    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

    // Para cambiar al layout con header
    import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';
    ```
  </Tab>
</Tabs>

### Cambio de layout en las páginas de autenticación

Las páginas de login y registro también pueden elegirse entre tres layouts: "simple", "card" y "split".

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

    ```tsx theme={null}
    // Layout simple (por defecto)
    import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

    // Para cambiar al layout split
    import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';
    ```
  </Tab>

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

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

    // Para cambiar al layout split
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';
    ```
  </Tab>

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

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

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

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

    // Para cambiar al layout split
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';
    ```
  </Tab>
</Tabs>

### Personalizar la lógica de registro de usuarios

El starter kit usa clases de acción del directorio `app/Actions/Fortify` para el registro y el restablecimiento de contraseña.
Por ejemplo, para añadir un campo de teléfono en el registro, edita `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']),
    ]);
}
```

## Autenticación con WorkOS AuthKit

Al ejecutar `laravel new` también puedes elegir **WorkOS AuthKit** como proveedor de autenticación.
Con WorkOS AuthKit añades las siguientes funciones:

* Autenticación social (Google, Microsoft, GitHub, Apple)
* Autenticación con passkeys
* "Magic Auth" por correo
* SSO (inicio de sesión único)

<Info>
  Para usar WorkOS AuthKit necesitas una cuenta de WorkOS. Se puede usar gratis hasta un millón de usuarios activos mensuales.
</Info>

Si eliges WorkOS, configura estas variables en el archivo `.env`.

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

## Cosas a tener en cuenta

<Warning>
  Los starter kits se eligen **al crear el proyecto**.
  No pueden añadirse a posteriori a un proyecto existente.
  Si necesitas una UI de autenticación, elige un starter kit en un proyecto nuevo o implementa manualmente la autenticación.
</Warning>

## Próximos pasos

<Card title="Introducción a la autenticación" icon="lock" href="/es/authentication">
  Aprende con más detalle la autenticación en Laravel, incluida la fachada `Auth` y la protección de rutas.
</Card>


## Related topics

- [Laravel Fortify y los starter kits](/es/advanced/fortify.md)
- [Cómo crear un starter kit de Laravel](/es/advanced/starter-kit-creation.md)
- [Laravel Console Starter](/es/packages/laravel-console-starter/index.md)
- [Laravel Maestro — Orquestador de desarrollo de starter kits](/es/blog/maestro-introduction.md)
- [Laravel Chisel — Biblioteca de scripts de post-instalación para starter kits](/es/blog/chisel-introduction.md)