diff --git a/src/webview/common/sanitize.ts b/src/webview/common/sanitize.ts
new file mode 100644
index 000000000..e2a8f73d8
--- /dev/null
+++ b/src/webview/common/sanitize.ts
@@ -0,0 +1,25 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+/**
+ * Builds a sanitized compponent name from a component folder full path or
+ * a Git-repo URL
+ *
+ * @param pathOrURL an absolute path ot a Git-repo URL
+ * @returns sanitized component name
+ */
+export function buildSanitizedComponentName(pathOrURL?: string): string {
+    let folder: string = pathOrURL ? pathOrURL : '';
+    folder = folder.endsWith('.git') ? folder.substring(0, folder.lastIndexOf('.git')) : folder;
+    const isWindowsPath = folder.length > 1 && folder.charAt(1) === ':';
+    const componentNameFromFolder = folder //
+        .substring(folder.lastIndexOf(isWindowsPath ? '\\' : '/') + 1)
+        .toLocaleLowerCase()
+        .replace(/[^a-z0-9-]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/-$/, '')
+        .replace(/^[0-9]+/, '');
+    return componentNameFromFolder.length ? componentNameFromFolder : 'component';
+}
\ No newline at end of file
diff --git a/src/webview/create-component/pages/fromExistingGitRepo.tsx b/src/webview/create-component/pages/fromExistingGitRepo.tsx
index f085ae3a4..8d81808a4 100644
--- a/src/webview/create-component/pages/fromExistingGitRepo.tsx
+++ b/src/webview/create-component/pages/fromExistingGitRepo.tsx
@@ -22,6 +22,7 @@ import { DevfileRecommendationInfo } from '../../common/devfileRecommendationInf
 import { DevfileSearch } from '../../common/devfileSearch';
 import { NoSuitableDevfile } from '../../common/noSuitableDevfile';
 import { SetNameAndFolder } from '../../common/setNameAndFolder';
+import { buildSanitizedComponentName } from '../../common/sanitize';
 
 type Message = {
     action: string;
@@ -454,7 +455,7 @@ export function FromExistingGitRepo({ setCurrentView }) {
                     }}
                     createComponent={createComponentFromGitRepo}
                     devfile={recommendedDevfile.isDevfileExistsInRepo ? undefined : selectedDevfile ? selectedDevfile : recommendedDevfile.devfile}
-                    initialComponentName={gitURL.url.substring(gitURL.url.lastIndexOf('/') + 1)}
+                    initialComponentName={buildSanitizedComponentName(gitURL.url)}
                 />
             );
         case 'selectDifferentDevfile':
diff --git a/src/webview/create-component/pages/fromLocalCodebase.tsx b/src/webview/create-component/pages/fromLocalCodebase.tsx
index 3bc9f5990..7cc8c3716 100644
--- a/src/webview/create-component/pages/fromLocalCodebase.tsx
+++ b/src/webview/create-component/pages/fromLocalCodebase.tsx
@@ -26,6 +26,7 @@ import { DevfileRecommendationInfo } from '../../common/devfileRecommendationInf
 import { DevfileSearch } from '../../common/devfileSearch';
 import { NoSuitableDevfile } from '../../common/noSuitableDevfile';
 import { PortNumberInput } from '../../common/portNumberInput';
+import { buildSanitizedComponentName } from '../../common/sanitize';
 
 type Message = {
     action: string;
@@ -149,15 +150,7 @@ export function FromLocalCodebase(props: FromLocalCodebaseProps) {
         window.vscodeApi.postMessage({ action: 'getWorkspaceFolders' });
         if (props.rootFolder && props.rootFolder.length !== 0) {
             setProjectFolder(props.rootFolder);
-            const isWindowsPath = props.rootFolder.charAt(1) === ':';
-            let componentNameFromFolder: string = props.rootFolder //
-                .substring(props.rootFolder.lastIndexOf(isWindowsPath ? '\\' : '/') + 1)
-                .toLocaleLowerCase()
-                .replace(/[^a-z0-9-]+/g, '-')
-                .replace(/-+/g, '-')
-                .replace(/-$/, '')
-                .replace(/^[0-9]+/, '');
-            componentNameFromFolder = componentNameFromFolder.length ? componentNameFromFolder : 'component';
+            const componentNameFromFolder = buildSanitizedComponentName(props.rootFolder);
             setComponentName(componentNameFromFolder);
             window.vscodeApi.postMessage({
                 action: 'validateComponentName',