From 70d50b69352a28a342869756ccae570b9b0a932b Mon Sep 17 00:00:00 2001
From: Jess Archer <jess@jessarcher.com>
Date: Tue, 6 Sep 2022 00:26:39 +1000
Subject: [PATCH] [1.x] Remove "Breeze" component prefix (#179)

* Remove Breeze prefix from components

* Standardize layout components

* Rename components that conflict with HTML elements
---
 .../views/auth/confirm-password.blade.php     |  8 ++--
 .../views/auth/forgot-password.blade.php      |  8 ++--
 .../resources/views/auth/login.blade.php      | 12 +++---
 .../resources/views/auth/register.blade.php   | 20 ++++-----
 .../views/auth/reset-password.blade.php       | 16 +++----
 .../views/auth/verify-email.blade.php         |  4 +-
 ...{label.blade.php => input-label.blade.php} |  0
 ...ton.blade.php => primary-button.blade.php} |  0
 .../{input.blade.php => text-input.blade.php} |  0
 .../Components/{Label.jsx => InputLabel.jsx}  |  2 +-
 .../{Button.jsx => PrimaryButton.jsx}         |  2 +-
 .../Components/{Input.jsx => TextInput.jsx}   |  2 +-
 ...henticated.jsx => AuthenticatedLayout.jsx} |  0
 .../js/Layouts/{Guest.jsx => GuestLayout.jsx} |  0
 .../js/Pages/Auth/ConfirmPassword.jsx         | 20 ++++-----
 .../js/Pages/Auth/ForgotPassword.jsx          | 16 +++----
 .../resources/js/Pages/Auth/Login.jsx         | 24 +++++------
 .../resources/js/Pages/Auth/Register.jsx      | 32 +++++++-------
 .../resources/js/Pages/Auth/ResetPassword.jsx | 28 ++++++-------
 .../resources/js/Pages/Auth/VerifyEmail.jsx   | 10 ++---
 .../resources/js/Pages/Dashboard.jsx          |  6 +--
 .../Components/{Label.vue => InputLabel.vue}  |  0
 .../{Button.vue => PrimaryButton.vue}         |  0
 .../Components/{Input.vue => TextInput.vue}   |  0
 ...henticated.vue => AuthenticatedLayout.vue} | 32 +++++++-------
 .../js/Layouts/{Guest.vue => GuestLayout.vue} |  4 +-
 .../js/Pages/Auth/ConfirmPassword.vue         | 24 +++++------
 .../js/Pages/Auth/ForgotPassword.vue          | 24 +++++------
 .../resources/js/Pages/Auth/Login.vue         | 34 +++++++--------
 .../resources/js/Pages/Auth/Register.vue      | 42 +++++++++----------
 .../resources/js/Pages/Auth/ResetPassword.vue | 36 ++++++++--------
 .../resources/js/Pages/Auth/VerifyEmail.vue   | 12 +++---
 .../resources/js/Pages/Dashboard.vue          |  6 +--
 33 files changed, 212 insertions(+), 212 deletions(-)
 rename stubs/default/resources/views/components/{label.blade.php => input-label.blade.php} (100%)
 rename stubs/default/resources/views/components/{button.blade.php => primary-button.blade.php} (100%)
 rename stubs/default/resources/views/components/{input.blade.php => text-input.blade.php} (100%)
 rename stubs/inertia-react/resources/js/Components/{Label.jsx => InputLabel.jsx} (72%)
 rename stubs/inertia-react/resources/js/Components/{Button.jsx => PrimaryButton.jsx} (83%)
 rename stubs/inertia-react/resources/js/Components/{Input.jsx => TextInput.jsx} (96%)
 rename stubs/inertia-react/resources/js/Layouts/{Authenticated.jsx => AuthenticatedLayout.jsx} (100%)
 rename stubs/inertia-react/resources/js/Layouts/{Guest.jsx => GuestLayout.jsx} (100%)
 rename stubs/inertia-vue/resources/js/Components/{Label.vue => InputLabel.vue} (100%)
 rename stubs/inertia-vue/resources/js/Components/{Button.vue => PrimaryButton.vue} (100%)
 rename stubs/inertia-vue/resources/js/Components/{Input.vue => TextInput.vue} (100%)
 rename stubs/inertia-vue/resources/js/Layouts/{Authenticated.vue => AuthenticatedLayout.vue} (80%)
 rename stubs/inertia-vue/resources/js/Layouts/{Guest.vue => GuestLayout.vue} (73%)

diff --git a/stubs/default/resources/views/auth/confirm-password.blade.php b/stubs/default/resources/views/auth/confirm-password.blade.php
index 466593a4f..f740f1aeb 100644
--- a/stubs/default/resources/views/auth/confirm-password.blade.php
+++ b/stubs/default/resources/views/auth/confirm-password.blade.php
@@ -18,18 +18,18 @@
 
             <!-- Password -->
             <div>
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
+                <x-text-input id="password" class="block mt-1 w-full"
                                 type="password"
                                 name="password"
                                 required autocomplete="current-password" />
             </div>
 
             <div class="flex justify-end mt-4">
-                <x-button>
+                <x-primary-button>
                     {{ __('Confirm') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>
diff --git a/stubs/default/resources/views/auth/forgot-password.blade.php b/stubs/default/resources/views/auth/forgot-password.blade.php
index 0642fa882..6945044eb 100644
--- a/stubs/default/resources/views/auth/forgot-password.blade.php
+++ b/stubs/default/resources/views/auth/forgot-password.blade.php
@@ -21,15 +21,15 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <x-button>
+                <x-primary-button>
                     {{ __('Email Password Reset Link') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>
diff --git a/stubs/default/resources/views/auth/login.blade.php b/stubs/default/resources/views/auth/login.blade.php
index ecbe17485..7db47774a 100644
--- a/stubs/default/resources/views/auth/login.blade.php
+++ b/stubs/default/resources/views/auth/login.blade.php
@@ -17,16 +17,16 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
+                <x-text-input id="password" class="block mt-1 w-full"
                                 type="password"
                                 name="password"
                                 required autocomplete="current-password" />
@@ -47,9 +47,9 @@
                     </a>
                 @endif
 
-                <x-button class="ml-3">
+                <x-primary-button class="ml-3">
                     {{ __('Log in') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>
diff --git a/stubs/default/resources/views/auth/register.blade.php b/stubs/default/resources/views/auth/register.blade.php
index a0c4fbe02..aada77d9d 100644
--- a/stubs/default/resources/views/auth/register.blade.php
+++ b/stubs/default/resources/views/auth/register.blade.php
@@ -14,23 +14,23 @@
 
             <!-- Name -->
             <div>
-                <x-label for="name" :value="__('Name')" />
+                <x-input-label for="name" :value="__('Name')" />
 
-                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
+                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
             </div>
 
             <!-- Email Address -->
             <div class="mt-4">
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
+                <x-text-input id="password" class="block mt-1 w-full"
                                 type="password"
                                 name="password"
                                 required autocomplete="new-password" />
@@ -38,9 +38,9 @@
 
             <!-- Confirm Password -->
             <div class="mt-4">
-                <x-label for="password_confirmation" :value="__('Confirm Password')" />
+                <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
 
-                <x-input id="password_confirmation" class="block mt-1 w-full"
+                <x-text-input id="password_confirmation" class="block mt-1 w-full"
                                 type="password"
                                 name="password_confirmation" required />
             </div>
@@ -50,9 +50,9 @@
                     {{ __('Already registered?') }}
                 </a>
 
-                <x-button class="ml-4">
+                <x-primary-button class="ml-4">
                     {{ __('Register') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>
diff --git a/stubs/default/resources/views/auth/reset-password.blade.php b/stubs/default/resources/views/auth/reset-password.blade.php
index 979d1b45c..56ed19abe 100644
--- a/stubs/default/resources/views/auth/reset-password.blade.php
+++ b/stubs/default/resources/views/auth/reset-password.blade.php
@@ -17,31 +17,31 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus />
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required />
+                <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required />
             </div>
 
             <!-- Confirm Password -->
             <div class="mt-4">
-                <x-label for="password_confirmation" :value="__('Confirm Password')" />
+                <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
 
-                <x-input id="password_confirmation" class="block mt-1 w-full"
+                <x-text-input id="password_confirmation" class="block mt-1 w-full"
                                     type="password"
                                     name="password_confirmation" required />
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <x-button>
+                <x-primary-button>
                     {{ __('Reset Password') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>
diff --git a/stubs/default/resources/views/auth/verify-email.blade.php b/stubs/default/resources/views/auth/verify-email.blade.php
index dc0ae7f40..15e313d25 100644
--- a/stubs/default/resources/views/auth/verify-email.blade.php
+++ b/stubs/default/resources/views/auth/verify-email.blade.php
@@ -21,9 +21,9 @@
                 @csrf
 
                 <div>
-                    <x-button>
+                    <x-primary-button>
                         {{ __('Resend Verification Email') }}
-                    </x-button>
+                    </x-primary-button>
                 </div>
             </form>
 
diff --git a/stubs/default/resources/views/components/label.blade.php b/stubs/default/resources/views/components/input-label.blade.php
similarity index 100%
rename from stubs/default/resources/views/components/label.blade.php
rename to stubs/default/resources/views/components/input-label.blade.php
diff --git a/stubs/default/resources/views/components/button.blade.php b/stubs/default/resources/views/components/primary-button.blade.php
similarity index 100%
rename from stubs/default/resources/views/components/button.blade.php
rename to stubs/default/resources/views/components/primary-button.blade.php
diff --git a/stubs/default/resources/views/components/input.blade.php b/stubs/default/resources/views/components/text-input.blade.php
similarity index 100%
rename from stubs/default/resources/views/components/input.blade.php
rename to stubs/default/resources/views/components/text-input.blade.php
diff --git a/stubs/inertia-react/resources/js/Components/Label.jsx b/stubs/inertia-react/resources/js/Components/InputLabel.jsx
similarity index 72%
rename from stubs/inertia-react/resources/js/Components/Label.jsx
rename to stubs/inertia-react/resources/js/Components/InputLabel.jsx
index 4c0a34cbe..93c0adea7 100644
--- a/stubs/inertia-react/resources/js/Components/Label.jsx
+++ b/stubs/inertia-react/resources/js/Components/InputLabel.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function Label({ forInput, value, className, children }) {
+export default function InputLabel({ forInput, value, className, children }) {
     return (
         <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 ` + className}>
             {value ? value : children}
diff --git a/stubs/inertia-react/resources/js/Components/Button.jsx b/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
similarity index 83%
rename from stubs/inertia-react/resources/js/Components/Button.jsx
rename to stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
index 7675e994c..37db6d2d3 100644
--- a/stubs/inertia-react/resources/js/Components/Button.jsx
+++ b/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function Button({ type = 'submit', className = '', processing, children }) {
+export default function PrimaryButton({ type = 'submit', className = '', processing, children }) {
     return (
         <button
             type={type}
diff --git a/stubs/inertia-react/resources/js/Components/Input.jsx b/stubs/inertia-react/resources/js/Components/TextInput.jsx
similarity index 96%
rename from stubs/inertia-react/resources/js/Components/Input.jsx
rename to stubs/inertia-react/resources/js/Components/TextInput.jsx
index c8761aeb2..6d3009de1 100644
--- a/stubs/inertia-react/resources/js/Components/Input.jsx
+++ b/stubs/inertia-react/resources/js/Components/TextInput.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-export default function Input({
+export default function TextInput({
     type = 'text',
     name,
     id,
diff --git a/stubs/inertia-react/resources/js/Layouts/Authenticated.jsx b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
similarity index 100%
rename from stubs/inertia-react/resources/js/Layouts/Authenticated.jsx
rename to stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
diff --git a/stubs/inertia-react/resources/js/Layouts/Guest.jsx b/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx
similarity index 100%
rename from stubs/inertia-react/resources/js/Layouts/Guest.jsx
rename to stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
index 2f46a267a..5a9fa4480 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
-import Label from '@/Components/Label';
+import InputLabel from '@/Components/InputLabel';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ConfirmPassword() {
@@ -28,7 +28,7 @@ export default function ConfirmPassword() {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Confirm Password" />
 
             <div className="mb-4 text-sm text-gray-600">
@@ -37,9 +37,9 @@ export default function ConfirmPassword() {
 
             <form onSubmit={submit}>
                 <div className="mt-4">
-                    <Label forInput="password" value="Password" />
+                    <InputLabel forInput="password" value="Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         name="password"
                         value={data.password}
@@ -52,11 +52,11 @@ export default function ConfirmPassword() {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Confirm
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
index 89c6c1d07..eac6dfd4d 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ForgotPassword({ status }) {
@@ -21,7 +21,7 @@ export default function ForgotPassword({ status }) {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Forgot Password" />
 
             <div className="mb-4 text-sm text-gray-500 leading-normal">
@@ -32,7 +32,7 @@ export default function ForgotPassword({ status }) {
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
-                <Input
+                <TextInput
                     type="text"
                     name="email"
                     value={data.email}
@@ -44,11 +44,11 @@ export default function ForgotPassword({ status }) {
                 <InputError message={errors.email} className="mt-2" />
 
                 <div className="flex items-center justify-end mt-4">
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Email Password Reset Link
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
index fdb74b482..226579532 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
-import Button from '@/Components/Button';
 import Checkbox from '@/Components/Checkbox';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
-import Label from '@/Components/Label';
+import InputLabel from '@/Components/InputLabel';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
 
 export default function Login({ status, canResetPassword }) {
@@ -31,16 +31,16 @@ export default function Login({ status, canResetPassword }) {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Log in" />
 
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
                 <div>
-                    <Label forInput="email" value="Email" />
+                    <InputLabel forInput="email" value="Email" />
 
-                    <Input
+                    <TextInput
                         type="text"
                         id="email"
                         name="email"
@@ -55,9 +55,9 @@ export default function Login({ status, canResetPassword }) {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="password" value="Password" />
+                    <InputLabel forInput="password" value="Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         id="password"
                         name="password"
@@ -88,11 +88,11 @@ export default function Login({ status, canResetPassword }) {
                         </Link>
                     )}
 
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Log in
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
index 9c4296311..a94666a68 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
-import Label from '@/Components/Label';
+import InputLabel from '@/Components/InputLabel';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
 
 export default function Register() {
@@ -31,14 +31,14 @@ export default function Register() {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Register" />
 
             <form onSubmit={submit}>
                 <div>
-                    <Label forInput="name" value="Name" />
+                    <InputLabel forInput="name" value="Name" />
 
-                    <Input
+                    <TextInput
                         type="text"
                         id="name"
                         name="name"
@@ -54,9 +54,9 @@ export default function Register() {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="email" value="Email" />
+                    <InputLabel forInput="email" value="Email" />
 
-                    <Input
+                    <TextInput
                         type="email"
                         id="email"
                         name="email"
@@ -71,9 +71,9 @@ export default function Register() {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="password" value="Password" />
+                    <InputLabel forInput="password" value="Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         id="password"
                         name="password"
@@ -88,9 +88,9 @@ export default function Register() {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="password_confirmation" value="Confirm Password" />
+                    <InputLabel forInput="password_confirmation" value="Confirm Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         id="password_confirmation"
                         name="password_confirmation"
@@ -108,11 +108,11 @@ export default function Register() {
                         Already registered?
                     </Link>
 
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Register
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
index 292b197ca..5d0300d5c 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
-import Label from '@/Components/Label';
+import InputLabel from '@/Components/InputLabel';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ResetPassword({ token, email }) {
@@ -31,14 +31,14 @@ export default function ResetPassword({ token, email }) {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Reset Password" />
 
             <form onSubmit={submit}>
                 <div>
-                    <Label forInput="email" value="Email" />
+                    <InputLabel forInput="email" value="Email" />
 
-                    <Input
+                    <TextInput
                         type="email"
                         id="email"
                         name="email"
@@ -52,9 +52,9 @@ export default function ResetPassword({ token, email }) {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="password" value="Password" />
+                    <InputLabel forInput="password" value="Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         id="password"
                         name="password"
@@ -69,9 +69,9 @@ export default function ResetPassword({ token, email }) {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="password_confirmation" value="Confirm Password" />
+                    <InputLabel forInput="password_confirmation" value="Confirm Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         id="password_confirmation"
                         name="password_confirmation"
@@ -85,11 +85,11 @@ export default function ResetPassword({ token, email }) {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Reset Password
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
index 211a45328..e4765781c 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
+import GuestLayout from '@/Layouts/GuestLayout';
+import PrimaryButton from '@/Components/PrimaryButton';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
 
 export default function VerifyEmail({ status }) {
@@ -13,7 +13,7 @@ export default function VerifyEmail({ status }) {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Email Verification" />
 
             <div className="mb-4 text-sm text-gray-600">
@@ -29,7 +29,7 @@ export default function VerifyEmail({ status }) {
 
             <form onSubmit={submit}>
                 <div className="mt-4 flex items-center justify-between">
-                    <Button processing={processing}>Resend Verification Email</Button>
+                    <PrimaryButton processing={processing}>Resend Verification Email</PrimaryButton>
 
                     <Link
                         href={route('logout')}
@@ -41,6 +41,6 @@ export default function VerifyEmail({ status }) {
                     </Link>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
index 9340f0eb4..b59708a48 100644
--- a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Authenticated from '@/Layouts/Authenticated';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head } from '@inertiajs/inertia-react';
 
 export default function Dashboard(props) {
     return (
-        <Authenticated
+        <AuthenticatedLayout
             auth={props.auth}
             errors={props.errors}
             header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
@@ -18,6 +18,6 @@ export default function Dashboard(props) {
                     </div>
                 </div>
             </div>
-        </Authenticated>
+        </AuthenticatedLayout>
     );
 }
diff --git a/stubs/inertia-vue/resources/js/Components/Label.vue b/stubs/inertia-vue/resources/js/Components/InputLabel.vue
similarity index 100%
rename from stubs/inertia-vue/resources/js/Components/Label.vue
rename to stubs/inertia-vue/resources/js/Components/InputLabel.vue
diff --git a/stubs/inertia-vue/resources/js/Components/Button.vue b/stubs/inertia-vue/resources/js/Components/PrimaryButton.vue
similarity index 100%
rename from stubs/inertia-vue/resources/js/Components/Button.vue
rename to stubs/inertia-vue/resources/js/Components/PrimaryButton.vue
diff --git a/stubs/inertia-vue/resources/js/Components/Input.vue b/stubs/inertia-vue/resources/js/Components/TextInput.vue
similarity index 100%
rename from stubs/inertia-vue/resources/js/Components/Input.vue
rename to stubs/inertia-vue/resources/js/Components/TextInput.vue
diff --git a/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue b/stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue
similarity index 80%
rename from stubs/inertia-vue/resources/js/Layouts/Authenticated.vue
rename to stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue
index 3b0071e77..20dfd5234 100644
--- a/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue
+++ b/stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { ref } from 'vue';
-import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue';
-import BreezeDropdown from '@/Components/Dropdown.vue';
-import BreezeDropdownLink from '@/Components/DropdownLink.vue';
-import BreezeNavLink from '@/Components/NavLink.vue';
-import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import Dropdown from '@/Components/Dropdown.vue';
+import DropdownLink from '@/Components/DropdownLink.vue';
+import NavLink from '@/Components/NavLink.vue';
+import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import { Link } from '@inertiajs/inertia-vue3';
 
 const showingNavigationDropdown = ref(false);
@@ -21,22 +21,22 @@ const showingNavigationDropdown = ref(false);
                             <!-- Logo -->
                             <div class="shrink-0 flex items-center">
                                 <Link :href="route('dashboard')">
-                                    <BreezeApplicationLogo class="block h-9 w-auto" />
+                                    <ApplicationLogo class="block h-9 w-auto" />
                                 </Link>
                             </div>
 
                             <!-- Navigation Links -->
                             <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
-                                <BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                                     Dashboard
-                                </BreezeNavLink>
+                                </NavLink>
                             </div>
                         </div>
 
                         <div class="hidden sm:flex sm:items-center sm:ml-6">
                             <!-- Settings Dropdown -->
                             <div class="ml-3 relative">
-                                <BreezeDropdown align="right" width="48">
+                                <Dropdown align="right" width="48">
                                     <template #trigger>
                                         <span class="inline-flex rounded-md">
                                             <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
@@ -50,11 +50,11 @@ const showingNavigationDropdown = ref(false);
                                     </template>
 
                                     <template #content>
-                                        <BreezeDropdownLink :href="route('logout')" method="post" as="button">
+                                        <DropdownLink :href="route('logout')" method="post" as="button">
                                             Log Out
-                                        </BreezeDropdownLink>
+                                        </DropdownLink>
                                     </template>
-                                </BreezeDropdown>
+                                </Dropdown>
                             </div>
                         </div>
 
@@ -73,9 +73,9 @@ const showingNavigationDropdown = ref(false);
                 <!-- Responsive Navigation Menu -->
                 <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
                     <div class="pt-2 pb-3 space-y-1">
-                        <BreezeResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                        <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
                             Dashboard
-                        </BreezeResponsiveNavLink>
+                        </ResponsiveNavLink>
                     </div>
 
                     <!-- Responsive Settings Options -->
@@ -86,9 +86,9 @@ const showingNavigationDropdown = ref(false);
                         </div>
 
                         <div class="mt-3 space-y-1">
-                            <BreezeResponsiveNavLink :href="route('logout')" method="post" as="button">
+                            <ResponsiveNavLink :href="route('logout')" method="post" as="button">
                                 Log Out
-                            </BreezeResponsiveNavLink>
+                            </ResponsiveNavLink>
                         </div>
                     </div>
                 </div>
diff --git a/stubs/inertia-vue/resources/js/Layouts/Guest.vue b/stubs/inertia-vue/resources/js/Layouts/GuestLayout.vue
similarity index 73%
rename from stubs/inertia-vue/resources/js/Layouts/Guest.vue
rename to stubs/inertia-vue/resources/js/Layouts/GuestLayout.vue
index 69d30919f..fc8f51945 100644
--- a/stubs/inertia-vue/resources/js/Layouts/Guest.vue
+++ b/stubs/inertia-vue/resources/js/Layouts/GuestLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import { Link } from '@inertiajs/inertia-vue3';
 </script>
 
@@ -7,7 +7,7 @@ import { Link } from '@inertiajs/inertia-vue3';
     <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
         <div>
             <Link href="/">
-                <BreezeApplicationLogo class="w-20 h-20 fill-current text-gray-500" />
+                <ApplicationLogo class="w-20 h-20 fill-current text-gray-500" />
             </Link>
         </div>
 
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
index 3d71fba66..e99e575bd 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -1,9 +1,9 @@
 <script setup>
-import BreezeButton from '@/Components/Button.vue';
-import BreezeGuestLayout from '@/Layouts/Guest.vue';
-import BreezeInput from '@/Components/Input.vue';
-import BreezeInputError from '@/Components/InputError.vue';
-import BreezeLabel from '@/Components/Label.vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
 import { Head, useForm } from '@inertiajs/inertia-vue3';
 
 const form = useForm({
@@ -18,7 +18,7 @@ const submit = () => {
 </script>
 
 <template>
-    <BreezeGuestLayout>
+    <GuestLayout>
         <Head title="Confirm Password" />
 
         <div class="mb-4 text-sm text-gray-600">
@@ -27,16 +27,16 @@ const submit = () => {
 
         <form @submit.prevent="submit">
             <div>
-                <BreezeLabel for="password" value="Password" />
-                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
-                <BreezeInputError class="mt-2" :message="form.errors.password" />
+                <InputLabel for="password" value="Password" />
+                <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
+                <InputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="flex justify-end mt-4">
-                <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Confirm
-                </BreezeButton>
+                </PrimaryButton>
             </div>
         </form>
-    </BreezeGuestLayout>
+    </GuestLayout>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
index 0b59e00bf..46ac37ad0 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,9 +1,9 @@
 <script setup>
-import BreezeButton from '@/Components/Button.vue';
-import BreezeGuestLayout from '@/Layouts/Guest.vue';
-import BreezeInput from '@/Components/Input.vue';
-import BreezeInputError from '@/Components/InputError.vue';
-import BreezeLabel from '@/Components/Label.vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
 import { Head, useForm } from '@inertiajs/inertia-vue3';
 
 defineProps({
@@ -20,7 +20,7 @@ const submit = () => {
 </script>
 
 <template>
-    <BreezeGuestLayout>
+    <GuestLayout>
         <Head title="Forgot Password" />
 
         <div class="mb-4 text-sm text-gray-600">
@@ -33,16 +33,16 @@ const submit = () => {
 
         <form @submit.prevent="submit">
             <div>
-                <BreezeLabel for="email" value="Email" />
-                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
-                <BreezeInputError class="mt-2" :message="form.errors.email" />
+                <InputLabel for="email" value="Email" />
+                <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+                <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Email Password Reset Link
-                </BreezeButton>
+                </PrimaryButton>
             </div>
         </form>
-    </BreezeGuestLayout>
+    </GuestLayout>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
index 7eab17159..ec90ae11f 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
@@ -1,10 +1,10 @@
 <script setup>
-import BreezeButton from '@/Components/Button.vue';
-import BreezeCheckbox from '@/Components/Checkbox.vue';
-import BreezeGuestLayout from '@/Layouts/Guest.vue';
-import BreezeInput from '@/Components/Input.vue';
-import BreezeInputError from '@/Components/InputError.vue';
-import BreezeLabel from '@/Components/Label.vue';
+import Checkbox from '@/Components/Checkbox.vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
 
 defineProps({
@@ -26,7 +26,7 @@ const submit = () => {
 </script>
 
 <template>
-    <BreezeGuestLayout>
+    <GuestLayout>
         <Head title="Log in" />
 
         <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
@@ -35,20 +35,20 @@ const submit = () => {
 
         <form @submit.prevent="submit">
             <div>
-                <BreezeLabel for="email" value="Email" />
-                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
-                <BreezeInputError class="mt-2" :message="form.errors.email" />
+                <InputLabel for="email" value="Email" />
+                <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+                <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
-                <BreezeLabel for="password" value="Password" />
-                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
-                <BreezeInputError class="mt-2" :message="form.errors.password" />
+                <InputLabel for="password" value="Password" />
+                <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
+                <InputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="block mt-4">
                 <label class="flex items-center">
-                    <BreezeCheckbox name="remember" v-model:checked="form.remember" />
+                    <Checkbox name="remember" v-model:checked="form.remember" />
                     <span class="ml-2 text-sm text-gray-600">Remember me</span>
                 </label>
             </div>
@@ -58,10 +58,10 @@ const submit = () => {
                     Forgot your password?
                 </Link>
 
-                <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Log in
-                </BreezeButton>
+                </PrimaryButton>
             </div>
         </form>
-    </BreezeGuestLayout>
+    </GuestLayout>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
index 3f16b5182..322d098e9 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
@@ -1,9 +1,9 @@
 <script setup>
-import BreezeButton from '@/Components/Button.vue';
-import BreezeGuestLayout from '@/Layouts/Guest.vue';
-import BreezeInput from '@/Components/Input.vue';
-import BreezeInputError from '@/Components/InputError.vue';
-import BreezeLabel from '@/Components/Label.vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
 
 const form = useForm({
@@ -22,32 +22,32 @@ const submit = () => {
 </script>
 
 <template>
-    <BreezeGuestLayout>
+    <GuestLayout>
         <Head title="Register" />
 
         <form @submit.prevent="submit">
             <div>
-                <BreezeLabel for="name" value="Name" />
-                <BreezeInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus autocomplete="name" />
-                <BreezeInputError class="mt-2" :message="form.errors.name" />
+                <InputLabel for="name" value="Name" />
+                <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus autocomplete="name" />
+                <InputError class="mt-2" :message="form.errors.name" />
             </div>
 
             <div class="mt-4">
-                <BreezeLabel for="email" value="Email" />
-                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" />
-                <BreezeInputError class="mt-2" :message="form.errors.email" />
+                <InputLabel for="email" value="Email" />
+                <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" />
+                <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
-                <BreezeLabel for="password" value="Password" />
-                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
-                <BreezeInputError class="mt-2" :message="form.errors.password" />
+                <InputLabel for="password" value="Password" />
+                <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
+                <InputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="mt-4">
-                <BreezeLabel for="password_confirmation" value="Confirm Password" />
-                <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
-                <BreezeInputError class="mt-2" :message="form.errors.password_confirmation" />
+                <InputLabel for="password_confirmation" value="Confirm Password" />
+                <TextInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
+                <InputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
@@ -55,10 +55,10 @@ const submit = () => {
                     Already registered?
                 </Link>
 
-                <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Register
-                </BreezeButton>
+                </PrimaryButton>
             </div>
         </form>
-    </BreezeGuestLayout>
+    </GuestLayout>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
index ab9deac7f..ffa1d44a8 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,9 +1,9 @@
 <script setup>
-import BreezeButton from '@/Components/Button.vue';
-import BreezeGuestLayout from '@/Layouts/Guest.vue';
-import BreezeInput from '@/Components/Input.vue';
-import BreezeInputError from '@/Components/InputError.vue';
-import BreezeLabel from '@/Components/Label.vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
 import { Head, useForm } from '@inertiajs/inertia-vue3';
 
 const props = defineProps({
@@ -26,33 +26,33 @@ const submit = () => {
 </script>
 
 <template>
-    <BreezeGuestLayout>
+    <GuestLayout>
         <Head title="Reset Password" />
 
         <form @submit.prevent="submit">
             <div>
-                <BreezeLabel for="email" value="Email" />
-                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
-                <BreezeInputError class="mt-2" :message="form.errors.email" />
+                <InputLabel for="email" value="Email" />
+                <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+                <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
-                <BreezeLabel for="password" value="Password" />
-                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
-                <BreezeInputError class="mt-2" :message="form.errors.password" />
+                <InputLabel for="password" value="Password" />
+                <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
+                <InputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="mt-4">
-                <BreezeLabel for="password_confirmation" value="Confirm Password" />
-                <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
-                <BreezeInputError class="mt-2" :message="form.errors.password_confirmation" />
+                <InputLabel for="password_confirmation" value="Confirm Password" />
+                <TextInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
+                <InputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Reset Password
-                </BreezeButton>
+                </PrimaryButton>
             </div>
         </form>
-    </BreezeGuestLayout>
+    </GuestLayout>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue b/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
index a1bb8c0d3..8fa6c5f79 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import BreezeButton from '@/Components/Button.vue';
-import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
 
 const props = defineProps({
@@ -18,7 +18,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
 </script>
 
 <template>
-    <BreezeGuestLayout>
+    <GuestLayout>
         <Head title="Email Verification" />
 
         <div class="mb-4 text-sm text-gray-600">
@@ -31,12 +31,12 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
 
         <form @submit.prevent="submit">
             <div class="mt-4 flex items-center justify-between">
-                <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Resend Verification Email
-                </BreezeButton>
+                </PrimaryButton>
 
                 <Link :href="route('logout')" method="post" as="button" class="underline text-sm text-gray-600 hover:text-gray-900">Log Out</Link>
             </div>
         </form>
-    </BreezeGuestLayout>
+    </GuestLayout>
 </template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Dashboard.vue b/stubs/inertia-vue/resources/js/Pages/Dashboard.vue
index bc0e58856..a39b9ae23 100644
--- a/stubs/inertia-vue/resources/js/Pages/Dashboard.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Dashboard.vue
@@ -1,12 +1,12 @@
 <script setup>
-import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Head } from '@inertiajs/inertia-vue3';
 </script>
 
 <template>
     <Head title="Dashboard" />
 
-    <BreezeAuthenticatedLayout>
+    <AuthenticatedLayout>
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                 Dashboard
@@ -22,5 +22,5 @@ import { Head } from '@inertiajs/inertia-vue3';
                 </div>
             </div>
         </div>
-    </BreezeAuthenticatedLayout>
+    </AuthenticatedLayout>
 </template>