diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
index 533bce3dcdd..0ab8cbc514e 100644
--- a/packages/components/_templates/mitosis/new/component/tsx.ejs.t
+++ b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -1,10 +1,9 @@
 ---
 to: src/components/<%= name %>/<%= name %>.lite.tsx
 ---
-import { onMount, Show, useMetadata, useStore } from "@builder.io/mitosis";
+import { Show, useMetadata, useStore } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
-import { cls, uuid } from "../../utils";
-import {DEFAULT_ID} from "../../shared/constants";
+import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
 import {ChangeEvent, InteractionEvent} from "../../shared/model";
 <% } -%>
@@ -18,7 +17,6 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
   const ref = useRef<HTMLDivElement>(null);
   // jscpd:ignore-start
   const state = useStore<DB<%= h.changeCase.pascal(name) %>State>({
-		_id: DEFAULT_ID,
       <% if(formValue!=="no"){   -%>
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
@@ -58,19 +56,12 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 		}
       <% } -%>
   });
-
-  onMount(() => {
-  	state._id = props.id || '<%= name %>-' + uuid();
-    if (props.stylePath) {
-      state.stylePath = props.stylePath;
-    }
-  });
   // jscpd:ignore-end
 
   return (
     <div
     	ref={ref}
-    	id={state._id}
+    	id={props.id}
     	class={cls('db-<%= name %>', props.className)}
 <% if(formValue!=="no"){   -%>
 		onChange={(event: ChangeEvent<HTMLInputElement>) => state.handleChange(event)}
@@ -78,9 +69,6 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 		onFocus={(event: InteractionEvent<HTMLInputElement>) => state.handleFocus(event)}
 <% } -%>
     	>
-      <Show when={state.stylePath}>
-        <link rel="stylesheet" href={state.stylePath} />
-      </Show>
       {props.children}
     </div>
   );
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
index 2ec5387732d..577f4938cca 100644
--- a/packages/components/scripts/post-build/components.js
+++ b/packages/components/scripts/post-build/components.js
@@ -19,6 +19,7 @@
  * 		},
  *     react?: {
  * 			propsPassingFilter?: string[];
+ * 			containsFragmentMap?: boolean;
  * 		}
  * }
  * }]}
@@ -131,6 +132,9 @@ const getComponents = () => [
 			},
 			angular: {
 				controlValueAccessor: 'value'
+			},
+			react: {
+				containsFragmentMap: true
 			}
 		}
 	},
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
index 000aea42d24..b0bbb3e5fe3 100644
--- a/packages/components/scripts/post-build/react.js
+++ b/packages/components/scripts/post-build/react.js
@@ -75,10 +75,6 @@ module.exports = (tmp) => {
 					from: '={true}',
 					to: ''
 				},
-				{
-					from: '{ cls }',
-					to: '{ cls, uuid }'
-				},
 				{
 					from: '} from "../../utils"',
 					to: ', filterPassingProps } from "../../utils"'
@@ -90,22 +86,33 @@ module.exports = (tmp) => {
 						`{...filterPassingProps(props,${JSON.stringify(
 							component?.config?.react?.propsPassingFilter ?? []
 						)})}`
-				},
-				/**
-				 * Mitosis generates Fragments for each mapping function.
-				 * The following overwrites will prevent react from throwing duplicate key warnings.
-				 * uuid() should be part of every component
-				 */
-				{
-					from: /<>/g,
-					to: '<React.Fragment key={uuid()}>'
-				},
-				{
-					from: /<\/>/g,
-					to: '</React.Fragment>'
 				}
 			];
 
