Laravel React Starter Kit

https://github.com/laravel/react-starter-kit
Admin
The Laravel + React Starter Kit provides a robust, modern starting point for building Laravel...
Tokens:52,252
Snippets:402
Trust Score:9.7
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Example: Using useTwoFactorAuth in a component

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Shows a Setup2FA component that fetches setup data on mount and renders the QR code SVG or a loading message with errors. Uses the useTwoFactorAuth hook and OTP_MAX_LENGTH import.

```tsx
import { useTwoFactorAuth, OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';

function Setup2FA() {
    const { fetchSetupData, hasSetupData, qrCodeSvg, manualSetupKey, errors } = useTwoFactorAuth();

    useEffect(() => {
        void fetchSetupData();
    }, [fetchSetupData]);

    return hasSetupData
        ? <div dangerouslySetInnerHTML={{ __html: qrCodeSvg ?? '' }} />
        : <p>Loading setup… {errors.join(', ')}</p>;
}
```

--------------------------------

### GET /

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Documentation for the GET / endpoint that serves the welcome page.

```APIDOC
## GET /

### Description
Returns the welcome page as an Inertia page or HTML on full page load. This is the public home page of the application.

### Method
GET

### Endpoint
/

### Parameters
None

### Response
#### Success Response (200)
- **Inertia page** - The `welcome` page component.

#### Response Example
```html
<!-- Inertia page response or full HTML -->
```
```

--------------------------------

### useClipboard usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Example of using the useClipboard hook to copy text and handle success or failure.

```tsx
const [copiedText, copy] = useClipboard();

const handleCopy = async () => {
    const ok = await copy('secret-code-123');
    if (ok) console.log('Copied:', copiedText);
    else console.warn('Copy failed');
};
```

--------------------------------

### Validation example for profile update

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-controllers.md

Example validation rules for the update action. Shows required name and email fields with basic constraints.

```php
// Example: submit via Inertia form
$request->validate(['name' => 'required|string|max:255', 'email' => 'required|email']);
```

--------------------------------

### Example usage of useAppearance in a ThemeToggle component

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Example showing how to use the useAppearance hook in a React component to toggle between light and dark themes.

```tsx
import { useAppearance } from '@/hooks/use-appearance';

function ThemeToggle() {
    const { appearance, resolvedAppearance, updateAppearance } = useAppearance();
    return (
        <button onClick={() => updateAppearance(resolvedAppearance === 'dark' ? 'light' : 'dark')}>
            Current: {appearance}
        </button>
    );
}
```

--------------------------------

### UserFactory usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-model.md

Shows how to create users with the factory, including unverified and two-factor enabled states.

```php
use App\Models\User;

$user = User::factory()->create(['email' => 'test@example.com']);
$unverified = User::factory()->unverified()->create();
$twoFactorUser = User::factory()->withTwoFactor()->create();
```

--------------------------------

### useInitials usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Example of using the useInitials hook to get initials for a name. The returned function is called with 'Ada Lovelace' and returns 'AL'.

```TypeScript
const getInitials = useInitials();
getInitials('Ada Lovelace'); // "AL"
```

--------------------------------

### toUrl usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-utils.md

Example of using the `toUrl` function with a Wayfinder-generated route helper.

```tsx
import { toUrl } from '@/lib/utils';
import { dashboard } from '@/routes';

const href: string = toUrl(dashboard()); // dashboard() returns a UrlMethodPair-ish object
```

--------------------------------

### GET /settings

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Redirects to the profile settings page.

```APIDOC
## GET /settings

### Description
Redirects to the profile settings page.

### Method
GET

### Endpoint
/settings

### Response
#### Success Response (302)
Redirect to /settings/profile

#### Response Example
No response body.
```

--------------------------------

### GET /settings/appearance — appearance.edit

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines the GET /settings/appearance route that renders the appearance settings page via Inertia. Requires authentication and verified email.

```php
Route::inertia('settings/appearance', 'settings/appearance')->name('appearance.edit');
```

--------------------------------

### useCurrentUrl usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Example of using the useCurrentUrl hook to conditionally apply styles based on the current URL.

```tsx
const { currentUrl, isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
const style = whenCurrentUrl('/dashboard', 'font-bold', 'text-muted');
```

--------------------------------

### GET /settings/appearance

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Displays the appearance settings page.

```APIDOC
## GET /settings/appearance

### Description
Displays the appearance settings page.

### Method
GET

### Endpoint
/settings/appearance

### Response
#### Success Response (200)
Inertia page `settings/appearance`

#### Response Example
No response body.
```

--------------------------------

### CreateNewUser usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-actions.md

Shows how to invoke the CreateNewUser action via the container. Expects input array with keys name, email, password, and password_confirmation. Returns an App\Models\User instance.

```php
$action = app(CreateNewUser::class);
$user = $action->create([
    'name' => 'Ada Lovelace',
    'email' => 'ada@example.com',
    'password' => 'StrongPassw0rd!',
    'password_confirmation' => 'StrongPassw0rd!',
]);
```

