diff --git a/esm-samples/jsapi-custom-ui/README.md b/esm-samples/jsapi-custom-ui/README.md
index 2cbad204f..f0c5a54ba 100644
--- a/esm-samples/jsapi-custom-ui/README.md
+++ b/esm-samples/jsapi-custom-ui/README.md
@@ -1,6 +1,8 @@
 # Custom UI component with React and Vite
 
-This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). The component is created in React and then added to the Map as a DOM element using [View UI](https://developers.arcgis.com/javascript/latest/view-ui/). This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements.
+This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information about building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic.
+
+The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements.
 
 ## Get Started
 
diff --git a/esm-samples/jsapi-custom-ui/src/App.jsx b/esm-samples/jsapi-custom-ui/src/App.jsx
index ad8127c00..6a37bba9d 100644
--- a/esm-samples/jsapi-custom-ui/src/App.jsx
+++ b/esm-samples/jsapi-custom-ui/src/App.jsx
@@ -3,14 +3,14 @@ import Bookmarks from '@arcgis/core/widgets/Bookmarks.js';
 import Expand from '@arcgis/core/widgets/Expand.js';
 import MapView from "@arcgis/core/views/MapView.js";
 import WebMap from "@arcgis/core/WebMap.js";
-import CenterWidget from "./CenterWidget.jsx";
+import CenterComponent from "./CenterComponent.jsx";
 
 import "./App.css";
 
 function App() {
 
   const [viewState, setViewState] = useState(null);
-  const centerWidgetID = useRef("center-widget");
+  const centerComponentID = useRef("center-component");
   const mapDiv = useRef(null);
 
   useEffect(() => {
@@ -39,8 +39,8 @@ function App() {
 
       // Add the Expand and BookMarks widgets to the top-right corner of the view
       view.ui.add(bkExpand, "top-right");
-      // Add Center widget to the bottom-right corner of the view
-      view.ui.add(document.getElementById(centerWidgetID.current), "bottom-right");
+      // Add Center component to the bottom-right corner of the view
+      view.ui.add(document.getElementById(centerComponentID.current), "bottom-right");
 
       webmap.when(() => {
         setViewState({view});
@@ -48,7 +48,7 @@ function App() {
     }
   }, [mapDiv]);
 
-  return <div className="mapDiv" ref={mapDiv}><CenterWidget id={centerWidgetID.current} view={viewState}></CenterWidget></div>;
+  return <div className="mapDiv" ref={mapDiv}><CenterComponent id={centerComponentID.current} view={viewState}></CenterComponent></div>;
 }
 
 export default App;
diff --git a/esm-samples/jsapi-custom-ui/src/CenterWidget.jsx b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx
similarity index 56%
rename from esm-samples/jsapi-custom-ui/src/CenterWidget.jsx
rename to esm-samples/jsapi-custom-ui/src/CenterComponent.jsx
index 8e9a9af02..f96b59d23 100644
--- a/esm-samples/jsapi-custom-ui/src/CenterWidget.jsx
+++ b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx
@@ -1,15 +1,15 @@
 import { useState, useEffect } from 'react';
 import { watch } from '@arcgis/core/core/reactiveUtils';
-import './center-widget.css';
+import './center-component.css';
 
 /**
- * React component that can be used as an ArcGIS JS SDK widget. 
- * This widget dynamically displays the center of the map extent
+ * React component that can be used in an ArcGIS JS SDK application.
+ * This component dynamically displays the center of the map extent
  * @param {*} view an instance of a `Mapview` or `SceneView`
- * @param {string} id - The `id` of the widget's parent HTML div element
- * @returns The widget's HTML div
+ * @param {string} id - The `id` of the components's parent HTML div element
+ * @returns The components's HTML div
  */
-const CenterWidget = ({ view, id }) => {
+const CenterComponent = ({ view, id }) => {
   const [center, setCenter] = useState(null);
 
   useEffect(() => {
@@ -18,7 +18,7 @@ const CenterWidget = ({ view, id }) => {
       () => view?.view?.extent,
       (value) => {
         const { latitude, longitude } = value.center;
-        // Update the widget's display
+        // Update the component's display
         setCenter(`${longitude.toFixed(4)}, ${latitude.toFixed(4)}`);
     });
     // Clean up any handles or event listeners
@@ -26,7 +26,7 @@ const CenterWidget = ({ view, id }) => {
     return () => handle.remove();
   }, [view]);
 
- return <div id={id} className="center-widget">Center: {center}</div>;
+ return <div id={id} className="center-component">Center: {center}</div>;
 };
 
-export default CenterWidget;
+export default CenterComponent;
diff --git a/esm-samples/jsapi-custom-ui/src/center-widget.css b/esm-samples/jsapi-custom-ui/src/center-component.css
similarity index 100%
rename from esm-samples/jsapi-custom-ui/src/center-widget.css
rename to esm-samples/jsapi-custom-ui/src/center-component.css