diff --git a/.changeset/flat-dryers-tell.md b/.changeset/flat-dryers-tell.md
new file mode 100644
index 00000000..d2fc5fc4
--- /dev/null
+++ b/.changeset/flat-dryers-tell.md
@@ -0,0 +1,6 @@
+---
+"@tapsioss/react-components": minor
+---
+
+Expose element class
+  
\ No newline at end of file
diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts
index 92d5c7ca..1125927d 100644
--- a/packages/react-components/scripts/generate.ts
+++ b/packages/react-components/scripts/generate.ts
@@ -40,8 +40,6 @@ type ReactMetadata = {
 
 const asyncExec = promisify(exec);
 
-const LIT_REACT_NAMESPACE = "LitReact";
-
 const { dirname } = getFileMeta(import.meta.url);
 
 const packageDir = path.resolve(dirname, "..");
@@ -134,8 +132,10 @@ const createReactMetadata = (
     e.endsWith("Slots"),
   );
 
+  const inputClassName = elementClassName.replace("ElementClass", "Element");
+
   return {
-    elementClass: elementClassName,
+    elementClass: inputClassName,
     componentName,
     elementTag,
     events,
@@ -148,9 +148,8 @@ const createReactMetadata = (
 
 const getReactComponentImports = () => {
   return [
-    `import * as ${LIT_REACT_NAMESPACE} from "@lit/react";`,
+    `import { createComponent, type ReactWebComponent, type EventName } from "@lit/react";`,
     `import * as React from "react";`,
-    'import { type ReactWebComponent } from "@lit/react";',
   ].join("\n");
 };
 
@@ -183,7 +182,7 @@ const getReactComponentCode = async (
           return `${eventNameInReact}: '${eventName}'`;
         }
 
-        return `${eventNameInReact}: '${eventName}' as ${LIT_REACT_NAMESPACE}.EventName<${eventClass}>`;
+        return `${eventNameInReact}: '${eventName}' as EventName<${eventClass}>`;
       })
       .filter(event => event !== null)
       .join(",") || ""
@@ -196,10 +195,10 @@ const getReactComponentCode = async (
 
   const exports =
     exportsList.length > 0
-      ? `export { ${exportsList.filter(Boolean).join(", ")} };`
+      ? `export { ${[`${componentName}Element`, ...exportsList.filter(Boolean)].join(", ")} };`
       : "";
 
-  const elementClass = `${componentName}ElementClass`;
+  const elementClass = `${componentName}Element`;
   const importsList = [
     `${rawElementClass} as ${elementClass}`,
     registerFunction,
@@ -213,12 +212,33 @@ const getReactComponentCode = async (
     ? `${registerFunction}();`
     : `if (typeof window !== "undefined" && !customElements.get("${parentInfo?.tagName}")){\n/* eslint-disable no-console */\nconsole.warn("[TAPSI][${componentName}]: The \`${parentInfo?.tagName}\` tag is not registered. Since \`${componentName}\` is a compound component, it should be wrapped inside \`${parentInfo?.elementClassName}\` component.");\n/* eslint-enable no-console */}`;
 
+  const componentType = `ReactWebComponent<${elementClass}${
+    _events?.length > 0
+      ? `, { ${
+          _events
+            ?.map(event => {
+              const eventClass = event.class;
+              const eventNameInReact = event.key;
+
+              if (!eventClass) {
+                return `${eventNameInReact}: string`;
+              }
+
+              return `${eventNameInReact}: EventName<${eventClass}>`;
+            })
+            .filter(event => event !== null)
+            .join(",") || ""
+        } }`
+      : ""
+  }>`;
+
   return Mustache.render(
     componentTemplateStr,
     {
       imports,
       register: registerSection,
       componentName,
+      componentType,
       elementTag,
       elementClass,
       events,
diff --git a/packages/react-components/src/Avatar/Avatar.ts b/packages/react-components/src/Avatar/Avatar.ts
index 4c2a4d7f..254c97fb 100644
--- a/packages/react-components/src/Avatar/Avatar.ts
+++ b/packages/react-components/src/Avatar/Avatar.ts
@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Avatar as AvatarElementClass,
+  Avatar as AvatarElement,
   AvatarSlots,
   registerAvatar,
 } from "@tapsioss/web-components";
 
 registerAvatar();
 
-export const Avatar = LitReact.createComponent({
+export const Avatar: ReactWebComponent<AvatarElement> = createComponent({
   tagName: "tapsi-avatar",
-  elementClass: AvatarElementClass,
+  elementClass: AvatarElement,
   react: React,
   events: {},
 });
 
-export { AvatarSlots };
+export { AvatarElement, AvatarSlots };
diff --git a/packages/react-components/src/Badge/Badge.ts b/packages/react-components/src/Badge/Badge.ts
index dc889cfc..cfad2f1c 100644
--- a/packages/react-components/src/Badge/Badge.ts
+++ b/packages/react-components/src/Badge/Badge.ts
@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Badge as BadgeElementClass,
+  Badge as BadgeElement,
   BadgeSlots,
   registerBadge,
 } from "@tapsioss/web-components";
 
 registerBadge();
 
-export const Badge = LitReact.createComponent({
+export const Badge: ReactWebComponent<BadgeElement> = createComponent({
   tagName: "tapsi-badge",
-  elementClass: BadgeElementClass,
+  elementClass: BadgeElement,
   react: React,
   events: {},
 });
 
-export { BadgeSlots };
+export { BadgeElement, BadgeSlots };
diff --git a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts
index a7ca9cb1..46b92be7 100644
--- a/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts
+++ b/packages/react-components/src/BadgeWrapper/BadgeWrapper.ts
@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  BadgeWrapper as BadgeWrapperElementClass,
+  BadgeWrapper as BadgeWrapperElement,
   BadgeWrapperSlots,
   registerBadgeWrapper,
 } from "@tapsioss/web-components";
 
 registerBadgeWrapper();
 
-export const BadgeWrapper = LitReact.createComponent({
-  tagName: "tapsi-badge-wrapper",
-  elementClass: BadgeWrapperElementClass,
-  react: React,
-  events: {},
-});
+export const BadgeWrapper: ReactWebComponent<BadgeWrapperElement> =
+  createComponent({
+    tagName: "tapsi-badge-wrapper",
+    elementClass: BadgeWrapperElement,
+    react: React,
+    events: {},
+  });
 
-export { BadgeWrapperSlots };
+export { BadgeWrapperElement, BadgeWrapperSlots };
diff --git a/packages/react-components/src/Banner/Banner.ts b/packages/react-components/src/Banner/Banner.ts
index e9b853ad..a71acf73 100644
--- a/packages/react-components/src/Banner/Banner.ts
+++ b/packages/react-components/src/Banner/Banner.ts
@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Banner as BannerElementClass,
+  Banner as BannerElement,
   BannerSlots,
   registerBanner,
 } from "@tapsioss/web-components";
 
 registerBanner();
 
-export const Banner = LitReact.createComponent({
+export const Banner: ReactWebComponent<BannerElement> = createComponent({
   tagName: "tapsi-banner",
-  elementClass: BannerElementClass,
+  elementClass: BannerElement,
   react: React,
   events: {},
 });
 
-export { BannerSlots };
+export { BannerElement, BannerSlots };
diff --git a/packages/react-components/src/BottomNavigation/BottomNavigation.ts b/packages/react-components/src/BottomNavigation/BottomNavigation.ts
index f9bfccf4..5b00ea42 100644
--- a/packages/react-components/src/BottomNavigation/BottomNavigation.ts
+++ b/packages/react-components/src/BottomNavigation/BottomNavigation.ts
@@ -1,9 +1,13 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   BottomNavigationActiveChangeEvent,
-  BottomNavigation as BottomNavigationElementClass,
+  BottomNavigation as BottomNavigationElement,
   BottomNavigationItemSlots,
   BottomNavigationSlots,
   registerBottomNavigation,
@@ -11,18 +15,22 @@ import {
 
 registerBottomNavigation();
 
-export const BottomNavigation = LitReact.createComponent({
+export const BottomNavigation: ReactWebComponent<
+  BottomNavigationElement,
+  { onActiveChange: EventName<BottomNavigationActiveChangeEvent> }
+> = createComponent({
   tagName: "tapsi-bottom-navigation",
-  elementClass: BottomNavigationElementClass,
+  elementClass: BottomNavigationElement,
   react: React,
   events: {
     onActiveChange:
-      "activechange" as LitReact.EventName<BottomNavigationActiveChangeEvent>,
+      "activechange" as EventName<BottomNavigationActiveChangeEvent>,
   },
 });
 
 export {
   BottomNavigationActiveChangeEvent,
+  BottomNavigationElement,
   BottomNavigationItemSlots,
   BottomNavigationSlots,
 };
diff --git a/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts b/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts
index e003027f..ac4db90c 100644
--- a/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts
+++ b/packages/react-components/src/BottomNavigationItem/BottomNavigationItem.ts
@@ -1,7 +1,7 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
-import { BottomNavigationItem as BottomNavigationItemElementClass } from "@tapsioss/web-components";
+import { BottomNavigationItem as BottomNavigationItemElement } from "@tapsioss/web-components";
 
 if (
   typeof window !== "undefined" &&
@@ -14,9 +14,10 @@ if (
   /* eslint-enable no-console */
 }
 
-export const BottomNavigationItem = LitReact.createComponent({
-  tagName: "tapsi-bottom-navigation-item",
-  elementClass: BottomNavigationItemElementClass,
-  react: React,
-  events: {},
-});
+export const BottomNavigationItem: ReactWebComponent<BottomNavigationItemElement> =
+  createComponent({
+    tagName: "tapsi-bottom-navigation-item",
+    elementClass: BottomNavigationItemElement,
+    react: React,
+    events: {},
+  });
diff --git a/packages/react-components/src/BottomSheet/BottomSheet.ts b/packages/react-components/src/BottomSheet/BottomSheet.ts
index 9813859d..45334eaa 100644
--- a/packages/react-components/src/BottomSheet/BottomSheet.ts
+++ b/packages/react-components/src/BottomSheet/BottomSheet.ts
@@ -1,10 +1,14 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   BottomSheetClosedEvent,
   BottomSheetClosingEvent,
-  BottomSheet as BottomSheetElementClass,
+  BottomSheet as BottomSheetElement,
   BottomSheetHideEvent,
   BottomSheetOpenedEvent,
   BottomSheetOpeningEvent,
@@ -16,24 +20,36 @@ import {
 
 registerBottomSheet();
 
-export const BottomSheet = LitReact.createComponent({
+export const BottomSheet: ReactWebComponent<
+  BottomSheetElement,
+  {
+    onSnapped: EventName<BottomSheetSnappedEvent>;
+    onOpening: EventName<BottomSheetOpeningEvent>;
+    onClosing: EventName<BottomSheetClosingEvent>;
+    onOpened: EventName<BottomSheetOpenedEvent>;
+    onClosed: EventName<BottomSheetClosedEvent>;
+    onHide: EventName<BottomSheetHideEvent>;
+    onShow: EventName<BottomSheetShowEvent>;
+  }
+> = createComponent({
   tagName: "tapsi-bottom-sheet",
-  elementClass: BottomSheetElementClass,
+  elementClass: BottomSheetElement,
   react: React,
   events: {
-    onSnapped: "snapped" as LitReact.EventName<BottomSheetSnappedEvent>,
-    onOpening: "opening" as LitReact.EventName<BottomSheetOpeningEvent>,
-    onClosing: "closing" as LitReact.EventName<BottomSheetClosingEvent>,
-    onOpened: "opened" as LitReact.EventName<BottomSheetOpenedEvent>,
-    onClosed: "closed" as LitReact.EventName<BottomSheetClosedEvent>,
-    onHide: "hide" as LitReact.EventName<BottomSheetHideEvent>,
-    onShow: "show" as LitReact.EventName<BottomSheetShowEvent>,
+    onSnapped: "snapped" as EventName<BottomSheetSnappedEvent>,
+    onOpening: "opening" as EventName<BottomSheetOpeningEvent>,
+    onClosing: "closing" as EventName<BottomSheetClosingEvent>,
+    onOpened: "opened" as EventName<BottomSheetOpenedEvent>,
+    onClosed: "closed" as EventName<BottomSheetClosedEvent>,
+    onHide: "hide" as EventName<BottomSheetHideEvent>,
+    onShow: "show" as EventName<BottomSheetShowEvent>,
   },
 });
 
 export {
   BottomSheetClosedEvent,
   BottomSheetClosingEvent,
+  BottomSheetElement,
   BottomSheetHideEvent,
   BottomSheetOpenedEvent,
   BottomSheetOpeningEvent,
diff --git a/packages/react-components/src/Button/Button.ts b/packages/react-components/src/Button/Button.ts
index 4f3560da..7847ecd8 100644
--- a/packages/react-components/src/Button/Button.ts
+++ b/packages/react-components/src/Button/Button.ts
@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Button as ButtonElementClass,
+  Button as ButtonElement,
   ButtonSlots,
   registerButton,
 } from "@tapsioss/web-components";
 
 registerButton();
 
-export const Button = LitReact.createComponent({
+export const Button: ReactWebComponent<ButtonElement> = createComponent({
   tagName: "tapsi-button",
-  elementClass: ButtonElementClass,
+  elementClass: ButtonElement,
   react: React,
   events: {},
 });
 
-export { ButtonSlots };
+export { ButtonElement, ButtonSlots };
diff --git a/packages/react-components/src/ButtonGroup/ButtonGroup.ts b/packages/react-components/src/ButtonGroup/ButtonGroup.ts
index bd7d7ea5..4416f1d4 100644
--- a/packages/react-components/src/ButtonGroup/ButtonGroup.ts
+++ b/packages/react-components/src/ButtonGroup/ButtonGroup.ts
@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  ButtonGroup as ButtonGroupElementClass,
+  ButtonGroup as ButtonGroupElement,
   ButtonGroupSlots,
   registerButtonGroup,
 } from "@tapsioss/web-components";
 
 registerButtonGroup();
 
-export const ButtonGroup = LitReact.createComponent({
-  tagName: "tapsi-button-group",
-  elementClass: ButtonGroupElementClass,
-  react: React,
-  events: {},
-});
+export const ButtonGroup: ReactWebComponent<ButtonGroupElement> =
+  createComponent({
+    tagName: "tapsi-button-group",
+    elementClass: ButtonGroupElement,
+    react: React,
+    events: {},
+  });
 
-export { ButtonGroupSlots };
+export { ButtonGroupElement, ButtonGroupSlots };
diff --git a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts
index 6e808bc0..03fcc561 100644
--- a/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts
+++ b/packages/react-components/src/ChatBubbleIn/ChatBubbleIn.ts
@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  ChatBubbleIn as ChatBubbleInElementClass,
+  ChatBubbleIn as ChatBubbleInElement,
   ChatBubbleInSlots,
   registerChatBubbleIn,
 } from "@tapsioss/web-components";
 
 registerChatBubbleIn();
 
-export const ChatBubbleIn = LitReact.createComponent({
-  tagName: "tapsi-chat-bubble-in",
-  elementClass: ChatBubbleInElementClass,
-  react: React,
-  events: {},
-});
+export const ChatBubbleIn: ReactWebComponent<ChatBubbleInElement> =
+  createComponent({
+    tagName: "tapsi-chat-bubble-in",
+    elementClass: ChatBubbleInElement,
+    react: React,
+    events: {},
+  });
 
-export { ChatBubbleInSlots };
+export { ChatBubbleInElement, ChatBubbleInSlots };
diff --git a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts
index 159993d6..f102358c 100644
--- a/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts
+++ b/packages/react-components/src/ChatBubbleOut/ChatBubbleOut.ts
@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  ChatBubbleOut as ChatBubbleOutElementClass,
+  ChatBubbleOut as ChatBubbleOutElement,
   ChatBubbleOutSlots,
   registerChatBubbleOut,
 } from "@tapsioss/web-components";
 
 registerChatBubbleOut();
 
-export const ChatBubbleOut = LitReact.createComponent({
-  tagName: "tapsi-chat-bubble-out",
-  elementClass: ChatBubbleOutElementClass,
-  react: React,
-  events: {},
-});
+export const ChatBubbleOut: ReactWebComponent<ChatBubbleOutElement> =
+  createComponent({
+    tagName: "tapsi-chat-bubble-out",
+    elementClass: ChatBubbleOutElement,
+    react: React,
+    events: {},
+  });
 
-export { ChatBubbleOutSlots };
+export { ChatBubbleOutElement, ChatBubbleOutSlots };
diff --git a/packages/react-components/src/Checkbox/Checkbox.ts b/packages/react-components/src/Checkbox/Checkbox.ts
index f619e201..bcff3dc2 100644
--- a/packages/react-components/src/Checkbox/Checkbox.ts
+++ b/packages/react-components/src/Checkbox/Checkbox.ts
@@ -1,18 +1,21 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Checkbox as CheckboxElementClass,
+  Checkbox as CheckboxElement,
   registerCheckbox,
 } from "@tapsioss/web-components";
 
 registerCheckbox();
 
-export const Checkbox = LitReact.createComponent({
+export const Checkbox: ReactWebComponent<
+  CheckboxElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-checkbox",
-  elementClass: CheckboxElementClass,
+  elementClass: CheckboxElement,
   react: React,
   events: { onChange: "input", onInput: "input" },
 });
 
-export {};
+export { CheckboxElement };
diff --git a/packages/react-components/src/Chip/Chip.ts b/packages/react-components/src/Chip/Chip.ts
index 1aa4faf9..1beb520d 100644
--- a/packages/react-components/src/Chip/Chip.ts
+++ b/packages/react-components/src/Chip/Chip.ts
@@ -1,9 +1,13 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   ChipDeselectEvent,
-  Chip as ChipElementClass,
+  Chip as ChipElement,
   ChipSelectEvent,
   ChipSlots,
   registerChip,
@@ -11,14 +15,20 @@ import {
 
 registerChip();
 
-export const Chip = LitReact.createComponent({
+export const Chip: ReactWebComponent<
+  ChipElement,
+  {
+    onSelect: EventName<ChipSelectEvent>;
+    onDeselect: EventName<ChipDeselectEvent>;
+  }
+> = createComponent({
   tagName: "tapsi-chip",
-  elementClass: ChipElementClass,
+  elementClass: ChipElement,
   react: React,
   events: {
-    onSelect: "select" as LitReact.EventName<ChipSelectEvent>,
-    onDeselect: "deselect" as LitReact.EventName<ChipDeselectEvent>,
+    onSelect: "select" as EventName<ChipSelectEvent>,
+    onDeselect: "deselect" as EventName<ChipDeselectEvent>,
   },
 });
 
-export { ChipDeselectEvent, ChipSelectEvent, ChipSlots };
+export { ChipDeselectEvent, ChipElement, ChipSelectEvent, ChipSlots };
diff --git a/packages/react-components/src/ChipGroup/ChipGroup.ts b/packages/react-components/src/ChipGroup/ChipGroup.ts
index 7a7af5b6..44e6e2a9 100644
--- a/packages/react-components/src/ChipGroup/ChipGroup.ts
+++ b/packages/react-components/src/ChipGroup/ChipGroup.ts
@@ -1,8 +1,12 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
-  ChipGroup as ChipGroupElementClass,
+  ChipGroup as ChipGroupElement,
   ChipGroupSelectChangeEvent,
   ChipGroupSlots,
   registerChipGroup,
@@ -10,14 +14,16 @@ import {
 
 registerChipGroup();
 
-export const ChipGroup = LitReact.createComponent({
+export const ChipGroup: ReactWebComponent<
+  ChipGroupElement,
+  { onSelectChange: EventName<ChipGroupSelectChangeEvent> }
+> = createComponent({
   tagName: "tapsi-chip-group",
-  elementClass: ChipGroupElementClass,
+  elementClass: ChipGroupElement,
   react: React,
   events: {
-    onSelectChange:
-      "selectchange" as LitReact.EventName<ChipGroupSelectChangeEvent>,
+    onSelectChange: "selectchange" as EventName<ChipGroupSelectChangeEvent>,
   },
 });
 
-export { ChipGroupSelectChangeEvent, ChipGroupSlots };
+export { ChipGroupElement, ChipGroupSelectChangeEvent, ChipGroupSlots };
diff --git a/packages/react-components/src/Divider/Divider.ts b/packages/react-components/src/Divider/Divider.ts
index 0e22e619..44c9d52b 100644
--- a/packages/react-components/src/Divider/Divider.ts
+++ b/packages/react-components/src/Divider/Divider.ts
@@ -1,16 +1,16 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Divider as DividerElementClass,
+  Divider as DividerElement,
   registerDivider,
 } from "@tapsioss/web-components";
 
 registerDivider();
 
-export const Divider = LitReact.createComponent({
+export const Divider: ReactWebComponent<DividerElement> = createComponent({
   tagName: "tapsi-divider",
-  elementClass: DividerElementClass,
+  elementClass: DividerElement,
   react: React,
   events: {},
 });
diff --git a/packages/react-components/src/EmptyState/EmptyState.ts b/packages/react-components/src/EmptyState/EmptyState.ts
index 182b4bb5..ff5fb2ee 100644
--- a/packages/react-components/src/EmptyState/EmptyState.ts
+++ b/packages/react-components/src/EmptyState/EmptyState.ts
@@ -1,19 +1,21 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  EmptyState as EmptyStateElementClass,
+  EmptyState as EmptyStateElement,
   EmptyStateSlots,
   registerEmptyState,
 } from "@tapsioss/web-components";
 
 registerEmptyState();
 
-export const EmptyState = LitReact.createComponent({
-  tagName: "tapsi-empty-state",
-  elementClass: EmptyStateElementClass,
-  react: React,
-  events: {},
-});
+export const EmptyState: ReactWebComponent<EmptyStateElement> = createComponent(
+  {
+    tagName: "tapsi-empty-state",
+    elementClass: EmptyStateElement,
+    react: React,
+    events: {},
+  },
+);
 
-export { EmptyStateSlots };
+export { EmptyStateElement, EmptyStateSlots };
diff --git a/packages/react-components/src/FileInput/FileInput.ts b/packages/react-components/src/FileInput/FileInput.ts
index 50fc0d32..ad43921d 100644
--- a/packages/react-components/src/FileInput/FileInput.ts
+++ b/packages/react-components/src/FileInput/FileInput.ts
@@ -1,8 +1,12 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
-  FileInput as FileInputElementClass,
+  FileInput as FileInputElement,
   FileInputRetryEvent,
   FileInputSlots,
   registerFileInput,
@@ -10,15 +14,18 @@ import {
 
 registerFileInput();
 
-export const FileInput = LitReact.createComponent({
+export const FileInput: ReactWebComponent<
+  FileInputElement,
+  { onRetry: EventName<FileInputRetryEvent>; onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-file-input",
-  elementClass: FileInputElementClass,
+  elementClass: FileInputElement,
   react: React,
   events: {
-    onRetry: "retry" as LitReact.EventName<FileInputRetryEvent>,
+    onRetry: "retry" as EventName<FileInputRetryEvent>,
     onChange: "input",
     onInput: "input",
   },
 });
 
-export { FileInputRetryEvent, FileInputSlots };
+export { FileInputElement, FileInputRetryEvent, FileInputSlots };
diff --git a/packages/react-components/src/IconButton/IconButton.ts b/packages/react-components/src/IconButton/IconButton.ts
index efc0a814..b1fccf21 100644
--- a/packages/react-components/src/IconButton/IconButton.ts
+++ b/packages/react-components/src/IconButton/IconButton.ts
@@ -1,19 +1,21 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  IconButton as IconButtonElementClass,
+  IconButton as IconButtonElement,
   IconButtonSlots,
   registerIconButton,
 } from "@tapsioss/web-components";
 
 registerIconButton();
 
-export const IconButton = LitReact.createComponent({
-  tagName: "tapsi-icon-button",
-  elementClass: IconButtonElementClass,
-  react: React,
-  events: {},
-});
+export const IconButton: ReactWebComponent<IconButtonElement> = createComponent(
+  {
+    tagName: "tapsi-icon-button",
+    elementClass: IconButtonElement,
+    react: React,
+    events: {},
+  },
+);
 
-export { IconButtonSlots };
+export { IconButtonElement, IconButtonSlots };
diff --git a/packages/react-components/src/Modal/Modal.ts b/packages/react-components/src/Modal/Modal.ts
index 9f1c762d..c3c82d4c 100644
--- a/packages/react-components/src/Modal/Modal.ts
+++ b/packages/react-components/src/Modal/Modal.ts
@@ -1,8 +1,12 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
-  Modal as ModalElementClass,
+  Modal as ModalElement,
   ModalHideEvent,
   ModalShowEvent,
   ModalSlots,
@@ -11,14 +15,17 @@ import {
 
 registerModal();
 
-export const Modal = LitReact.createComponent({
+export const Modal: ReactWebComponent<
+  ModalElement,
+  { onShow: EventName<ModalShowEvent>; onHide: EventName<ModalHideEvent> }
+> = createComponent({
   tagName: "tapsi-modal",
-  elementClass: ModalElementClass,
+  elementClass: ModalElement,
   react: React,
   events: {
-    onShow: "show" as LitReact.EventName<ModalShowEvent>,
-    onHide: "hide" as LitReact.EventName<ModalHideEvent>,
+    onShow: "show" as EventName<ModalShowEvent>,
+    onHide: "hide" as EventName<ModalHideEvent>,
   },
 });
 
-export { ModalHideEvent, ModalShowEvent, ModalSlots };
+export { ModalElement, ModalHideEvent, ModalShowEvent, ModalSlots };
diff --git a/packages/react-components/src/Notice/Notice.ts b/packages/react-components/src/Notice/Notice.ts
index 5c65f402..339da663 100644
--- a/packages/react-components/src/Notice/Notice.ts
+++ b/packages/react-components/src/Notice/Notice.ts
@@ -1,8 +1,12 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
-  Notice as NoticeElementClass,
+  Notice as NoticeElement,
   NoticeHideEvent,
   NoticeShowEvent,
   NoticeSlots,
@@ -11,14 +15,17 @@ import {
 
 registerNotice();
 
-export const Notice = LitReact.createComponent({
+export const Notice: ReactWebComponent<
+  NoticeElement,
+  { onShow: EventName<NoticeShowEvent>; onHide: EventName<NoticeHideEvent> }
+> = createComponent({
   tagName: "tapsi-notice",
-  elementClass: NoticeElementClass,
+  elementClass: NoticeElement,
   react: React,
   events: {
-    onShow: "show" as LitReact.EventName<NoticeShowEvent>,
-    onHide: "hide" as LitReact.EventName<NoticeHideEvent>,
+    onShow: "show" as EventName<NoticeShowEvent>,
+    onHide: "hide" as EventName<NoticeHideEvent>,
   },
 });
 
-export { NoticeHideEvent, NoticeShowEvent, NoticeSlots };
+export { NoticeElement, NoticeHideEvent, NoticeShowEvent, NoticeSlots };
diff --git a/packages/react-components/src/PinInput/PinInput.ts b/packages/react-components/src/PinInput/PinInput.ts
index 7f88663a..0b908c99 100644
--- a/packages/react-components/src/PinInput/PinInput.ts
+++ b/packages/react-components/src/PinInput/PinInput.ts
@@ -1,23 +1,34 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   PinInputCompleteEvent,
-  PinInput as PinInputElementClass,
+  PinInput as PinInputElement,
   registerPinInput,
 } from "@tapsioss/web-components";
 
 registerPinInput();
 
-export const PinInput = LitReact.createComponent({
+export const PinInput: ReactWebComponent<
+  PinInputElement,
+  {
+    onComplete: EventName<PinInputCompleteEvent>;
+    onChange: string;
+    onInput: string;
+  }
+> = createComponent({
   tagName: "tapsi-pin-input",
-  elementClass: PinInputElementClass,
+  elementClass: PinInputElement,
   react: React,
   events: {
-    onComplete: "complete" as LitReact.EventName<PinInputCompleteEvent>,
+    onComplete: "complete" as EventName<PinInputCompleteEvent>,
     onChange: "input",
     onInput: "input",
   },
 });
 
-export { PinInputCompleteEvent };
+export { PinInputCompleteEvent, PinInputElement };
diff --git a/packages/react-components/src/Pinwheel/Pinwheel.ts b/packages/react-components/src/Pinwheel/Pinwheel.ts
index 2770ed8b..04e4b252 100644
--- a/packages/react-components/src/Pinwheel/Pinwheel.ts
+++ b/packages/react-components/src/Pinwheel/Pinwheel.ts
@@ -1,8 +1,8 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Pinwheel as PinwheelElementClass,
+  Pinwheel as PinwheelElement,
   PinwheelItemSlots,
   PinwheelSlots,
   registerPinwheel,
@@ -10,11 +10,14 @@ import {
 
 registerPinwheel();
 
-export const Pinwheel = LitReact.createComponent({
+export const Pinwheel: ReactWebComponent<
+  PinwheelElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-pinwheel",
-  elementClass: PinwheelElementClass,
+  elementClass: PinwheelElement,
   react: React,
   events: { onChange: "change", onInput: "change" },
 });
 
-export { PinwheelItemSlots, PinwheelSlots };
+export { PinwheelElement, PinwheelItemSlots, PinwheelSlots };
diff --git a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts
index f528c69c..4407be1b 100644
--- a/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts
+++ b/packages/react-components/src/PinwheelGroup/PinwheelGroup.ts
@@ -1,19 +1,20 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  PinwheelGroup as PinwheelGroupElementClass,
+  PinwheelGroup as PinwheelGroupElement,
   PinwheelGroupSlots,
   registerPinwheelGroup,
 } from "@tapsioss/web-components";
 
 registerPinwheelGroup();
 
-export const PinwheelGroup = LitReact.createComponent({
-  tagName: "tapsi-pinwheel-group",
-  elementClass: PinwheelGroupElementClass,
-  react: React,
-  events: {},
-});
+export const PinwheelGroup: ReactWebComponent<PinwheelGroupElement> =
+  createComponent({
+    tagName: "tapsi-pinwheel-group",
+    elementClass: PinwheelGroupElement,
+    react: React,
+    events: {},
+  });
 
-export { PinwheelGroupSlots };
+export { PinwheelGroupElement, PinwheelGroupSlots };
diff --git a/packages/react-components/src/PinwheelItem/PinwheelItem.ts b/packages/react-components/src/PinwheelItem/PinwheelItem.ts
index b03bf63b..7ac25e0c 100644
--- a/packages/react-components/src/PinwheelItem/PinwheelItem.ts
+++ b/packages/react-components/src/PinwheelItem/PinwheelItem.ts
@@ -1,7 +1,7 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
-import { PinwheelItem as PinwheelItemElementClass } from "@tapsioss/web-components";
+import { PinwheelItem as PinwheelItemElement } from "@tapsioss/web-components";
 
 if (typeof window !== "undefined" && !customElements.get("tapsi-pinwheel")) {
   /* eslint-disable no-console */
@@ -11,9 +11,10 @@ if (typeof window !== "undefined" && !customElements.get("tapsi-pinwheel")) {
   /* eslint-enable no-console */
 }
 
-export const PinwheelItem = LitReact.createComponent({
-  tagName: "tapsi-pinwheel-item",
-  elementClass: PinwheelItemElementClass,
-  react: React,
-  events: {},
-});
+export const PinwheelItem: ReactWebComponent<PinwheelItemElement> =
+  createComponent({
+    tagName: "tapsi-pinwheel-item",
+    elementClass: PinwheelItemElement,
+    react: React,
+    events: {},
+  });
diff --git a/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts b/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts
index e6fd8bd6..da422c6c 100644
--- a/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts
+++ b/packages/react-components/src/ProgressIndicator/ProgressIndicator.ts
@@ -1,16 +1,17 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  ProgressIndicator as ProgressIndicatorElementClass,
+  ProgressIndicator as ProgressIndicatorElement,
   registerProgressIndicator,
 } from "@tapsioss/web-components";
 
 registerProgressIndicator();
 
-export const ProgressIndicator = LitReact.createComponent({
-  tagName: "tapsi-progress-indicator",
-  elementClass: ProgressIndicatorElementClass,
-  react: React,
-  events: {},
-});
+export const ProgressIndicator: ReactWebComponent<ProgressIndicatorElement> =
+  createComponent({
+    tagName: "tapsi-progress-indicator",
+    elementClass: ProgressIndicatorElement,
+    react: React,
+    events: {},
+  });
diff --git a/packages/react-components/src/Radio/Radio.ts b/packages/react-components/src/Radio/Radio.ts
index c854cca1..58385db6 100644
--- a/packages/react-components/src/Radio/Radio.ts
+++ b/packages/react-components/src/Radio/Radio.ts
@@ -1,18 +1,18 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
-import {
-  Radio as RadioElementClass,
-  registerRadio,
-} from "@tapsioss/web-components";
+import { Radio as RadioElement, registerRadio } from "@tapsioss/web-components";
 
 registerRadio();
 
-export const Radio = LitReact.createComponent({
+export const Radio: ReactWebComponent<
+  RadioElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-radio",
-  elementClass: RadioElementClass,
+  elementClass: RadioElement,
   react: React,
   events: { onChange: "input", onInput: "input" },
 });
 
-export {};
+export { RadioElement };
diff --git a/packages/react-components/src/RateSlider/RateSlider.ts b/packages/react-components/src/RateSlider/RateSlider.ts
index e0081157..32d73c81 100644
--- a/packages/react-components/src/RateSlider/RateSlider.ts
+++ b/packages/react-components/src/RateSlider/RateSlider.ts
@@ -1,18 +1,21 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  RateSlider as RateSliderElementClass,
+  RateSlider as RateSliderElement,
   registerRateSlider,
 } from "@tapsioss/web-components";
 
 registerRateSlider();
 
-export const RateSlider = LitReact.createComponent({
+export const RateSlider: ReactWebComponent<
+  RateSliderElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-rate-slider",
-  elementClass: RateSliderElementClass,
+  elementClass: RateSliderElement,
   react: React,
   events: { onChange: "change", onInput: "change" },
 });
 
-export {};
+export { RateSliderElement };
diff --git a/packages/react-components/src/SegmentedView/SegmentedView.ts b/packages/react-components/src/SegmentedView/SegmentedView.ts
index 24edace6..66b6a21e 100644
--- a/packages/react-components/src/SegmentedView/SegmentedView.ts
+++ b/packages/react-components/src/SegmentedView/SegmentedView.ts
@@ -1,28 +1,35 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   registerSegmentedView,
   SegmentedViewActiveChangeEvent,
-  SegmentedView as SegmentedViewElementClass,
+  SegmentedView as SegmentedViewElement,
   SegmentedViewItemSlots,
   SegmentedViewSlots,
 } from "@tapsioss/web-components";
 
 registerSegmentedView();
 
-export const SegmentedView = LitReact.createComponent({
+export const SegmentedView: ReactWebComponent<
+  SegmentedViewElement,
+  { onActiveChange: EventName<SegmentedViewActiveChangeEvent> }
+> = createComponent({
   tagName: "tapsi-segmented-view",
-  elementClass: SegmentedViewElementClass,
+  elementClass: SegmentedViewElement,
   react: React,
   events: {
-    onActiveChange:
-      "activechange" as LitReact.EventName<SegmentedViewActiveChangeEvent>,
+    onActiveChange: "activechange" as EventName<SegmentedViewActiveChangeEvent>,
   },
 });
 
 export {
   SegmentedViewActiveChangeEvent,
+  SegmentedViewElement,
   SegmentedViewItemSlots,
   SegmentedViewSlots,
 };
diff --git a/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts b/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts
index 015a2ba3..3f2521fc 100644
--- a/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts
+++ b/packages/react-components/src/SegmentedViewItem/SegmentedViewItem.ts
@@ -1,7 +1,7 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
-import { SegmentedViewItem as SegmentedViewItemElementClass } from "@tapsioss/web-components";
+import { SegmentedViewItem as SegmentedViewItemElement } from "@tapsioss/web-components";
 
 if (
   typeof window !== "undefined" &&
@@ -14,9 +14,10 @@ if (
   /* eslint-enable no-console */
 }
 
-export const SegmentedViewItem = LitReact.createComponent({
-  tagName: "tapsi-segmented-view-item",
-  elementClass: SegmentedViewItemElementClass,
-  react: React,
-  events: {},
-});
+export const SegmentedViewItem: ReactWebComponent<SegmentedViewItemElement> =
+  createComponent({
+    tagName: "tapsi-segmented-view-item",
+    elementClass: SegmentedViewItemElement,
+    react: React,
+    events: {},
+  });
diff --git a/packages/react-components/src/Skeleton/Skeleton.ts b/packages/react-components/src/Skeleton/Skeleton.ts
index ad756879..041e2390 100644
--- a/packages/react-components/src/Skeleton/Skeleton.ts
+++ b/packages/react-components/src/Skeleton/Skeleton.ts
@@ -1,19 +1,19 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
   registerSkeleton,
-  Skeleton as SkeletonElementClass,
+  Skeleton as SkeletonElement,
   SkeletonSlots,
 } from "@tapsioss/web-components";
 
 registerSkeleton();
 
-export const Skeleton = LitReact.createComponent({
+export const Skeleton: ReactWebComponent<SkeletonElement> = createComponent({
   tagName: "tapsi-skeleton",
-  elementClass: SkeletonElementClass,
+  elementClass: SkeletonElement,
   react: React,
   events: {},
 });
 
-export { SkeletonSlots };
+export { SkeletonElement, SkeletonSlots };
diff --git a/packages/react-components/src/Snackbar/Snackbar.ts b/packages/react-components/src/Snackbar/Snackbar.ts
index b9036537..1a4f37ec 100644
--- a/packages/react-components/src/Snackbar/Snackbar.ts
+++ b/packages/react-components/src/Snackbar/Snackbar.ts
@@ -1,9 +1,13 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   registerSnackbar,
-  Snackbar as SnackbarElementClass,
+  Snackbar as SnackbarElement,
   SnackbarHideEvent,
   SnackbarShowEvent,
   SnackbarSlots,
@@ -11,14 +15,17 @@ import {
 
 registerSnackbar();
 
-export const Snackbar = LitReact.createComponent({
+export const Snackbar: ReactWebComponent<
+  SnackbarElement,
+  { onShow: EventName<SnackbarShowEvent>; onHide: EventName<SnackbarHideEvent> }
+> = createComponent({
   tagName: "tapsi-snackbar",
-  elementClass: SnackbarElementClass,
+  elementClass: SnackbarElement,
   react: React,
   events: {
-    onShow: "show" as LitReact.EventName<SnackbarShowEvent>,
-    onHide: "hide" as LitReact.EventName<SnackbarHideEvent>,
+    onShow: "show" as EventName<SnackbarShowEvent>,
+    onHide: "hide" as EventName<SnackbarHideEvent>,
   },
 });
 
-export { SnackbarHideEvent, SnackbarShowEvent, SnackbarSlots };
+export { SnackbarElement, SnackbarHideEvent, SnackbarShowEvent, SnackbarSlots };
diff --git a/packages/react-components/src/Spinner/Spinner.ts b/packages/react-components/src/Spinner/Spinner.ts
index ef3cefe6..58cfd247 100644
--- a/packages/react-components/src/Spinner/Spinner.ts
+++ b/packages/react-components/src/Spinner/Spinner.ts
@@ -1,16 +1,16 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Spinner as SpinnerElementClass,
+  Spinner as SpinnerElement,
   registerSpinner,
 } from "@tapsioss/web-components";
 
 registerSpinner();
 
-export const Spinner = LitReact.createComponent({
+export const Spinner: ReactWebComponent<SpinnerElement> = createComponent({
   tagName: "tapsi-spinner",
-  elementClass: SpinnerElementClass,
+  elementClass: SpinnerElement,
   react: React,
   events: {},
 });
diff --git a/packages/react-components/src/Stepper/Stepper.ts b/packages/react-components/src/Stepper/Stepper.ts
index 22902482..0335edbb 100644
--- a/packages/react-components/src/Stepper/Stepper.ts
+++ b/packages/react-components/src/Stepper/Stepper.ts
@@ -1,18 +1,21 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Stepper as StepperElementClass,
+  Stepper as StepperElement,
   registerStepper,
 } from "@tapsioss/web-components";
 
 registerStepper();
 
-export const Stepper = LitReact.createComponent({
+export const Stepper: ReactWebComponent<
+  StepperElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-stepper",
-  elementClass: StepperElementClass,
+  elementClass: StepperElement,
   react: React,
   events: { onChange: "change", onInput: "change" },
 });
 
-export {};
+export { StepperElement };
diff --git a/packages/react-components/src/Switch/Switch.ts b/packages/react-components/src/Switch/Switch.ts
index 15a50047..79feafe0 100644
--- a/packages/react-components/src/Switch/Switch.ts
+++ b/packages/react-components/src/Switch/Switch.ts
@@ -1,18 +1,21 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
-  Switch as SwitchElementClass,
+  Switch as SwitchElement,
   registerSwitch,
 } from "@tapsioss/web-components";
 
 registerSwitch();
 
-export const Switch = LitReact.createComponent({
+export const Switch: ReactWebComponent<
+  SwitchElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-switch",
-  elementClass: SwitchElementClass,
+  elementClass: SwitchElement,
   react: React,
   events: { onChange: "input", onInput: "input" },
 });
 
-export {};
+export { SwitchElement };
diff --git a/packages/react-components/src/TextArea/TextArea.ts b/packages/react-components/src/TextArea/TextArea.ts
index 88de808f..f17ec1a0 100644
--- a/packages/react-components/src/TextArea/TextArea.ts
+++ b/packages/react-components/src/TextArea/TextArea.ts
@@ -1,19 +1,22 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
   registerTextArea,
-  TextArea as TextAreaElementClass,
+  TextArea as TextAreaElement,
   TextAreaSlots,
 } from "@tapsioss/web-components";
 
 registerTextArea();
 
-export const TextArea = LitReact.createComponent({
+export const TextArea: ReactWebComponent<
+  TextAreaElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-text-area",
-  elementClass: TextAreaElementClass,
+  elementClass: TextAreaElement,
   react: React,
   events: { onChange: "input", onInput: "input" },
 });
 
-export { TextAreaSlots };
+export { TextAreaElement, TextAreaSlots };
diff --git a/packages/react-components/src/TextField/TextField.ts b/packages/react-components/src/TextField/TextField.ts
index 439b5940..e681244c 100644
--- a/packages/react-components/src/TextField/TextField.ts
+++ b/packages/react-components/src/TextField/TextField.ts
@@ -1,19 +1,22 @@
-import * as LitReact from "@lit/react";
+import { createComponent, type ReactWebComponent } from "@lit/react";
 import * as React from "react";
 
 import {
   registerTextField,
-  TextField as TextFieldElementClass,
+  TextField as TextFieldElement,
   TextFieldSlots,
 } from "@tapsioss/web-components";
 
 registerTextField();
 
-export const TextField = LitReact.createComponent({
+export const TextField: ReactWebComponent<
+  TextFieldElement,
+  { onChange: string; onInput: string }
+> = createComponent({
   tagName: "tapsi-text-field",
-  elementClass: TextFieldElementClass,
+  elementClass: TextFieldElement,
   react: React,
   events: { onChange: "input", onInput: "input" },
 });
 
-export { TextFieldSlots };
+export { TextFieldElement, TextFieldSlots };
diff --git a/packages/react-components/src/Tooltip/Tooltip.ts b/packages/react-components/src/Tooltip/Tooltip.ts
index 5c4ac368..37d0a9a1 100644
--- a/packages/react-components/src/Tooltip/Tooltip.ts
+++ b/packages/react-components/src/Tooltip/Tooltip.ts
@@ -1,23 +1,30 @@
-import * as LitReact from "@lit/react";
+import {
+  createComponent,
+  type EventName,
+  type ReactWebComponent,
+} from "@lit/react";
 import * as React from "react";
 
 import {
   registerTooltip,
-  Tooltip as TooltipElementClass,
+  Tooltip as TooltipElement,
   TooltipHideEvent,
   TooltipShowEvent,
 } from "@tapsioss/web-components";
 
 registerTooltip();
 
-export const Tooltip = LitReact.createComponent({
+export const Tooltip: ReactWebComponent<
+  TooltipElement,
+  { onShow: EventName<TooltipShowEvent>; onHide: EventName<TooltipHideEvent> }
+> = createComponent({
   tagName: "tapsi-tooltip",
-  elementClass: TooltipElementClass,
+  elementClass: TooltipElement,
   react: React,
   events: {
-    onShow: "show" as LitReact.EventName<TooltipShowEvent>,
-    onHide: "hide" as LitReact.EventName<TooltipHideEvent>,
+    onShow: "show" as EventName<TooltipShowEvent>,
+    onHide: "hide" as EventName<TooltipHideEvent>,
   },
 });
 
-export { TooltipHideEvent, TooltipShowEvent };
+export { TooltipElement, TooltipHideEvent, TooltipShowEvent };
diff --git a/packages/react-components/templates/component.txt b/packages/react-components/templates/component.txt
index 7d5bf634..72eb6ca4 100644
--- a/packages/react-components/templates/component.txt
+++ b/packages/react-components/templates/component.txt
@@ -2,7 +2,7 @@
 
 {{register}}
 
-export const {{componentName}} = LitReact.createComponent({
+export const {{componentName}}: {{componentType}} = createComponent({
   tagName: "{{elementTag}}",
   elementClass: {{elementClass}},
   react: React,