--------------------------------

### Command signature and description

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-bootstrap-middleware-providers-console.md

Defines the `install:features` command signature with an optional `--answers` option and a description. The `--answers` option accepts a JSON string to skip interactive prompts.

```php
protected $signature = 'install:features
    {--answers= : JSON string of answers to skip interactive prompts}';

protected $description = 'Choose which starter kit features to keep';
```

--------------------------------

### Route::inertia for home page

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines the GET / route that renders the Inertia 'welcome' page. Public, no auth required, returns 200.

```php
Route::inertia('/', 'welcome')->name('home');
```

--------------------------------

### TwoFactorSecretKey type for manual setup secret

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/types.md

Defines the TwoFactorSecretKey type containing the manual setup secret. Used by useTwoFactorAuth.fetchSetupKey which casts the response as { secretKey }.

```typescript
export type TwoFactorSecretKey = {
    secretKey: string;
};
```

--------------------------------

### GET /up

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Health check endpoint for the application.

```APIDOC
## GET /up

### Description
Performs a health check on the application.

### Method
GET

### Endpoint
/up

### Parameters
None

### Response
#### Success Response (200)
Minimal health-check response (Laravel default).

```

--------------------------------

### GET /settings/security — security.edit

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines the GET /settings/security route that renders the security settings page. Requires authentication, verified email, and password confirmation (RequirePassword middleware). Returns an Inertia page with props for two-factor management, passkeys, password rules, and confirmation status.

```php
Route::get('settings/security', [SecurityController::class, 'edit'])
    ->middleware(RequirePassword::class)
    ->name('security.edit');
```

--------------------------------

### GET /.well-known/passkey-endpoints

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Returns the passkey enrollment and management endpoints.

```APIDOC
## GET /.well-known/passkey-endpoints

### Description
Returns the passkey enrollment and management endpoints.

### Method
GET

### Endpoint
/.well-known/passkey-endpoints

### Response
#### Success Response (200)
JSON `{ "enroll": "<url>", "manage": "<url>" }` (both point to `security.edit`)

#### Response Example
{
  "enroll": "<url>",
  "manage": "<url>"
}
```

--------------------------------

### Redirect /settings to /settings/profile

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines a GET /settings route that redirects to /settings/profile. Returns a 302 redirect and requires authentication.

```php
Route::redirect('settings', '/settings/profile');
```

--------------------------------

### GET /dashboard

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Documentation for the GET /dashboard endpoint that serves the dashboard page.

```APIDOC
## GET /dashboard

### Description
Returns the dashboard page as an Inertia page. This route requires authentication and email verification.

### Method
GET

### Endpoint
/dashboard

### Parameters
None

### Response
#### Success Response (200)
- **Inertia page** - The `dashboard` page component.

#### Redirects
- **302** - To `login` if the user is a guest.
- **302** - To `verification.notice` if the user is unverified.
```

--------------------------------

### GET /user/two-factor-qr-code

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Returns the QR code data for setting up two-factor authentication.

```APIDOC
## GET /user/two-factor-qr-code

### Description
Returns the QR code data for two-factor authentication.

### Method
GET

### Endpoint
/user/two-factor-qr-code

### Parameters
None

### Response
#### Success Response (200)
Returns QR data (SVG + URL shape consumed as `TwoFactorSetupData`).

```

--------------------------------

### GET /email/verify

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Shows the email verification notice.

```APIDOC
## GET /email/verify

### Description
Displays the email verification notice.

### Method
GET

### Endpoint
/email/verify

### Parameters
None

### Response
Success response (Laravel default).

```

--------------------------------

### GET /user/two-factor-authentication

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Shows the two-factor authentication challenge form.

```APIDOC
## GET /user/two-factor-authentication

### Description
Displays the two-factor authentication challenge.

### Method
GET

### Endpoint
/user/two-factor-authentication

### Parameters
None

### Response
Success response (Laravel default).

```

--------------------------------

### cn usage example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-utils.md

Example of using the `cn` function to conditionally apply Tailwind classes.

```tsx
import { cn } from '@/lib/utils';

<div className={cn('base-class', isActive && 'bg-muted', 'p-4')} />
```

--------------------------------

### GET /user/confirmed-password

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Shows the password confirmation form.

```APIDOC
## GET /user/confirmed-password

### Description
Displays the password confirmation form.

### Method
GET

### Endpoint
/user/confirmed-password

### Parameters
None

### Response
Success response (Laravel default).

```

--------------------------------

### GET /settings/security

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-controllers.md

Displays the security settings page, including two-factor authentication status and passkey management, if enabled.

