diff --git a/internal/web/ui/src/Router.tsx b/internal/web/ui/src/Router.tsx
index 8b9c0fcb61..8ab30d7188 100644
--- a/internal/web/ui/src/Router.tsx
+++ b/internal/web/ui/src/Router.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Navbar from './features/layout/Navbar';
diff --git a/internal/web/ui/src/contexts/PathPrefixContext.tsx b/internal/web/ui/src/contexts/PathPrefixContext.tsx
index deee6944be..0f5126dfa5 100644
--- a/internal/web/ui/src/contexts/PathPrefixContext.tsx
+++ b/internal/web/ui/src/contexts/PathPrefixContext.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { createContext, useContext } from 'react';
 
 /**
  * PathPrefixContext propagates the base URL throughout the component tree where
  * the application is hosted.
  */
-const PathPrefixContext = React.createContext('');
+const PathPrefixContext = createContext('');
 
 /**
  * usePathPrefix retrieves the current base URL where the application is
@@ -14,7 +14,7 @@ const PathPrefixContext = React.createContext('');
  * The returned path prefix will always end in a `/`.
  */
 function usePathPrefix(): string {
-  const prefix = React.useContext(PathPrefixContext);
+  const prefix = useContext(PathPrefixContext);
   if (prefix === '') {
     return '/';
   }
diff --git a/internal/web/ui/src/features/clustering/Table.tsx b/internal/web/ui/src/features/clustering/Table.tsx
index 0bef4013b9..47a8a87220 100644
--- a/internal/web/ui/src/features/clustering/Table.tsx
+++ b/internal/web/ui/src/features/clustering/Table.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 import styles from './Table.module.css';
 
 interface Props {
   tableHeaders: string[];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   renderTableData: () => JSX.Element[];
 }
 
diff --git a/internal/web/ui/src/features/component/ComponentBody.tsx b/internal/web/ui/src/features/component/ComponentBody.tsx
index 795e341835..8a9458981a 100644
--- a/internal/web/ui/src/features/component/ComponentBody.tsx
+++ b/internal/web/ui/src/features/component/ComponentBody.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 import { alloyStringify } from '../alloy-syntax-js/stringify';
diff --git a/internal/web/ui/src/features/component/Table.tsx b/internal/web/ui/src/features/component/Table.tsx
index 3d8f27dcba..3e6cce5aad 100644
--- a/internal/web/ui/src/features/component/Table.tsx
+++ b/internal/web/ui/src/features/component/Table.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 import TableHead from './TableHead';
 import { SortOrder } from './types';
@@ -7,7 +7,7 @@ import styles from './Table.module.css';
 
 interface Props {
   tableHeaders: string[];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   handleSorting?: (sortField: string, sortOrder: SortOrder) => void;
   renderTableData: () => JSX.Element[];
 }
diff --git a/internal/web/ui/src/features/component/style.ts b/internal/web/ui/src/features/component/style.ts
index 352b3b4e18..8c3c41ca6c 100644
--- a/internal/web/ui/src/features/component/style.ts
+++ b/internal/web/ui/src/features/component/style.ts
@@ -1,8 +1,8 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 // Object for react-syntax-highlighter's custom theme
 export const style: {
-  [key: string]: React.CSSProperties;
+  [key: string]: CSSProperties;
 } = {
   'code[class*="language-"]': {
     color: 'black',
diff --git a/internal/web/ui/src/index.tsx b/internal/web/ui/src/index.tsx
index 3dc22c6796..595359d7bb 100644
--- a/internal/web/ui/src/index.tsx
+++ b/internal/web/ui/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './App';
@@ -8,7 +8,7 @@ import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );