diff --git a/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx b/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx
index 57bc22233..21579606d 100644
--- a/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx
+++ b/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function ApplicationLogo({ className }) {
     return (
         <svg className={className} viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
diff --git a/stubs/inertia-react/resources/js/Components/Checkbox.jsx b/stubs/inertia-react/resources/js/Components/Checkbox.jsx
index 3325e700c..0a02f05f9 100644
--- a/stubs/inertia-react/resources/js/Components/Checkbox.jsx
+++ b/stubs/inertia-react/resources/js/Components/Checkbox.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Checkbox({ name, value, handleChange }) {
     return (
         <input
diff --git a/stubs/inertia-react/resources/js/Components/DangerButton.jsx b/stubs/inertia-react/resources/js/Components/DangerButton.jsx
index 2efc133d3..44b285efa 100644
--- a/stubs/inertia-react/resources/js/Components/DangerButton.jsx
+++ b/stubs/inertia-react/resources/js/Components/DangerButton.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function DangerButton({ type = 'submit', className = '', processing, children, onClick }) {
     return (
         <button
diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.jsx b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
index 34e14ab5f..55b2ca8de 100644
--- a/stubs/inertia-react/resources/js/Components/Dropdown.jsx
+++ b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useContext, Fragment } from 'react';
+import { useState, createContext, useContext, Fragment } from 'react';
 import { Link } from '@inertiajs/inertia-react';
 import { Transition } from '@headlessui/react';
 
-const DropDownContext = React.createContext();
+const DropDownContext = createContext();
 
 const Dropdown = ({ children }) => {
     const [open, setOpen] = useState(false);
diff --git a/stubs/inertia-react/resources/js/Components/InputLabel.jsx b/stubs/inertia-react/resources/js/Components/InputLabel.jsx
index b6c96116b..833555e80 100644
--- a/stubs/inertia-react/resources/js/Components/InputLabel.jsx
+++ b/stubs/inertia-react/resources/js/Components/InputLabel.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function InputLabel({ forInput, value, className, children }) {
     return (
         <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ` + className}>
diff --git a/stubs/inertia-react/resources/js/Components/Modal.jsx b/stubs/inertia-react/resources/js/Components/Modal.jsx
index 3d2e40be2..eba1a82d0 100644
--- a/stubs/inertia-react/resources/js/Components/Modal.jsx
+++ b/stubs/inertia-react/resources/js/Components/Modal.jsx
@@ -1,32 +1,13 @@
-import React, { useEffect, Fragment } from 'react';
-import ReactDOM from 'react-dom';
-import { Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
 
 export default function Modal({ children, show = false, maxWidth = '2xl', closeable = true, onClose = () => {} }) {
-    useEffect(() => {
-        document.body.style.overflow = show ? 'hidden' : null;
-    }, [show]);
-
     const close = () => {
         if (closeable) {
             onClose();
         }
     };
 
-    const closeOnEscape = (e) => {
-        if (e.key === 'Escape' && props.show) {
-            close();
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener('keydown', closeOnEscape);
-        return () => {
-            document.removeEventListener('keydown', closeOnEscape);
-            document.body.style.overflow = null;
-        };
-    }, []);
-
     const maxWidthClass = {
         sm: 'sm:max-w-sm',
         md: 'sm:max-w-md',
@@ -35,11 +16,14 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
         '2xl': 'sm:max-w-2xl',
     }[maxWidth];
 
-    const modalRoot = document.getElementById('modal-root');
-
-    return ReactDOM.createPortal(
-        <Transition show={show} leave="duration-200">
-            <div className="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50">
+    return (
+        <Transition show={show} as={Fragment} leave="duration-200">
+            <Dialog
+                as="div"
+                id="modal"
+                className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
+                onClose={close}
+            >
                 <Transition.Child
                     as={Fragment}
                     enter="ease-out duration-300"
@@ -49,9 +33,7 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
                 >
-                    <div className="fixed inset-0 transform transition-all" onClick={close}>
-                        <div className="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
-                    </div>
+                    <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
                 </Transition.Child>
 
                 <Transition.Child
@@ -63,14 +45,13 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
                     leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                     leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 >
-                    <div
+                    <Dialog.Panel
                         className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
                     >
                         {children}
-                    </div>
+                    </Dialog.Panel>
                 </Transition.Child>
-            </div>
-        </Transition>,
-        modalRoot
+            </Dialog>
+        </Transition>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Components/NavLink.jsx b/stubs/inertia-react/resources/js/Components/NavLink.jsx
index 7b6a9e935..be7b1b312 100644
--- a/stubs/inertia-react/resources/js/Components/NavLink.jsx
+++ b/stubs/inertia-react/resources/js/Components/NavLink.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from '@inertiajs/inertia-react';
 
 export default function NavLink({ href, active, children }) {
diff --git a/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx b/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
index 2506b3708..0dfe55fbc 100644
--- a/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
+++ b/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function PrimaryButton({ type = 'submit', className = '', processing, children, onClick }) {
     return (
         <button
diff --git a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
index 62853b7e6..af068f8d9 100644
--- a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
+++ b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from '@inertiajs/inertia-react';
 
 export default function ResponsiveNavLink({ method = 'get', as = 'a', href, active = false, children }) {
diff --git a/stubs/inertia-react/resources/js/Components/SecondaryButton.jsx b/stubs/inertia-react/resources/js/Components/SecondaryButton.jsx
index 356b88762..02b749c91 100644
--- a/stubs/inertia-react/resources/js/Components/SecondaryButton.jsx
+++ b/stubs/inertia-react/resources/js/Components/SecondaryButton.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function SecondaryButton({ type = 'button', className = '', processing, children, onClick }) {
     return (
         <button
diff --git a/stubs/inertia-react/resources/js/Components/TextInput.jsx b/stubs/inertia-react/resources/js/Components/TextInput.jsx
index dcf20f4f2..2f358e3e7 100644
--- a/stubs/inertia-react/resources/js/Components/TextInput.jsx
+++ b/stubs/inertia-react/resources/js/Components/TextInput.jsx
@@ -1,7 +1,7 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 
 export default forwardRef(function TextInput(
-    { type = 'text', name, value, className, autoComplete, required, isFocused, handleChange },
+    { type = 'text', name, id, value, className, autoComplete, required, isFocused, handleChange },
     ref
 ) {
     const input = ref ? ref : useRef();
@@ -17,6 +17,7 @@ export default forwardRef(function TextInput(
             <input
                 type={type}
                 name={name}
+                id={id}
                 value={value}
                 className={
                     `border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ` +
diff --git a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
index 75365e6b8..c002c0e59 100644
--- a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
+++ b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';
diff --git a/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx b/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx
index 650286f55..39b0151b3 100644
--- a/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx
+++ b/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ApplicationLogo from '@/Components/ApplicationLogo';
 import { Link } from '@inertiajs/inertia-react';
 
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
index 2f98e879e..ab74393ae 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -40,6 +40,7 @@ export default function ConfirmPassword() {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
index 2776f0555..df83fc923 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import PrimaryButton from '@/Components/PrimaryButton';
@@ -33,6 +32,7 @@ export default function ForgotPassword({ status }) {
 
             <form onSubmit={submit}>
                 <TextInput
+                    id="password"
                     type="email"
                     name="email"
                     value={data.email}
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
index 94761b22c..eb98052c3 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import Checkbox from '@/Components/Checkbox';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
@@ -41,6 +41,7 @@ export default function Login({ status, canResetPassword }) {
                     <InputLabel forInput="email" value="Email" />
 
                     <TextInput
+                        id="email"
                         type="email"
                         name="email"
                         value={data.email}
@@ -57,6 +58,7 @@ export default function Login({ status, canResetPassword }) {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
index 774f03d6c..afa1fa7d8 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -39,6 +39,7 @@ export default function Register() {
                     <InputLabel forInput="name" value="Name" />
 
                     <TextInput
+                        id="name"
                         name="name"
                         value={data.name}
                         className="mt-1 block w-full"
@@ -55,6 +56,7 @@ export default function Register() {
                     <InputLabel forInput="email" value="Email" />
 
                     <TextInput
+                        id="email"
                         type="email"
                         name="email"
                         value={data.email}
@@ -71,6 +73,7 @@ export default function Register() {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}
@@ -87,6 +90,7 @@ export default function Register() {
                     <InputLabel forInput="password_confirmation" value="Confirm Password" />
 
                     <TextInput
+                        id="password_confirmation"
                         type="password"
                         name="password_confirmation"
                         value={data.password_confirmation}
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
index c6f9ecd20..2ffeba072 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -39,6 +39,7 @@ export default function ResetPassword({ token, email }) {
                     <InputLabel forInput="email" value="Email" />
 
                     <TextInput
+                        id="email"
                         type="email"
                         name="email"
                         value={data.email}
@@ -54,6 +55,7 @@ export default function ResetPassword({ token, email }) {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
index d6ceff10a..b462e00f2 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import PrimaryButton from '@/Components/PrimaryButton';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
index 873b65ff6..fae0073a5 100644
--- a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head } from '@inertiajs/inertia-react';
 
diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx
index 5c22ad51a..a69ada06a 100644
--- a/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import DeleteUserForm from './Partials/DeleteUserForm';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm';
diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
index 56d273643..d491227e5 100644
--- a/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import DangerButton from '@/Components/DangerButton';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx
index d686740bc..f37ca83a8 100644
--- a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import PrimaryButton from '@/Components/PrimaryButton';
diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx
index 8b79774e0..a69f14011 100644
--- a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import PrimaryButton from '@/Components/PrimaryButton';
diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.jsx b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
index a9b162c06..1896adc2d 100644
--- a/stubs/inertia-react/resources/js/Pages/Welcome.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link, Head } from '@inertiajs/inertia-react';
 
 export default function Welcome(props) {
diff --git a/stubs/inertia-react/resources/js/app.jsx b/stubs/inertia-react/resources/js/app.jsx
index ecf5b6729..ad7e7bcff 100644
--- a/stubs/inertia-react/resources/js/app.jsx
+++ b/stubs/inertia-react/resources/js/app.jsx
@@ -1,7 +1,6 @@
 import './bootstrap';
 import '../css/app.css';
 
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import { InertiaProgress } from '@inertiajs/progress';
diff --git a/stubs/inertia-react/resources/js/ssr.jsx b/stubs/inertia-react/resources/js/ssr.jsx
index 54203f256..659064e3f 100644
--- a/stubs/inertia-react/resources/js/ssr.jsx
+++ b/stubs/inertia-react/resources/js/ssr.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import createServer from '@inertiajs/server';
diff --git a/stubs/inertia-react/resources/views/app.blade.php b/stubs/inertia-react/resources/views/app.blade.php
index 0e5f03161..bb79d7eff 100644
--- a/stubs/inertia-react/resources/views/app.blade.php
+++ b/stubs/inertia-react/resources/views/app.blade.php
@@ -17,6 +17,5 @@
     </head>
     <body class="font-sans antialiased">
         @inertia
-        <div id="modal-root"></div>
     </body>
 </html>