```APIDOC
## GET /settings/security

### Description
Displays the security settings page, including two-factor authentication status and passkey management, if enabled.

### Method
GET

### Endpoint
/settings/security

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **canManageTwoFactor** (bool) - Whether two-factor authentication is enabled.
- **canManagePasskeys** (bool) - Whether passkeys are enabled.
- **passkeys** (array) - List of passkey records, each with id, name, authenticator, created_at_diff, last_used_at_diff.
- **passwordRules** (string) - Password validation rules.
- **twoFactorEnabled** (bool) - Whether the user has two-factor authentication enabled (if manageable).
- **requiresConfirmation** (bool) - Whether two-factor confirmation is required (if manageable).

#### Response Example
{
  "canManageTwoFactor": true,
  "canManagePasskeys": true,
  "passkeys": [
    {
      "id": 1,
      "name": "My Passkey",
      "authenticator": "platform",
      "created_at_diff": "3 days ago",
      "last_used_at_diff": "1 day ago"
    }
  ],
  "passwordRules": "min:8|regex:/[a-z]/|regex:/[A-Z]/|regex:/[0-9]/",
  "twoFactorEnabled": false,
  "requiresConfirmation": true
}
```

--------------------------------

### GET /reset-password/{token}

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Shows the password reset form with the provided token.

```APIDOC
## GET /reset-password/{token}

### Description
Displays the password reset form.

### Method
GET

### Endpoint
/reset-password/{token}

### Parameters
#### Path Parameters
- **token** (string) - Required - Password reset token

### Response
Success response (Laravel default).

```

--------------------------------

### GET /user/two-factor-secret-key

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Returns the two-factor secret key.

```APIDOC
## GET /user/two-factor-secret-key

### Description
Returns the two-factor secret key.

### Method
GET

### Endpoint
/user/two-factor-secret-key

### Parameters
None

### Response
#### Success Response (200)
Returns `{ secretKey }` (`TwoFactorSecretKey`).

```

--------------------------------

### POST /user/confirmed-two-factor-authentication

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Confirms the two-factor authentication setup with a code.

```APIDOC
## POST /user/confirmed-two-factor-authentication

### Description
Confirms two-factor authentication setup.

### Method
POST

### Endpoint
/user/confirmed-two-factor-authentication

### Parameters
#### Request Body
- **code** (string) - Required - Two-factor code

### Response
Success response (Laravel default).

```

--------------------------------

### GET /user/two-factor-recovery-codes

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Returns the two-factor recovery codes.

```APIDOC
## GET /user/two-factor-recovery-codes

### Description
Returns the two-factor recovery codes.

### Method
GET

### Endpoint
/user/two-factor-recovery-codes

### Parameters
None

### Response
#### Success Response (200)
Returns an array of recovery-code strings.

```

--------------------------------

### PasswordUpdateRequest validation example

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-requests.md

Shows how validation is triggered when the request is passed to a controller update method.

```php
$request->validate(); // triggers rules() when passed to controller update
```

--------------------------------

### GET /email/verify/{id}/{hash}

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Verifies the user's email address using the provided ID and hash.

```APIDOC
## GET /email/verify/{id}/{hash}

### Description
Verifies the user's email address.

### Method
GET

### Endpoint
/email/verify/{id}/{hash}

### Parameters
#### Path Parameters
- **id** (string) - Required - User ID
- **hash** (string) - Required - Verification hash

### Response
Success response (Laravel default).

```

--------------------------------

### GET /.well-known/passkey-endpoints — well-known.passkeys

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines a public route that returns JSON with enroll and manage URLs pointing to the security.edit route. No authentication required. Returns application/json with a 200 status.

```php
Route::get('.well-known/passkey-endpoints', function () {
    return response()->json([
        'enroll' => route('security.edit'),
        'manage' => route('security.edit'),
    ]);
})->name('well-known.passkeys');
```

--------------------------------

### Route group for dashboard with auth and verified middleware

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines the GET /dashboard route inside a group with 'auth' and 'verified' middleware. Guests are redirected to login, unverified users to verification.notice.

```php
Route::middleware(['auth', 'verified'])->group(function () {
    Route::inertia('dashboard', 'dashboard')->name('dashboard');
});
```

--------------------------------

### Route for profile.edit

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-controllers.md

Route registration for the edit action. Maps GET /settings/profile to ProfileController@edit with the name profile.edit.

```php
Route::get('settings/profile', [ProfileController::class, 'edit'])->name('profile.edit');
```

--------------------------------

### GET /settings/profile

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-controllers.md

Displays the profile edit page. This endpoint is handled by the ProfileController's edit method and requires authentication.

```APIDOC
## GET /settings/profile

### Description
Displays the profile edit page. This endpoint is handled by the ProfileController's edit method and requires authentication.

### Method
GET

### Endpoint
/settings/profile

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
No request body required.

### Response
#### Success Response (200)
- **mustVerifyEmail** (bool) - True when the authenticated user must verify their email.
- **status** (string|null) - Session status value, if any.

#### Response Example
{
  "mustVerifyEmail": false,
  "status": null
}
```

--------------------------------

### Decode install:features --answers JSON with error handling

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/errors.md