+			/**
+			 * Mitosis generates Fragments for each mapping function.
+			 * The following overwrites will prevent react from throwing duplicate key warnings.
+			 */
+			if (component.config?.react?.containsFragmentMap) {
+				if (!tsxFileContent.includes('uuid')) {
+					replacements.push({
+						from: '{ cls',
+						to: '{ cls, uuid'
+					});
+				}
+
+				replacements.push(
+					{
+						from: /<>/g,
+						to: '<React.Fragment key={uuid()}>'
+					},
+					{
+						from: /<\/>/g,
+						to: '</React.Fragment>'
+					}
+				);
+			}
+
 			runReplacements(replacements, component, 'react', tsxFile);
 		}
 	} catch (error) {
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
index 26466ef3abc..0892f65909c 100644
--- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -7,7 +7,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBAccordionItemProps, DBAccordionItemState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -23,7 +23,6 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	const ref = useRef<HTMLDetailsElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
-		_id: 'accordion-item-' + uuid(),
 		_open: false,
 		toggle: (event: ClickEvent<HTMLElement>) => {
 			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
@@ -37,12 +36,6 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	});
 
 	onMount(() => {
-		if (props.id) {
-			state._id = props.id;
-		}
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 		if (props.defaultOpen) {
 			state._open = props.defaultOpen;
 		}
@@ -52,14 +45,11 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	return (
 		<details
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-accordion-item', props.className)}
 			aria-disabled={props.disabled}
 			open={state._open}
 			name={props.name}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<summary onClick={(event) => state.toggle(event)}>
 				<Show when={props.title}>{props.title}</Show>
 				<Show when={!props.title}>
diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
index 1bd667c6672..71ce0adeb72 100644
--- a/packages/components/src/components/accordion/accordion.lite.tsx
+++ b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -8,13 +8,12 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import {
-	DBAccordionState,
+	DBAccordionItemInterface,
 	DBAccordionProps,
-	DBAccordionItemInterface
+	DBAccordionState
 } from './model';
-import { cls, uuid } from '../../utils';
+import { cls } from '../../utils';
 import { DBAccordionItem } from '../accordion-item';
-import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -29,7 +28,6 @@ export default function DBAccordion(props: DBAccordionProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionState>({
-		_id: DEFAULT_ID,
 		openItems: [],
 		clickedId: '',
 		initialized: false,
@@ -68,11 +66,6 @@ export default function DBAccordion(props: DBAccordionProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'accordion-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 		state.initialized = true;
 	});
 	// jscpd:ignore-end
@@ -132,11 +125,8 @@ export default function DBAccordion(props: DBAccordionProps) {
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-accordion', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<Show when={!props.items}>{props.children}</Show>
 			<Show when={props.items}>
 				<For each={state.convertItems(props.items)}>
diff --git a/packages/components/src/components/alert/alert.lite.tsx b/packages/components/src/components/alert/alert.lite.tsx
index 8f73c30f95f..7812495631f 100644
--- a/packages/components/src/components/alert/alert.lite.tsx
+++ b/packages/components/src/components/alert/alert.lite.tsx
@@ -1,15 +1,9 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBAlertProps, DBAlertState } from './model';
 import { DBButton } from '../button';
 import { DBLink } from '../link';
-import { DEFAULT_CLOSE_BUTTON, DEFAULT_ID } from '../../shared/constants';
-import { cls, uuid } from '../../utils';
+import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -20,36 +14,24 @@ export default function DBAlert(props: DBAlertProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAlertState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
 		}
 	});
-
-	onMount(() => {
-		state._id = props.id || 'alert-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-alert', props.className)}
 			aria-live={props.ariaLive}
 			data-variant={props.variant}
 			data-type={props.type}
 			data-icon={props.icon}
 			data-elevation={props.elevation}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			<Show when={props.headline}>
 				<strong class="db-alert-headline">{props.headline}</strong>
 			</Show>
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
index 3deb81c0a18..851c92dd845 100644
--- a/packages/components/src/components/badge/badge.lite.tsx
+++ b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { DBBadgeState, DBBadgeProps } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBBadgeProps, DBBadgeState } from './model';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -15,31 +8,17 @@ useMetadata({
 
 export default function DBBadge(props: DBBadgeProps) {
 	const ref = useRef<HTMLSpanElement>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBBadgeState>({
-		_id: DEFAULT_ID
-	});
-
-	onMount(() => {
-		state._id = props.id || 'badge-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
-	// jscpd:ignore-end
+	const state = useStore<DBBadgeState>({});
 
 	return (
 		<span
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-badge', props.className)}
 			data-variant={props.variant}
 			data-size={props.size}
 			data-emphasis={props.emphasis}
 			data-placement={props.placement}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</span>
 	);
diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
index 1479f3f329a..bd2da275055 100644
--- a/packages/components/src/components/brand/brand.lite.tsx
+++ b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { cls, uuid } from '../../utils';
-import { DBBrandState, DBBrandProps } from './model';
-import { DEFAULT_ID } from '../../shared/constants';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { cls } from '../../utils';
+import { DBBrandProps, DBBrandState } from './model';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,7 +10,6 @@ export default function DBBrand(props: DBBrandProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({
-		_id: DEFAULT_ID,
 		defaultValues: {
 			anchorRef: '/',
 			src: './assets/images/db_logo.svg',
@@ -25,22 +17,10 @@ export default function DBBrand(props: DBBrandProps) {
 			height: '24'
 		}
 	});
-
-	onMount(() => {
-		state._id = props.id || 'brand-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
-		<div ref={ref} id={state._id} class={cls('db-brand', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
+		<div ref={ref} id={props.id} class={cls('db-brand', props.className)}>
 			<a
 				href={props.anchorRef ?? state.defaultValues.anchorRef}
 				title={props.anchorTitle}
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index d32b8fb308c..6d4e7f7e241 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,14 +1,7 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
-import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -18,7 +11,6 @@ export default function DBButton(props: DBButtonProps) {
 	const ref = useRef<HTMLButtonElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBButtonState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -26,18 +18,12 @@ export default function DBButton(props: DBButtonProps) {
 		}
 	});
 
-	onMount(() => {
-		state._id = props.id || 'button-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<button
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-button', props.className, {
 				'is-icon-text-replace': props.noText
 			})}
@@ -58,9 +44,6 @@ export default function DBButton(props: DBButtonProps) {
 			onClick={(event: ClickEvent<HTMLButtonElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</button>
 	);
diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
index 3ed9f598a39..b0a0433d133 100644
--- a/packages/components/src/components/card/card.lite.tsx
+++ b/packages/components/src/components/card/card.lite.tsx
@@ -1,14 +1,7 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import type { DBCardState, DBCardProps } from './model';
-import { cls, uuid } from '../../utils';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import type { DBCardProps, DBCardState } from './model';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
-import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -18,7 +11,6 @@ export default function DBCard(props: DBCardProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCardState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -26,18 +18,12 @@ export default function DBCard(props: DBCardProps) {
 		}
 	});
 
-	onMount(() => {
-		state._id = props.id || 'card-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-card', props.className)}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}
@@ -46,9 +32,6 @@ export default function DBCard(props: DBCardProps) {
 			onClick={(event: ClickEvent<HTMLElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<Show when={props.imgSrc}>
 				<img
 					class="db-card-image"
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 885197a4adf..99a31629b04 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -63,10 +63,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 	onMount(() => {
 		state.initialized = true;
 		state._id = props.id || 'checkbox-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 	// jscpd:ignore-end
 
@@ -97,9 +93,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			data-label-variant={props.labelVariant}
 			className={cls('db-checkbox', props.className)}
 			htmlFor={state._id}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<input
 				ref={ref}
 				type="checkbox"
diff --git a/packages/components/src/components/code-docs/code-docs.lite.tsx b/packages/components/src/components/code-docs/code-docs.lite.tsx
index c6e23227d82..6aed5c70c8d 100644
--- a/packages/components/src/components/code-docs/code-docs.lite.tsx
+++ b/packages/components/src/components/code-docs/code-docs.lite.tsx
@@ -1,15 +1,7 @@
-import {
-	onMount,
-	Show,
-	Slot,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { Slot, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBCodeDocsProps, DBCodeDocsState } from './model';
 import { DBCard } from '../card';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -24,7 +16,6 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCodeDocsState>({
-		_id: DEFAULT_ID,
 		open: false,
 		toggleCode: () => {
 			state.open = !state.open;
@@ -36,22 +27,13 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 		}
 	});
 
-	onMount(() => {
-		state._id = props.id || 'code-docs-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<DBCard
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			className={cls('db-code-docs', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 			<details class="code-details" onToggle={() => state.toggleCode()}>
 				<summary
diff --git a/packages/components/src/components/divider/divider.lite.tsx b/packages/components/src/components/divider/divider.lite.tsx
index 394cc8ee4aa..fd79090d603 100644
--- a/packages/components/src/components/divider/divider.lite.tsx
+++ b/packages/components/src/components/divider/divider.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { DBDividerState, DBDividerProps } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBDividerProps, DBDividerState } from './model';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -16,29 +9,18 @@ useMetadata({
 export default function DBDivider(props: DBDividerProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBDividerState>({
-		_id: DEFAULT_ID
-	});
+	const state = useStore<DBDividerState>({});
 
-	onMount(() => {
-		state._id = props.id || 'divider-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			data-margin={props.margin}
 			data-variant={props.variant}
 			data-emphasis={props.emphasis}
-			class={cls('db-divider', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-		</div>
+			class={cls('db-divider', props.className)}
+		/>
 	);
 }
diff --git a/packages/components/src/components/drawer/drawer.lite.tsx b/packages/components/src/components/drawer/drawer.lite.tsx
index d37ab085826..8936f4c9bb7 100644
--- a/packages/components/src/components/drawer/drawer.lite.tsx
+++ b/packages/components/src/components/drawer/drawer.lite.tsx
@@ -7,10 +7,10 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DBDrawerState, DBDrawerProps } from './model';
+import { DBDrawerProps, DBDrawerState } from './model';
 import { DBButton } from '../button';
-import { DEFAULT_CLOSE_BUTTON, DEFAULT_ID } from '../../shared/constants';
-import { cls, uuid } from '../../utils';
+import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -25,7 +25,6 @@ export default function DBDrawer(props: DBDrawerProps) {
 	const ref = useRef<HTMLDialogElement>(null);
 	const dialogContainerRef = useRef<HTMLDivElement>(null);
 	const state = useStore<DBDrawerState>({
-		_id: DEFAULT_ID,
 		handleClose: (event: any) => {
 			if (event.key === 'Escape') {
 				event.preventDefault();
@@ -70,10 +69,6 @@ export default function DBDrawer(props: DBDrawerProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'drawer-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 		state.handleDialogOpen();
 	});
 
@@ -83,7 +78,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 
 	return (
 		<dialog
-			id={state._id}
+			id={props.id}
 			ref={ref}
 			class="db-drawer"
 			onClick={(event) => {
@@ -91,9 +86,6 @@ export default function DBDrawer(props: DBDrawerProps) {
 			}}
 			onKeyDown={(event) => state.handleClose(event)}
 			data-backdrop={props.backdrop}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<article
 				ref={dialogContainerRef}
 				class={cls('db-drawer-container', props.className)}
diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx
index 55f8d231388..938947f0537 100644
--- a/packages/components/src/components/header/header.lite.tsx
+++ b/packages/components/src/components/header/header.lite.tsx
@@ -37,9 +37,6 @@ export default function DBHeader(props: DBHeaderProps) {
 	onMount(() => {
 		state.initialized = true;
 		state._id = props.id || 'header-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 
 	onUpdate(() => {
@@ -67,10 +64,6 @@ export default function DBHeader(props: DBHeaderProps) {
 			class={cls('db-header', props.className)}
 			id={state._id}
 			data-on-forcing-mobile={props.forceMobile && !state.forcedToMobile}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			<DBDrawer
 				className="db-header-drawer"
 				rounded
diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
index e41b3c9a5b0..a2496ad3b24 100644
--- a/packages/components/src/components/icon/icon.lite.tsx
+++ b/packages/components/src/components/icon/icon.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import type { DBIconState, DBIconProps } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import type { DBIconProps, DBIconState } from './model';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -16,31 +9,20 @@ useMetadata({
 export default function DBIcon(props: DBIconProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBIconState>({
-		_id: DEFAULT_ID
-	});
+	const state = useStore<DBIconState>({});
 
-	onMount(() => {
-		state._id = props.id || 'icon-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<span
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-icon', props.className)}
 			data-icon={props.icon}
 			data-icon-weight={props.weight}
 			data-icon-variant={props.variant}
 			aria-hidden="true"
 			title={props.title}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</span>
 	);
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index c47b3e9d6cc..0d5cfcde288 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -16,31 +9,19 @@ useMetadata({
 export default function DBInfotext(props: DBInfotextProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBInfotextState>({
-		_id: DEFAULT_ID
-	});
+	const state = useStore<DBInfotextState>({});
 	// jscpd:ignore-end
 
-	onMount(() => {
-		state._id = props.id || 'infotext-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
-
 	// TODO: Check if this should be a div or a span
 	return (
 		<span
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-infotext', props.className)}
 			title={props.title}
 			data-icon={props.icon}
 			data-variant={props.variant}
 			data-size={props.size}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</span>
 	);
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 997de6c352a..83588433289 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -77,10 +77,6 @@ export default function DBInput(props: DBInputProps) {
 		state._id = props.id || 'input-' + uuid();
 		state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._dataListId = props.dataListId || `datalist-${uuid()}`;
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 	// jscpd:ignore-end
 
@@ -91,9 +87,6 @@ export default function DBInput(props: DBInputProps) {
 			data-label-variant={props.labelVariant}
 			data-icon={props.icon}
 			data-icon-after={props.iconAfter}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<label htmlFor={state._id}>
 				{props.label ?? state.defaultValues.label}
 			</label>
@@ -145,9 +138,7 @@ export default function DBInput(props: DBInputProps) {
 					</For>
 				</datalist>
 			</Show>
-
 			{props.children}
-
 			<Show when={props.message}>
 				<DBInfotext
 					size="small"
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index d6e0a365c5c..acce97b517e 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -1,12 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { DBLinkState, DBLinkProps } from './model';
-import { cls, uuid } from '../../utils';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBLinkProps, DBLinkState } from './model';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -26,18 +20,12 @@ export default function DBLink(props: DBLinkProps) {
 		}
 	});
 
-	onMount(() => {
-		state._id = props.id || 'link-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<a
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
 			title={props.title}
@@ -56,9 +44,6 @@ export default function DBLink(props: DBLinkProps) {
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<Show when={props.text}>
 				<span>{props.text}</span>
 			</Show>
diff --git a/packages/components/src/components/main-navigation/main-navigation.lite.tsx b/packages/components/src/components/main-navigation/main-navigation.lite.tsx
index 877b32be5fc..0a61b274f5a 100644
--- a/packages/components/src/components/main-navigation/main-navigation.lite.tsx
+++ b/packages/components/src/components/main-navigation/main-navigation.lite.tsx
@@ -22,9 +22,6 @@ export default function DBMainNavigation(props: DBMainNavigationProps) {
 
 	onMount(() => {
 		state._id = props.id || 'main-navigation-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 
 	// jscpd:ignore-end
@@ -34,9 +31,6 @@ export default function DBMainNavigation(props: DBMainNavigationProps) {
 			ref={ref}
 			id={state._id}
 			class={cls('db-main-navigation', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<menu>{props.children}</menu>
 		</nav>
 	);
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
index 907d1744d58..8d4a27ee5de 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -10,7 +10,7 @@ import {
 import { DBNavigationItemProps, DBNavigationItemState } from './model';
 import { DBButton } from '../button';
 import { cls, uuid, visibleInVX, visibleInVY } from '../../utils';
-import { DEFAULT_BACK, DEFAULT_ID } from '../../shared/constants';
+import { DEFAULT_BACK } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -22,7 +22,6 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 
 	// jscpd:ignore-start
 	const state = useStore<DBNavigationItemState>({
-		_id: DEFAULT_ID,
 		initialized: false,
 		hasAreaPopup: false,
 		hasSubNavigation: true,
@@ -44,11 +43,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'navigation-item-' + uuid();
 		state.initialized = true;
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 
 	onUpdate(() => {
@@ -94,16 +89,12 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 	return (
 		<li
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
 			aria-current={props.active ? 'page' : undefined}
 			aria-disabled={props.disabled}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			<Show when={!state.hasSubNavigation}>{props.children}</Show>
 
 			<Show when={state.hasSubNavigation}>
diff --git a/packages/components/src/components/page/page.lite.tsx b/packages/components/src/components/page/page.lite.tsx
index 72d59e5011f..be58c3ddda8 100644
--- a/packages/components/src/components/page/page.lite.tsx
+++ b/packages/components/src/components/page/page.lite.tsx
@@ -1,14 +1,12 @@
 import {
 	onMount,
-	Show,
 	Slot,
 	useMetadata,
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBPageProps, DBPageState } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -18,16 +16,11 @@ export default function DBPage(props: DBPageProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPageState>({
-		_id: DEFAULT_ID,
 		fontsLoaded: false
 	});
 
 	onMount(() => {
-		state._id = props.id || 'page-' + uuid();
 		state.fontsLoaded = !props.fadeIn;
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 
 		if (document && props.fadeIn) {
 			document.fonts.ready.then(() => {
@@ -42,15 +35,12 @@ export default function DBPage(props: DBPageProps) {
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-page', props.className, {
 				'fixed-header-footer': props.type === 'fixedHeaderFooter'
 			})}
 			data-fade-in={props.fadeIn}
 			data-fonts-loaded={state.fontsLoaded}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<Slot name="header" />
 			<main class="db-main">{props.children}</main>
 			<Slot name="footer" />
diff --git a/packages/components/src/components/popover/popover.lite.tsx b/packages/components/src/components/popover/popover.lite.tsx
index f943d1f37e9..60ba32dc5b7 100644
--- a/packages/components/src/components/popover/popover.lite.tsx
+++ b/packages/components/src/components/popover/popover.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { DBPopoverState, DBPopoverProps } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBPopoverProps, DBPopoverState } from './model';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -18,24 +11,17 @@ export default function DBPopover(props: DBPopoverProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBPopoverState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			event.stopPropagation();
 		}
 	});
 
-	onMount(() => {
-		state._id = props.id || 'popover-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<i
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-popover', props.className)}
 			data-spacing={props.spacing}
 			data-gap={props.gap}
@@ -47,9 +33,6 @@ export default function DBPopover(props: DBPopoverProps) {
 			onClick={(event: ClickEvent<HTMLElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</i>
 	);
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index f9fc1751bcd..49f7ed59493 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -62,10 +62,6 @@ export default function DBRadio(props: DBRadioProps) {
 	onMount(() => {
 		state.initialized = true;
 		state._id = props.id || 'radio-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 	// jscpd:ignore-end
 
@@ -88,9 +84,6 @@ export default function DBRadio(props: DBRadioProps) {
 			data-label-variant={props.labelVariant}
 			class={cls('db-radio', props.className)}
 			htmlFor={state._id}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<input
 				ref={ref}
 				type="radio"
diff --git a/packages/components/src/components/section/section.lite.tsx b/packages/components/src/components/section/section.lite.tsx
index 7698a05ab41..665c7ddf0b9 100644
--- a/packages/components/src/components/section/section.lite.tsx
+++ b/packages/components/src/components/section/section.lite.tsx
@@ -22,9 +22,6 @@ export default function DBSection(props: DBSectionProps) {
 
 	onMount(() => {
 		state._id = props.id || 'section-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 	// jscpd:ignore-end
 
@@ -34,9 +31,6 @@ export default function DBSection(props: DBSectionProps) {
 			id={state._id}
 			className={cls('db-section', props.className)}
 			data-size={props.size || 'medium'}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{/* TODO: We need to reevaluate whether we could get rid of this tag */}
 			<div data-variant={props.variant}>{props.children}</div>
 		</section>
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index dc20a35b7b6..8626207c6c7 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -78,10 +78,6 @@ export default function DBSelect(props: DBSelectProps) {
 		state._id = id;
 		state._messageId = id + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._placeholderId = id + DEFAULT_PLACEHOLDER_ID_SUFFIX;
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 	// jscpd:ignore-end
 
@@ -91,9 +87,6 @@ export default function DBSelect(props: DBSelectProps) {
 			data-variant={props.variant}
 			data-label-variant={props.labelVariant}
 			data-icon={props.icon}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
 				ref={ref}
@@ -133,6 +126,7 @@ export default function DBSelect(props: DBSelectProps) {
 												optgroupOption: DBSelectOptionType
 											) => (
 												<option
+													key={optgroupOption.value.toString()}
 													value={optgroupOption.value}
 													disabled={
 														optgroupOption.disabled
diff --git a/packages/components/src/components/tab-list/tab-list.lite.tsx b/packages/components/src/components/tab-list/tab-list.lite.tsx
index 0c8c2514189..b541d96c7fa 100644
--- a/packages/components/src/components/tab-list/tab-list.lite.tsx
+++ b/packages/components/src/components/tab-list/tab-list.lite.tsx
@@ -1,10 +1,4 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBTabListProps, DBTabListState } from './model';
 import { cls } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
@@ -21,11 +15,6 @@ export default function DBTabList(props: DBTabListProps) {
 		_id: DEFAULT_ID
 	});
 
-	onMount(() => {
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
@@ -34,9 +23,6 @@ export default function DBTabList(props: DBTabListProps) {
 			id={state._id}
 			class={cls('db-tab-list', props.className)}
 			role="tablist">
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<div class="db-tab-list-scroll-container">{props.children}</div>
 		</div>
 	);
diff --git a/packages/components/src/components/tab-panel/tab-panel.lite.tsx b/packages/components/src/components/tab-panel/tab-panel.lite.tsx
index dad07f2c969..f599180c5ff 100644
--- a/packages/components/src/components/tab-panel/tab-panel.lite.tsx
+++ b/packages/components/src/components/tab-panel/tab-panel.lite.tsx
@@ -21,11 +21,7 @@ export default function DBTabPanel(props: DBTabPanelProps) {
 		_id: DEFAULT_ID
 	});
 
-	onMount(() => {
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
+	onMount(() => {});
 	// jscpd:ignore-end
 
 	return (
diff --git a/packages/components/src/components/tab/tab.lite.tsx b/packages/components/src/components/tab/tab.lite.tsx
index 81180fb8a0a..09882026edf 100644
--- a/packages/components/src/components/tab/tab.lite.tsx
+++ b/packages/components/src/components/tab/tab.lite.tsx
@@ -24,9 +24,6 @@ export default function DBTab(props: DBTabProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 	});
 	// jscpd:ignore-end
 
@@ -48,9 +45,6 @@ export default function DBTab(props: DBTabProps) {
 			data-icon-after={props.iconAfter}
 			data-width={props.width}
 			data-alignment={props.alignment}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<input
 				disabled={props.disabled}
 				ref={ref}
diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
index 454d242467c..f0a0adc45fd 100644
--- a/packages/components/src/components/tabs/tabs.lite.tsx
+++ b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -65,9 +65,6 @@ export default function DBTabs(props: DBTabsProps) {
 
 	onMount(() => {
 		state._id = props.id || 'tabs-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 
 		state._name = props.name || uuid();
 
@@ -189,10 +186,6 @@ export default function DBTabs(props: DBTabsProps) {
 			class={cls('db-tabs', props.className)}
 			data-orientation={props.orientation}
 			data-scroll-behaviour={props.behaviour}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			<Show when={state.showScrollLeft}>
 				<DBButton
 					className="tabs-scroll-left"
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index 00286ef1942..6e07cec1384 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -1,14 +1,7 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBButton } from '../button';
 import { DBTagProps, DBTagState } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,7 +10,6 @@ useMetadata({
 export default function DBTag(props: DBTagProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	const state = useStore<DBTagState>({
-		_id: DEFAULT_ID,
 		handleRemove: () => {
 			if (props.onRemove) {
 				props.onRemove();
@@ -33,18 +25,10 @@ export default function DBTag(props: DBTagProps) {
 		}
 	});
 
-	onMount(() => {
-		state._id = props.id || 'tag-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
-
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-tag', props.className)}
 			data-disabled={props.disabled}
 			data-variant={props.variant}
@@ -52,10 +36,6 @@ export default function DBTag(props: DBTagProps) {
 			data-icon={props.icon}
 			data-no-text={props.noText}
 			data-overflow={props.overflow}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			{props.children}
 
 			<Show when={props.text}>{props.text}</Show>
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 580e7635fe1..e14bff76aa4 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -68,10 +68,6 @@ export default function DBTextarea(props: DBTextareaProps) {
 	});
 
 	onMount(() => {
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-
 		state._id = props.id || 'textarea-' + uuid();
 		state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
 	});
@@ -82,10 +78,6 @@ export default function DBTextarea(props: DBTextareaProps) {
 			class={cls('db-textarea', props.className)}
 			data-label-variant={props.labelVariant}
 			data-variant={props.variant}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			<label htmlFor={state._id}>
 				{props.label ?? state.defaultValues.label}
 			</label>
diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx
index 88a5d1e0188..541238a6c37 100644
--- a/packages/components/src/components/tooltip/tooltip.lite.tsx
+++ b/packages/components/src/components/tooltip/tooltip.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBTooltipProps, DBTooltipState } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -18,18 +11,10 @@ export default function DBTooltip(props: DBTooltipProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTooltipState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			event.stopPropagation();
 		}
 	});
-
-	onMount(() => {
-		state._id = props.id || 'tooltip-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	// TODO: Shall we check if only <span>, <p> or direct text was passed as children?
@@ -38,7 +23,7 @@ export default function DBTooltip(props: DBTooltipProps) {
 			role="tooltip"
 			ref={ref}
 			className={cls('db-tooltip', props.className)}
-			id={state._id}
+			id={props.id}
 			data-emphasis={props.emphasis}
 			data-animation={props.animation}
 			data-delay={props.delay}
@@ -50,9 +35,6 @@ export default function DBTooltip(props: DBTooltipProps) {
 			onClick={(event: ClickEvent<HTMLElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</i>
 	);
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index 43edad2beb2..a49dbc39cb3 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -26,11 +26,6 @@ export type GlobalProps = {
 	 */
 	key?: string;
 
-	/**
-	 * Web Component specific: Adds a link tag with the path to show css inside Shadow DOM.
-	 */
-	stylePath?: string;
-
 	/**
 	 * The default tabindex (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex?retiredLocale=de).
 	 */
@@ -44,7 +39,6 @@ export type GlobalProps = {
 
 export type GlobalState = {
 	_id?: string;
-	stylePath?: string;
 	defaultValues?: { [key: string]: string };
 };
 
diff --git a/showcases/react-showcase/src/components/brand/index.tsx b/showcases/react-showcase/src/components/brand/index.tsx
index 927f301d3f9..466f4d804e5 100644
--- a/showcases/react-showcase/src/components/brand/index.tsx
+++ b/showcases/react-showcase/src/components/brand/index.tsx
@@ -19,7 +19,6 @@ const getBrand = ({
 	describedbyid,
 	id,
 	key,
-	stylePath,
 	tabIndex,
 	title
 }: DBBrandProps) => (
@@ -37,7 +36,6 @@ const getBrand = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		stylePath={stylePath}
 		tabIndex={tabIndex}
 		title={title}>
 		{children}
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index 2ed47a4f1d5..eda76c9459a 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -250,6 +250,19 @@ const FormComponent = () => {
 					<DBTabPanel>Tab Panel 2</DBTabPanel>
 					<DBTabPanel>Tab Panel 3</DBTabPanel>
 				</DBTabs>
+
+				<DBSelect
+					id="select-test"
+					value={select}
+					label="Label"
+					onChange={(event) => {
+						setSelect(event.target.value);
+					}}
+					options={[
+						{ label: 'Test1', value: 'Test1' },
+						{ label: 'Test2', value: 'Test2' }
+					]}
+				/>
 			</div>
 		</div>
 	);
diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx
index 178911f80ff..996286644dc 100644
--- a/showcases/react-showcase/src/components/header/index.tsx
+++ b/showcases/react-showcase/src/components/header/index.tsx
@@ -20,7 +20,6 @@ const getHeader = ({
 	describedbyid,
 	id,
 	key,
-	stylePath,
 	tabIndex,
 	title,
 	onToggle
@@ -64,7 +63,6 @@ const getHeader = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		stylePath={stylePath}
 		tabIndex={tabIndex}
 		title={title}
 		onToggle={onToggle}>
diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx
index af4df6cc199..2d607755a59 100644
--- a/showcases/react-showcase/src/components/page/index.tsx
+++ b/showcases/react-showcase/src/components/page/index.tsx
@@ -20,7 +20,6 @@ const getPage = ({
 	describedbyid,
 	id,
 	key,
-	stylePath,
 	tabIndex,
 	title
 }: DBPageProps) => (
@@ -31,7 +30,6 @@ const getPage = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		stylePath={stylePath}
 		tabIndex={tabIndex}
 		slotHeader={
 			<DBHeader