Decodes the `--answers` option as JSON with `JSON_THROW_ON_ERROR`. Throws `JsonException` when the option is not valid JSON, e.g. `--answers='{invalid}'`; pass well-formed JSON like `--answers='{"auth_features":["2fa"]}'`.

```php
$providedAnswers = $this->option('answers') === null
    ? []
    : json_decode((string) $this->option('answers'), true, 512, JSON_THROW_ON_ERROR);
```

--------------------------------

### FortifyServiceProvider register and boot methods

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-bootstrap-middleware-providers-console.md

The register method is empty. The boot method calls three private configuration methods: configureActions, configureViews, and configureRateLimiting.

```php
public function register(): void
{
    //
}

public function boot(): void
{
    $this->configureActions();
    $this->configureViews();
    $this->configureRateLimiting();
}
```

--------------------------------

### initializeTheme()

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Initializes the theme on the client by seeding localStorage and cookie, applying the theme, and attaching a media query listener. No-op on the server.

```APIDOC
## initializeTheme()

### Description
Initializes the theme on the client by seeding localStorage and cookie, applying the theme, and attaching a media query listener. No-op on the server.

### Method
Function

### Signature
```tsx
export function initializeTheme(): void
```

### Returns
- `void`

### Behavior
- On the server: no-op.
- On the client: seeds `localStorage['appearance']` and the `appearance` cookie to `'system'` when unset, reads the stored appearance, applies the theme (`applyTheme`), and attaches a `change` listener to `(prefers-color-scheme: dark)` media query (`handleSystemThemeChange`).

### Source
`use-appearance.tsx:73-88`
```

--------------------------------

### DatabaseSeeder run() method

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-model.md

Creates a single user named 'Test User' with email 'test@example.com' and password 'password' from the factory default.

```php
class DatabaseSeeder extends Seeder
{
    use WithoutModelEvents;

    public function run(): void
    {
        User::factory()->create([
            'name' => 'Test User',
            'email' => 'test@example.com',
        ]);
    }
}
```

--------------------------------

### GET/POST /register

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Registers a new user with the provided details.

```APIDOC
## GET/POST /register

### Description
Registers a new user.

### Method
GET, POST

### Endpoint
/register

### Parameters
#### Request Body
- **name** (string) - Required - User's name
- **email** (string) - Required - User's email
- **password** (string) - Required - User's password
- **password_confirmation** (string) - Required - Password confirmation

### Response
Success response (Laravel default).

```

--------------------------------

### GET/POST /login

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Logs in a user with email and password.

```APIDOC
## GET/POST /login

### Description
Authenticates a user.

### Method
GET, POST

### Endpoint
/login

### Parameters
#### Request Body
- **email** (string) - Required - User's email
- **password** (string) - Required - User's password
- **remember** (boolean) - Optional - Remember the user

### Response
Success response (Laravel default).

### Rate Limit
- **login** limiter: 5/min

```

--------------------------------

### Welcome page component signature

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-pages.md

The welcome page component takes no props and reads the auth state from usePage().props to render navigation links. It is rendered without a layout.

```tsx
export default function Welcome()
```

--------------------------------

### CreateNewUser class implementation

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-actions.md

Implements Laravel\Fortify\Contracts\CreatesNewUsers and uses PasswordValidationRules and ProfileValidationRules. The create method validates input with profile rules and password rules, then creates a User with name, email, and password. Throws ValidationException on failure with error keys for name, email, password, and password_confirmation. Email uniqueness is enforced.

```php
class CreateNewUser implements CreatesNewUsers
{
    use PasswordValidationRules, ProfileValidationRules;

    public function create(array $input): User
    {
        Validator::make($input, [
            ...$this->profileRules(),
            'password' => $this->passwordRules(),
        ])->validate();

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

--------------------------------

### GET /forgot-password

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Shows the forgot password form.

```APIDOC
## GET /forgot-password

### Description
Displays the password reset request form.

### Method
GET

### Endpoint
/forgot-password

### Parameters
None

### Response
Success response (Laravel default).

```

--------------------------------

### NavUser

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-components.md

Renders a user dropdown menu with user info and menu content. Returns null if no user is authenticated.

```APIDOC
## NavUser

### Description
Renders a user dropdown menu with user info and menu content. Returns null if no user is authenticated.

### Props
None.

### Source
`resources/js/components/nav-user.tsx`
```

--------------------------------

### bootstrap/providers.php - Register Service Providers

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-bootstrap-middleware-providers-console.md

Registers the AppServiceProvider and FortifyServiceProvider in the Laravel application. This file is the central place to list service providers that should be loaded.

```php
return [
    AppServiceProvider::class,
    FortifyServiceProvider::class,
];
```

--------------------------------

### useAppearance()

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Returns the current appearance state and a function to update it. Provides appearance, resolvedAppearance, and updateAppearance.

```APIDOC
## useAppearance()

### Description
Returns the current appearance state and a function to update it. Provides appearance, resolvedAppearance, and updateAppearance.

### Method
Hook

### Signature
```tsx
export function useAppearance(): UseAppearanceReturn
```

### Returns
- `appearance: Appearance` — `'light' | 'dark' | 'system'` (source of truth in a module-level `currentAppearance` variable, read via `useSyncExternalStore`)
- `resolvedAppearance: ResolvedAppearance` — `'light' | 'dark'` derived via `isDarkMode`
- `updateAppearance(mode: Appearance): void` — stores to `localStorage['appearance']`, writes the `appearance` cookie (365-day max-age, `path=/`, `SameSite=Lax`), applies the theme (`document.documentElement.classList.toggle('dark', ...)` and `colorScheme` style), and notifies subscribers

### SSR Behavior
Server snapshot returns `'system'`.

### Example
```tsx
import { useAppearance } from '@/hooks/use-appearance';

function ThemeToggle() {
    const { appearance, resolvedAppearance, updateAppearance } = useAppearance();
    return (
        <button onClick={() => updateAppearance(resolvedAppearance === 'dark' ? 'light' : 'dark')}>
            Current: {appearance}
        </button>
    );
}
```

### Source
`use-appearance.tsx:90-113`
```

--------------------------------

### AppServiceProvider class implementation

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-bootstrap-middleware-providers-console.md

The AppServiceProvider class with register, boot, and configureDefaults methods. register is a no-op, boot calls configureDefaults, and configureDefaults sets CarbonImmutable as the date class, prohibits destructive commands in production, and sets password validation defaults.

```php
class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        //
    }

    public function boot(): void
    {
        $this->configureDefaults();
    }

    protected function configureDefaults(): void
    {
        Date::use(CarbonImmutable::class);

        DB::prohibitDestructiveCommands(
            app()->isProduction(),
        );

        Password::defaults(fn (): ?Password => app()->isProduction()
            ? Password::min(12)
                ->mixedCase()
                ->letters()
                ->numbers()
                ->symbols()
                ->uncompromised()
            : null,
        );
    }
}
```

--------------------------------

### bootstrap/app.php - Application factory configuration

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-bootstrap-middleware-providers-console.md

Configures the Laravel application with routing, middleware, and exception handling. Sets basePath to the project root, web and console routes, health endpoint at /up, cookie encryption exclusions for 'appearance' and 'sidebar_state', appends three middleware to the web group, and renders exceptions as JSON for API requests.

```php
return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        $middleware->encryptCookies(except: ['appearance', 'sidebar_state']);

        $middleware->web(append: [
            HandleAppearance::class,
            HandleInertiaRequests::class,
            AddLinkHeadersForPreloadedAssets::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        $exceptions->shouldRenderJsonWhen(
            fn (Request $request) => $request->is('api/*') || $request->expectsJson(),
        );
    })->create();
```

--------------------------------

### useAppearance and initializeTheme type definitions and function signatures

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Defines the types and function signatures for the useAppearance hook and initializeTheme function. The initializeTheme function is a no-op on the server and seeds localStorage and cookie on the client. useAppearance returns the current appearance state and an update function.

```tsx
export type ResolvedAppearance = 'light' | 'dark';
export type Appearance = ResolvedAppearance | 'system';

export type UseAppearanceReturn = {
    readonly appearance: Appearance;
    readonly resolvedAppearance: ResolvedAppearance;
    readonly updateAppearance: (mode: Appearance) => void;
};

export function initializeTheme(): void { ... }

export function useAppearance(): UseAppearanceReturn { ... }
```

--------------------------------

### useClipboard

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Returns a tuple containing the last copied text and a copy function that writes to the clipboard.

```APIDOC
## useClipboard

### Description
Returns a tuple `[CopiedValue, CopyFn]` where the first element is the last successfully copied text (or `null`) and the second is a `copy` function that writes to the clipboard.

### Signature
```ts
export function useClipboard(): UseClipboardReturn;
```

### Returns
- **CopiedValue** (`string | null`) - The last successfully copied text, or `null` if nothing has been copied yet.
- **CopyFn** (`(text: string) => Promise<boolean>`) - Writes the given text to `navigator.clipboard`. Returns `true` on success (and stores the text), `false` when the clipboard is unsupported or the write rejects (with `console.warn` in both failure paths).

### Example
```tsx
const [copiedText, copy] = useClipboard();

const handleCopy = async () => {
    const ok = await copy('secret-code-123');
    if (ok) console.log('Copied:', copiedText);
    else console.warn('Copy failed');
};
```
```

--------------------------------

### NavMain

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-components.md

Renders a sidebar group with navigation menu buttons. Highlights the current URL.

```APIDOC
## NavMain

### Description
Renders a sidebar group with navigation menu buttons. Highlights the current URL.

### Props
- **items** (NavItem[]) - Required - Navigation items to render.

### Source
`resources/js/components/nav-main.tsx`
```

--------------------------------

### initializeTheme function signature

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

The initializeTheme function signature. It returns void and is used to initialize the theme on the client.

```tsx
export function initializeTheme(): void
```

--------------------------------

### resources/js/app.tsx - Inertia entry

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-entry-and-layouts.md

Configures the Inertia React app with dynamic layouts based on page names, wraps the app in TooltipProvider and Toaster, and initializes the theme. The appName is read from VITE_APP_NAME with fallback 'Laravel'.

```tsx
import { createInertiaApp } from '@inertiajs/react';
import { Toaster } from '@/components/ui/sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import { initializeTheme } from '@/hooks/use-appearance';
import AppLayout from '@/layouts/app-layout';
import AuthLayout from '@/layouts/auth-layout';
import SettingsLayout from '@/layouts/settings/layout';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

void createInertiaApp({
    title: (title) => (title ? `${title} - ${appName}` : appName),
    layout: (name) => {
        switch (true) {
            case name === 'welcome':
                return null;
            case name.startsWith('auth/'):
                return AuthLayout;
            case name.startsWith('settings/'):
                return [AppLayout, SettingsLayout];
            default:
                return AppLayout;
        }
    },
    strictMode: true,
    withApp(app) {
        return (
            <TooltipProvider delayDuration={0}>
                {app}
                <Toaster />
            </TooltipProvider>
        );
    },
    progress: {
        color: '#4B5563',
    },
});

initializeTheme();
```

--------------------------------

### Dashboard page component signature

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-pages.md

The dashboard page component takes no props and renders placeholder panels. It exports a layout with breadcrumbs and is accessible via GET /dashboard with auth and verified middleware.

```tsx
export default function Dashboard()
```

--------------------------------

### useInitials

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Returns a function that computes initials from a full name. Handles empty names, single-word names, and multi-word names with Unicode safety.

```APIDOC
## useInitials

### Description
Returns a function that computes initials from a full name. Handles empty names, single-word names, and multi-word names with Unicode safety.

### Signature
```tsx
export type GetInitialsFn = (fullName: string) => string;
export function useInitials(): GetInitialsFn
```

### Returns
- `GetInitialsFn` — `(fullName: string) => string`

### Behavior
- Empty name → `''`
- Single word → first character uppercased
- Multi-word → first character of first and last words uppercased
- Uses `Array.from` for Unicode safety

### Example
```tsx
const getInitials = useInitials();
getInitials('Ada Lovelace'); // "AL"
```

### Source
`use-initials.tsx:9-23`
```

--------------------------------

### ProfileController edit method signature

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-controllers.md

Method signature for the edit action in ProfileController. Renders the settings/profile page with props mustVerifyEmail and status. Route: GET /settings/profile (name profile.edit), middleware auth.

```php
public function edit(Request $request): Response
```

--------------------------------

### Fortify action registration in configureActions

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-bootstrap-middleware-providers-console.md

Registers Fortify strategy actions for resetting user passwords and creating new users using the specified classes.

```php
Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
Fortify::createUsersUsing(CreateNewUser::class);
```

--------------------------------

### useTwoFactorAuth

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

A React hook that manages two-factor authentication setup data, including QR code, secret key, and recovery codes. It provides methods to fetch these data and clear them, and exposes an OTP length constant.

```APIDOC
## useTwoFactorAuth

### Description
A React hook that manages two-factor authentication setup data, including QR code, secret key, and recovery codes. It provides methods to fetch these data and clear them, and exposes an OTP length constant.

### Signature
```ts
export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => { ... }
```

### Constants
- **OTP_MAX_LENGTH** (number) - The OTP digit length used by 2FA forms. Value: `6`.

### Returns
`UseTwoFactorAuthReturn` object with the following properties:

- **qrCodeSvg** (string | null) - SVG string from the two-factor QR-code endpoint.
- **manualSetupKey** (string | null) - Secret key from `two-factor.secret-key`.
- **recoveryCodesList** (string[]) - Recovery codes from `two-factor.recovery-codes`.
- **hasSetupData** (boolean) - `true` when both `qrCodeSvg` and `manualSetupKey` are non-null.
- **errors** (string[]) - Accumulated fetch-error messages.
- **clearErrors** (() => void) - Clears the `errors` array.
- **clearSetupData** (() => void) - Clears QR code, manual key, and errors.
- **clearTwoFactorAuthData** (() => void) - Clears QR code, manual key, errors, and recovery codes.
- **fetchQrCode** (() => Promise<void>) - Fetches the QR code; on failure appends `'Failed to fetch QR code'` to errors and sets `qrCodeSvg` to `null`.
- **fetchSetupKey** (() => Promise<void>) - Fetches the secret key; on failure appends `'Failed to fetch a setup key'` to errors.
- **fetchRecoveryCodes** (() => Promise<void>) - Fetches recovery codes; on failure appends `'Failed to fetch recovery codes'` to errors.
- **fetchSetupData** (() => Promise<void>) - Runs `Promise.all([fetchQrCode(), fetchSetupKey()])`; on any rejection clears both.

### Implementation Details
Uses `useHttp().submit(...)` from `@inertiajs/react` against the Wayfinder `two-factor` route helpers (`qrCode()`, `secretKey()`, `recoveryCodes()`).

### Source
`resources/js/hooks/use-two-factor-auth.ts` (lines 20-98)

### Example
```tsx
import { useTwoFactorAuth, OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';

function Setup2FA() {
    const { fetchSetupData, hasSetupData, qrCodeSvg, manualSetupKey, errors } = useTwoFactorAuth();

    useEffect(() => {
        void fetchSetupData();
    }, [fetchSetupData]);

    return hasSetupData
        ? <div dangerouslySetInnerHTML={{ __html: qrCodeSvg ?? '' }} />
        : <p>Loading setup… {errors.join(', ')}</p>;
}
```
```

--------------------------------

### AppContent

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-components.md

Content area component that adapts to the app variant. For 'sidebar' it renders SidebarInset; for 'header' it renders a main element with centered max-width layout.

```APIDOC
## AppContent

### Description
Content area component that adapts to the app variant. For 'sidebar' it renders SidebarInset; for 'header' it renders a main element with centered max-width layout.

### Props
- **variant** (AppVariant) - Optional, default 'sidebar' - Determines the content layout.
- **...props** (React.ComponentProps<'main'>) - Optional - Passed to the underlying element.

### Source
`resources/js/components/app-content.tsx`
```

--------------------------------

### InputOTP family

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-ui-components.md

A set of components for building OTP input fields: InputOTP, InputOTPGroup, InputOTPSlot, and InputOTPSeparator. InputOTP extends the input-otp OTPInput component, while the others are presentational wrappers.

```APIDOC
## InputOTP family

### Description
A set of components for building OTP input fields: `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, and `InputOTPSeparator`. `InputOTP` extends the `input-otp`'s `OTPInput` component, while the others are presentational wrappers.

### Import
tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/ui/input-otp';


### Components

#### InputOTP
- Extends: `input-otp`'s `OTPInput`
- Accepts all `OTPInput` props (`maxLength`, `value`, `onChange`, `pattern`, etc.) plus `containerClassName`.

#### InputOTPGroup
- Extends: `<div>`
- Groups slots.

#### InputOTPSlot
- Extends: `<div>` + `{ index: number }`
- Single digit slot; renders char + fake caret.

#### InputOTPSeparator
- Extends: `<div>`
- Renders a `Minus` separator with `role="separator"`.

### Example
tsx
<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

```

--------------------------------

### PUT /settings/password — user-password.update

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines the PUT /settings/password route to update the user's password. Requires authentication, verified email, and throttling (6 attempts per minute). Validates current_password, password (using Password::default() and confirmed), and password_confirmation. On success redirects back and flashes a success toast. On validation failure returns 422 with errors; returns 429 when throttled.

```php
Route::put('settings/password', [SecurityController::class, 'update'])
    ->middleware('throttle:6,1')
    ->name('user-password.update');
```

--------------------------------

### SidebarProvider

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-ui-components.md

Provides sidebar state and context to child components. Supports controlled and uncontrolled open state, persists state to a cookie, and listens for the 'b' keyboard shortcut to toggle.

```APIDOC
## SidebarProvider

### Description
Provides sidebar state and context to child components. Supports controlled and uncontrolled open state, persists state to a cookie, and listens for the 'b' keyboard shortcut to toggle.

### Signature
```tsx
function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
})
```

### Parameters
- **defaultOpen** (boolean) - Optional - Default: `true` - Uncontrolled initial open state
- **open** (boolean) - Optional - Controlled open state
- **onOpenChange** ((open: boolean) => void) - Optional - Controlled change handler
- **className** / **style** - Optional - Root element styling
- **children** (ReactNode) - Optional - Sidebar tree

### Behavior
- Persists open state to `sidebar_state` cookie with 7-day max age.
- Listens for the `b` keyboard shortcut to toggle.
- Derives `state` as `'expanded' | 'collapsed'`.
```

--------------------------------

### useFlashToast

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Registers an Inertia router listener for flash toast messages and displays them using sonner. Returns void.

```APIDOC
## useFlashToast

### Description
Registers an Inertia `router.on('flash', ...)` listener once. Reads `event.detail?.flash?.toast` as a `FlashToast` (`{ type, message }`) and calls `toast[data.type](data.message)` (sonner). No-op when no toast data exists. Cleanup unregisters the listener.

### Signature
```ts
export function useFlashToast(): void
```

### Returns
- `void`

### Behavior
- Registers an Inertia `router.on('flash', ...)` listener once.
- Reads `event.detail?.flash?.toast` as a `FlashToast` (`{ type, message }`).
- Calls `toast[data.type](data.message)` (sonner).
- No-op when no toast data exists.
- Cleanup unregisters the listener.

### Notes
- Consumes flashes produced by `Inertia::flash('toast', ['type' => ..., 'message' => ...])` in PHP controllers.

### Source
`use-flash-toast.ts:6-18`
```

--------------------------------

### User model class definition with attributes and traits

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-model.md

Defines the User model extending Authenticatable, implementing MustVerifyEmail and PasskeyUser. Uses HasFactory, Notifiable, PasskeyAuthenticatable, and TwoFactorAuthenticatable traits. Includes Fillable and Hidden attributes and a casts method for email_verified_at, password, and two_factor_confirmed_at.

```php
/**
 * @property int $id
 * @property string $name
 * @property string $email
 * @property Carbon|null $email_verified_at
 * @property string $password
 * @property string|null $two_factor_secret
 * @property string|null $two_factor_recovery_codes
 * @property Carbon|null $two_factor_confirmed_at
 * @property string|null $remember_token
 * @property Carbon|null $created_at
 * @property Carbon|null $updated_at
 */
#[Fillable(['name', 'email', 'password'])]
#[Hidden(['password', 'two_factor_secret', 'two_factor_recovery_codes', 'remember_token'])]
class User extends Authenticatable implements MustVerifyEmail, PasskeyUser
{
    /** @use HasFactory<UserFactory> */
    use HasFactory, Notifiable, PasskeyAuthenticatable, TwoFactorAuthenticatable;

    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
            'two_factor_confirmed_at' => 'datetime',
        ];
    }
}
```

--------------------------------

### AppSidebar

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-components.md

Renders the sidebar navigation for the sidebar variant. Includes logo, main navigation, footer links, and user menu.

```APIDOC
## AppSidebar

### Description
Renders the sidebar navigation for the sidebar variant. Includes logo, main navigation, footer links, and user menu.

### Props
None.

### Source
`resources/js/components/app-sidebar.tsx`
```

--------------------------------

### UserFactory definition method

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/php-model.md

Defines the default attributes for the User model, including a cached password and null two-factor fields.

```php
class UserFactory extends Factory
{
    protected static ?string $password;

    public function definition(): array
    {
        return [
            'name' => fake()->name(),
            'email' => fake()->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => static::$password ??= Hash::make('password'),
            'remember_token' => Str::random(10),
            'two_factor_secret' => null,
            'two_factor_recovery_codes' => null,
            'two_factor_confirmed_at' => null,
        ];
    }
}
```

--------------------------------

### Icon

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-ui-components.md

Renders a Lucide icon component. Accepts an optional iconNode and className. Returns null when iconNode is null or undefined.

```APIDOC
## Icon

### Description
Renders a Lucide icon component. Accepts an optional `iconNode` and `className`. Returns `null` when `iconNode` is `null` or `undefined`.

### Import
tsx
import { Icon } from '@/components/ui/icon';


### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `iconNode` | `LucideIcon \| null` | — | Lucide icon component; renders `null` when absent/null |
| `className` | `string` | — | Passed to the icon |

### Example
tsx
<Icon iconNode={SomeLucideIcon} className="h-4 w-4" />

```

--------------------------------

### Handle clipboard failure with useClipboard

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/errors.md

Checks the boolean return from the `copy` function to detect clipboard failures. If `navigator.clipboard` is unavailable or `writeText` rejects, `copy()` returns `false` and logs a warning; use the `ok` flag to show a fallback.

```tsx
const [, copy] = useClipboard();
const ok = await copy(text);
if (!ok) { /* show fallback */ }
```

--------------------------------

### useInitials hook signature and types

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-hooks.md

Returns a function that computes initials from a full name. Empty name returns '', single word returns first character uppercased, multi-word returns first character of first and last words uppercased. Uses Array.from for Unicode safety.

```TypeScript
export type GetInitialsFn = (fullName: string) => string;

export function useInitials(): GetInitialsFn { ... }
```

--------------------------------

### Login page component with props

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-pages.md

The login page accepts optional status and canResetPassword props. It submits a form to POST /login and optionally includes PasskeyVerify.

```tsx
type Props = {
    status?: string;
    canResetPassword: boolean;
};

export default function Login({ status, canResetPassword }: Props)
```

--------------------------------

### Define Artisan::command('inspire') in routes/console.php

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/endpoints.md

Defines a console command named 'inspire' that displays an inspiring quote using the Inspiring::quote() method. The command is registered in routes/console.php and can be run with 'php artisan inspire'.

```php
Artisan::command('inspire', function () {
    $this->comment(Inspiring::quote());
})->purpose('Display an inspiring quote');
```

--------------------------------

### UserInfo

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-components.md

Displays user avatar and name, optionally with email.

```APIDOC
## UserInfo

### Description
Displays user avatar and name, optionally with email.

### Props
- **user** (User) - Required - Authenticated user.
- **showEmail** (boolean) - Optional, default false - Whether to also render the user's email.

### Source
`resources/js/components/user-info.tsx`
```

--------------------------------

### Register page component with password rules prop

Source: https://github.com/laravel/react-starter-kit/blob/main/_autodocs/api-reference/react-pages.md

The register page accepts a passwordRules string prop and submits a form to POST /register.

```tsx
type Props = {
    passwordRules: string;
};

export default function Register({ passwordRules }: Props)
```
Tokens:
Raw