diff --git a/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx b/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx
index 1de2f34e6..ba6f45d52 100644
--- a/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx
+++ b/packages/lumx-react/src/components/alert-dialog/AlertDialog.tsx
@@ -1,4 +1,6 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -14,9 +16,7 @@ import {
     Toolbar,
     ButtonProps,
 } from '@lumx/react';
-
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 
@@ -77,7 +77,7 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * It should not have a complex content.
  * Children of this component should only be strings, paragraphs or links.
  */
-export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const AlertDialog = createComponent<AlertDialogProps, HTMLDivElement>((props, ref) => {
     const { id, title, className, cancelProps, confirmProps, kind, size, dialogProps, children, ...forwardedProps } =
         props;
 
diff --git a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
index 09e435539..c02743dbf 100644
--- a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -199,7 +200,7 @@ const DEFAULT_PROPS: Partial<AutocompleteProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Autocomplete = createComponent<AutocompleteProps, HTMLDivElement>((props, ref) => {
     const {
         anchorToInput,
         children,
diff --git a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
index 4d2c110a9..35137a890 100644
--- a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
+++ b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
@@ -1,11 +1,11 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { mdiClose } from '@lumx/icons';
-import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 
-import { Comp } from '@lumx/react/utils/type';
+import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
@@ -65,7 +65,7 @@ const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const AutocompleteMultiple = createComponent<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {
     const {
         anchorToInput,
         children,
diff --git a/packages/lumx-react/src/components/avatar/Avatar.tsx b/packages/lumx-react/src/components/avatar/Avatar.tsx
index 163d608db..1dfc4887d 100644
--- a/packages/lumx-react/src/components/avatar/Avatar.tsx
+++ b/packages/lumx-react/src/components/avatar/Avatar.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -66,7 +67,7 @@ const DEFAULT_PROPS: Partial<AvatarProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Avatar = createComponent<AvatarProps, HTMLDivElement>((props, ref) => {
     const {
         actions,
         alt,
diff --git a/packages/lumx-react/src/components/badge/Badge.tsx b/packages/lumx-react/src/components/badge/Badge.tsx
index dc00486db..03a70468f 100644
--- a/packages/lumx-react/src/components/badge/Badge.tsx
+++ b/packages/lumx-react/src/components/badge/Badge.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { ColorPalette } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
@@ -38,7 +39,7 @@ const DEFAULT_PROPS: Partial<BadgeProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Badge = createComponent<BadgeProps, HTMLDivElement>((props, ref) => {
     const { children, className, color, ...forwardedProps } = props;
     return (
         <div
diff --git a/packages/lumx-react/src/components/badge/BadgeWrapper.tsx b/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
index f1b86fdf8..f399f5c41 100644
--- a/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
+++ b/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import classNames from 'classnames';
-import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 export interface BadgeWrapperProps extends GenericProps {
     /** Badge. */
@@ -21,7 +22,7 @@ const COMPONENT_NAME = 'BadgeWrapper';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-export const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const BadgeWrapper = createComponent<BadgeWrapperProps, HTMLDivElement>((props, ref) => {
     const { badge, children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/button/Button.tsx b/packages/lumx-react/src/components/button/Button.tsx
index 58e73cd2e..e5cbdd5d1 100644
--- a/packages/lumx-react/src/components/button/Button.tsx
+++ b/packages/lumx-react/src/components/button/Button.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
-import { Comp, isComponent } from '@lumx/react/utils/type';
+import { isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
@@ -54,7 +55,7 @@ const DEFAULT_PROPS: Partial<ButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+export const Button = createComponent<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
     const { children, className, emphasis, leftIcon, rightIcon, size, theme, ...forwardedProps } = props;
 
     const buttonClassName = classNames(
diff --git a/packages/lumx-react/src/components/button/ButtonGroup.tsx b/packages/lumx-react/src/components/button/ButtonGroup.tsx
index ba5426e66..4d921127d 100644
--- a/packages/lumx-react/src/components/button/ButtonGroup.tsx
+++ b/packages/lumx-react/src/components/button/ButtonGroup.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
@@ -32,7 +33,7 @@ const DEFAULT_PROPS: Partial<ButtonGroupProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ButtonGroup = createComponent<ButtonGroupProps, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/button/ButtonRoot.tsx b/packages/lumx-react/src/components/button/ButtonRoot.tsx
index b67f7d7c9..b7b09e159 100644
--- a/packages/lumx-react/src/components/button/ButtonRoot.tsx
+++ b/packages/lumx-react/src/components/button/ButtonRoot.tsx
@@ -1,4 +1,5 @@
-import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -6,7 +7,7 @@ import classNames from 'classnames';
 
 import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -94,7 +95,7 @@ const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+export const ButtonRoot = createComponent<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
     const {
         'aria-label': ariaLabel,
         children,
diff --git a/packages/lumx-react/src/components/button/IconButton.tsx b/packages/lumx-react/src/components/button/IconButton.tsx
index 18f78246c..749251f9b 100644
--- a/packages/lumx-react/src/components/button/IconButton.tsx
+++ b/packages/lumx-react/src/components/button/IconButton.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
 
+import React from 'react';
 import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 
 export interface IconButtonProps extends BaseButtonProps {
@@ -56,7 +56,7 @@ const DEFAULT_PROPS: Partial<IconButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const IconButton = createComponent<IconButtonProps, HTMLButtonElement>((props, ref) => {
     const { emphasis, image, icon, label, size, theme, tooltipProps, hideTooltip, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/checkbox/Checkbox.tsx b/packages/lumx-react/src/components/checkbox/Checkbox.tsx
index bcb2f8851..c7a2aaa34 100644
--- a/packages/lumx-react/src/components/checkbox/Checkbox.tsx
+++ b/packages/lumx-react/src/components/checkbox/Checkbox.tsx
@@ -1,11 +1,12 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -65,7 +66,7 @@ const DEFAULT_PROPS: Partial<CheckboxProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Checkbox = createComponent<CheckboxProps, HTMLDivElement>((props, ref) => {
     const {
         checked,
         className,
diff --git a/packages/lumx-react/src/components/chip/Chip.tsx b/packages/lumx-react/src/components/chip/Chip.tsx
index 8986255b9..5df5aae42 100644
--- a/packages/lumx-react/src/components/chip/Chip.tsx
+++ b/packages/lumx-react/src/components/chip/Chip.tsx
@@ -1,14 +1,15 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { onEnterPressed } from '@lumx/react/utils/event';
 
 import classNames from 'classnames';
 
 import isFunction from 'lodash/isFunction';
-import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * Chip sizes.
@@ -66,7 +67,7 @@ const DEFAULT_PROPS: Partial<ChipProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref) => {
+export const Chip = createComponent<ChipProps, HTMLAnchorElement>((props, ref) => {
     const {
         after,
         before,
@@ -143,9 +144,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
                     {before}
                 </div>
             )}
-
             <div className={`${CLASSNAME}__label`}>{children}</div>
-
             {after && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div
diff --git a/packages/lumx-react/src/components/chip/ChipGroup.tsx b/packages/lumx-react/src/components/chip/ChipGroup.tsx
index c62fbef3e..626f0ae27 100644
--- a/packages/lumx-react/src/components/chip/ChipGroup.tsx
+++ b/packages/lumx-react/src/components/chip/ChipGroup.tsx
@@ -1,9 +1,10 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { HorizontalAlignment } from '@lumx/react/components';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
@@ -43,7 +44,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalChipGroup: Comp<ChipGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalChipGroup = createComponent<ChipGroupProps, HTMLDivElement>((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
     const chipGroupClassName = handleBasicClasses({
         prefix: CLASSNAME,
diff --git a/packages/lumx-react/src/components/comment-block/CommentBlock.tsx b/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
index b58080210..f87e22800 100644
--- a/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
+++ b/packages/lumx-react/src/components/comment-block/CommentBlock.tsx
@@ -1,9 +1,10 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { AvatarProps } from '../avatar/Avatar';
@@ -87,7 +88,7 @@ const DEFAULT_PROPS: Partial<CommentBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const CommentBlock = createComponent<CommentBlockProps, HTMLDivElement>((props, ref) => {
     const {
         actions,
         avatarProps,
@@ -161,7 +162,6 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
                     {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
                 </div>
             </div>
-
             {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}
         </div>
     );
diff --git a/packages/lumx-react/src/components/date-picker/DatePicker.tsx b/packages/lumx-react/src/components/date-picker/DatePicker.tsx
index cd7453940..817c135f9 100644
--- a/packages/lumx-react/src/components/date-picker/DatePicker.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePicker.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils/type';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { useState } from 'react';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
@@ -13,7 +13,7 @@ import { DatePickerProps } from './types';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePicker = createComponent<DatePickerProps, HTMLDivElement>((props, ref) => {
     const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
 
     let referenceDate = value || defaultMonth || new Date();
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
index d1b9d8dc2..9f64bdbea 100644
--- a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
@@ -1,4 +1,5 @@
-import React, { KeyboardEventHandler, forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { KeyboardEventHandler } from 'react';
 import classNames from 'classnames';
 import {
     Button,
@@ -12,7 +13,6 @@ import {
     Toolbar,
 } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
 import { isSameDay } from '@lumx/react/utils/date/isSameDay';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
@@ -52,7 +52,7 @@ const COMPONENT_NAME = 'DatePickerControlled';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerControlled = createComponent<DatePickerControlledProps, HTMLDivElement>((props, ref) => {
     const {
         locale = getCurrentLocale(),
         maxDate,
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerField.tsx b/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
index b6840c9e3..06b9fa17e 100644
--- a/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
@@ -1,7 +1,8 @@
-import React, { forwardRef, SyntheticEvent, useCallback, useRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { SyntheticEvent, useCallback, useRef } from 'react';
 
 import { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 
@@ -40,7 +41,7 @@ const COMPONENT_NAME = 'DatePickerField';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerField = createComponent<DatePickerFieldProps, HTMLDivElement>((props, ref) => {
     const {
         defaultMonth,
         disabled,
diff --git a/packages/lumx-react/src/components/dialog/Dialog.tsx b/packages/lumx-react/src/components/dialog/Dialog.tsx
index ad53629ee..ab72cb4f2 100644
--- a/packages/lumx-react/src/components/dialog/Dialog.tsx
+++ b/packages/lumx-react/src/components/dialog/Dialog.tsx
@@ -1,4 +1,5 @@
-import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -10,7 +11,7 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
 
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
@@ -91,7 +92,7 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Dialog = createComponent<DialogProps, HTMLDivElement>((props, ref) => {
     if (!DOCUMENT) {
         // Can't render in SSR.
         return null;
diff --git a/packages/lumx-react/src/components/divider/Divider.tsx b/packages/lumx-react/src/components/divider/Divider.tsx
index 64f4fce45..48d29b5a1 100644
--- a/packages/lumx-react/src/components/divider/Divider.tsx
+++ b/packages/lumx-react/src/components/divider/Divider.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -35,7 +36,7 @@ const DEFAULT_PROPS: Partial<DividerProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {
+export const Divider = createComponent<DividerProps, HTMLHRElement>((props, ref) => {
     const { className, theme, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/drag-handle/DragHandle.tsx b/packages/lumx-react/src/components/drag-handle/DragHandle.tsx
index 4d18b42c3..9f7b2b64c 100644
--- a/packages/lumx-react/src/components/drag-handle/DragHandle.tsx
+++ b/packages/lumx-react/src/components/drag-handle/DragHandle.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -29,7 +30,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DragHandle = createComponent<DragHandleProps, HTMLDivElement>((props, ref) => {
     const { className, theme, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/dropdown/Dropdown.tsx b/packages/lumx-react/src/components/dropdown/Dropdown.tsx
index 6c7ed115c..e83662f5b 100644
--- a/packages/lumx-react/src/components/dropdown/Dropdown.tsx
+++ b/packages/lumx-react/src/components/dropdown/Dropdown.tsx
@@ -1,11 +1,12 @@
-import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { cloneElement, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
 
@@ -113,7 +114,7 @@ const DEFAULT_PROPS: Partial<DropdownProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Dropdown = createComponent<DropdownProps, HTMLDivElement>((props, ref) => {
     const {
         anchorRef,
         children,
diff --git a/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx b/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx
index 04bdd41b2..91d6aafae 100644
--- a/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx
+++ b/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx
@@ -1,4 +1,5 @@
-import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,7 +10,7 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
@@ -66,7 +67,7 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ExpansionPanel = createComponent<ExpansionPanelProps, HTMLDivElement>((props, ref) => {
     const {
         className,
         children: anyChildren,
diff --git a/packages/lumx-react/src/components/flag/Flag.tsx b/packages/lumx-react/src/components/flag/Flag.tsx
index 141e9a413..9a6b49a40 100644
--- a/packages/lumx-react/src/components/flag/Flag.tsx
+++ b/packages/lumx-react/src/components/flag/Flag.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 export interface FlagProps extends GenericProps, HasTheme {
@@ -29,7 +30,7 @@ const DEFAULT_PROPS: Partial<FlagProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Flag = createComponent<FlagProps, HTMLDivElement>((props, ref) => {
     const { label, icon, color, className, theme, truncate, ...forwardedProps } = props;
     const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
     const isTruncated = !!truncate;
diff --git a/packages/lumx-react/src/components/flex-box/FlexBox.tsx b/packages/lumx-react/src/components/flex-box/FlexBox.tsx
index 0cb45e37f..949af956d 100644
--- a/packages/lumx-react/src/components/flex-box/FlexBox.tsx
+++ b/packages/lumx-react/src/components/flex-box/FlexBox.tsx
@@ -1,9 +1,10 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { Alignment, Orientation } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
@@ -55,7 +56,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const FlexBox = createComponent<FlexBoxProps, HTMLDivElement>((props, ref) => {
     const {
         as: Component = 'div',
         children,
diff --git a/packages/lumx-react/src/components/generic-block/GenericBlock.tsx b/packages/lumx-react/src/components/generic-block/GenericBlock.tsx
index 6214e0990..7178321f0 100644
--- a/packages/lumx-react/src/components/generic-block/GenericBlock.tsx
+++ b/packages/lumx-react/src/components/generic-block/GenericBlock.tsx
@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
+import React, { Children, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
@@ -7,6 +7,7 @@ import { getRootClassName } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
+import { createComponent } from '@lumx/react/utils/createComponent';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -118,7 +119,7 @@ const isActions = isComponentType(Actions);
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
-const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
+const BaseGenericBlock: BaseGenericBlock = createComponent((props, ref) => {
     const {
         className,
         figure,
diff --git a/packages/lumx-react/src/components/grid-column/GridColumn.tsx b/packages/lumx-react/src/components/grid-column/GridColumn.tsx
index e1f5cab3c..965898c9a 100644
--- a/packages/lumx-react/src/components/grid-column/GridColumn.tsx
+++ b/packages/lumx-react/src/components/grid-column/GridColumn.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactElement, ReactNode } from 'react';
 
 import isInteger from 'lodash/isInteger';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Size } from '@lumx/react';
 
@@ -50,7 +51,7 @@ const DEFAULT_PROPS: Partial<GridColumnProps> = {};
  * @param ref Component ref.
  * @return React element.
  */
-export const GridColumn: Comp<GridColumnProps> = forwardRef((props, ref): ReactElement => {
+export const GridColumn = createComponent<GridColumnProps>((props, ref): ReactElement => {
     const {
         as: Component = 'div',
         gap,
diff --git a/packages/lumx-react/src/components/grid/Grid.tsx b/packages/lumx-react/src/components/grid/Grid.tsx
index 8305f6871..306d11eca 100644
--- a/packages/lumx-react/src/components/grid/Grid.tsx
+++ b/packages/lumx-react/src/components/grid/Grid.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
@@ -49,7 +50,7 @@ const DEFAULT_PROPS: Partial<GridProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Grid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Grid = createComponent<GridProps, HTMLDivElement>((props, ref) => {
     const { children, className, gutter, hAlign, orientation, vAlign, wrap, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/grid/GridItem.tsx b/packages/lumx-react/src/components/grid/GridItem.tsx
index df90131da..e0418848e 100644
--- a/packages/lumx-react/src/components/grid/GridItem.tsx
+++ b/packages/lumx-react/src/components/grid/GridItem.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
@@ -37,7 +38,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const GridItem = createComponent<GridItemProps, HTMLDivElement>((props, ref) => {
     const { children, className, width, align, order, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/heading/Heading.tsx b/packages/lumx-react/src/components/heading/Heading.tsx
index 9db4da413..1fa327ed0 100644
--- a/packages/lumx-react/src/components/heading/Heading.tsx
+++ b/packages/lumx-react/src/components/heading/Heading.tsx
@@ -1,7 +1,8 @@
-import { Comp, HeadingElement } from '@lumx/react/utils/type';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import { HeadingElement } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Text, TextProps } from '../text';
 import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';
 import { useHeadingLevel } from './useHeadingLevel';
@@ -36,7 +37,7 @@ const DEFAULT_PROPS = {} as const;
  * Extends the `Text` Component with the heading level automatically computed based on
  * the current level provided by the context.
  */
-export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
+export const Heading = createComponent<HeadingProps>((props, ref) => {
     const { children, as, className, ...forwardedProps } = props;
     const { headingElement } = useHeadingLevel();
 
diff --git a/packages/lumx-react/src/components/icon/Icon.tsx b/packages/lumx-react/src/components/icon/Icon.tsx
index 71e2f2257..971dd945f 100644
--- a/packages/lumx-react/src/components/icon/Icon.tsx
+++ b/packages/lumx-react/src/components/icon/Icon.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
 
@@ -52,7 +53,7 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
+export const Icon = createComponent<IconProps, HTMLElement>((props, ref) => {
     const { className, color, colorVariant, hasShape, icon, size, theme, alt, ...forwardedProps } = props;
 
     // Color
diff --git a/packages/lumx-react/src/components/image-block/ImageBlock.tsx b/packages/lumx-react/src/components/image-block/ImageBlock.tsx
index 957bbf19c..b60f69371 100644
--- a/packages/lumx-react/src/components/image-block/ImageBlock.tsx
+++ b/packages/lumx-react/src/components/image-block/ImageBlock.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
@@ -72,7 +73,7 @@ const DEFAULT_PROPS: Partial<ImageBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ImageBlock = createComponent<ImageBlockProps, HTMLDivElement>((props, ref) => {
     const {
         actions,
         align,
diff --git a/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx b/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
index dcd679de3..cd0451772 100644
--- a/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
+++ b/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
 
+import React from 'react';
 import classNames from 'classnames';
 import { Lightbox } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils';
-import type { Comp } from '@lumx/react/utils/type';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { ImageSlideshow } from './internal/ImageSlideshow';
@@ -11,7 +11,7 @@ import { useImageLightbox } from './useImageLightbox';
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 
-const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+const Inner = createComponent<ImageLightboxProps, HTMLDivElement>((props, ref) => {
     const {
         className,
         isOpen,
diff --git a/packages/lumx-react/src/components/inline-list/InlineList.tsx b/packages/lumx-react/src/components/inline-list/InlineList.tsx
index 2d70a67c3..e2a5d7c23 100644
--- a/packages/lumx-react/src/components/inline-list/InlineList.tsx
+++ b/packages/lumx-react/src/components/inline-list/InlineList.tsx
@@ -1,9 +1,10 @@
-import React, { Children, forwardRef, isValidElement } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, isValidElement } from 'react';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
 
 /**
@@ -50,7 +51,7 @@ const DEFAULT_PROPS = {} as const;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
+export const InlineList = createComponent<InlineListProps>((props, ref) => {
     const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
     const fontColorClassName = color && getFontColorClassName(color, colorVariant);
     const typographyClassName = typography && getTypographyClassName(typography);
diff --git a/packages/lumx-react/src/components/input-helper/InputHelper.tsx b/packages/lumx-react/src/components/input-helper/InputHelper.tsx
index 846adf72c..00f63b702 100644
--- a/packages/lumx-react/src/components/input-helper/InputHelper.tsx
+++ b/packages/lumx-react/src/components/input-helper/InputHelper.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { Kind, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { INPUT_HELPER_CONFIGURATION } from './constants';
 
@@ -41,7 +42,7 @@ const DEFAULT_PROPS: Partial<InputHelperProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputHelper: Comp<InputHelperProps, HTMLParagraphElement> = forwardRef((props, ref) => {
+export const InputHelper = createComponent<InputHelperProps, HTMLParagraphElement>((props, ref) => {
     const { children, className, kind, theme, ...forwardedProps } = props;
     const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
 
diff --git a/packages/lumx-react/src/components/input-label/InputLabel.tsx b/packages/lumx-react/src/components/input-label/InputLabel.tsx
index 1768207b1..6a4465d40 100644
--- a/packages/lumx-react/src/components/input-label/InputLabel.tsx
+++ b/packages/lumx-react/src/components/input-label/InputLabel.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
@@ -40,7 +41,7 @@ const DEFAULT_PROPS: Partial<InputLabelProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputLabel: Comp<InputLabelProps, HTMLLabelElement> = forwardRef((props, ref) => {
+export const InputLabel = createComponent<InputLabelProps, HTMLLabelElement>((props, ref) => {
     const { children, className, htmlFor, isRequired, theme, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/lightbox/Lightbox.tsx b/packages/lumx-react/src/components/lightbox/Lightbox.tsx
index cfa2a16d6..56f34fcea 100644
--- a/packages/lumx-react/src/components/lightbox/Lightbox.tsx
+++ b/packages/lumx-react/src/components/lightbox/Lightbox.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, RefObject, useRef, useEffect, AriaAttributes } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -6,7 +7,7 @@ import { createPortal } from 'react-dom';
 import { mdiClose } from '@lumx/icons';
 import { IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
@@ -54,7 +55,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Lightbox = createComponent<LightboxProps, HTMLDivElement>((props, ref) => {
     const {
         'aria-labelledby': propAriaLabelledBy,
         ariaLabelledBy = propAriaLabelledBy,
diff --git a/packages/lumx-react/src/components/link-preview/LinkPreview.tsx b/packages/lumx-react/src/components/link-preview/LinkPreview.tsx
index 0fc638794..fa929cf2e 100644
--- a/packages/lumx-react/src/components/link-preview/LinkPreview.tsx
+++ b/packages/lumx-react/src/components/link-preview/LinkPreview.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -14,7 +15,7 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -65,7 +66,7 @@ const DEFAULT_PROPS = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const LinkPreview = createComponent<LinkPreviewProps, HTMLDivElement>((props, ref) => {
     const {
         className,
         description,
diff --git a/packages/lumx-react/src/components/link/Link.tsx b/packages/lumx-react/src/components/link/Link.tsx
index e18b8ecf7..58d8f70d1 100644
--- a/packages/lumx-react/src/components/link/Link.tsx
+++ b/packages/lumx-react/src/components/link/Link.tsx
@@ -1,11 +1,12 @@
-import React, { forwardRef, RefObject, useMemo } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { RefObject, useMemo } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -82,7 +83,7 @@ const getIconSize = (typography?: Typography) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {
+export const Link = createComponent<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
     const {
         children,
         className,
diff --git a/packages/lumx-react/src/components/list/List.tsx b/packages/lumx-react/src/components/list/List.tsx
index ab17cb99a..305727abe 100644
--- a/packages/lumx-react/src/components/list/List.tsx
+++ b/packages/lumx-react/src/components/list/List.tsx
@@ -1,12 +1,13 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { Size } from '@lumx/react';
 
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';
-import React, { forwardRef, Key, ReactNode, SyntheticEvent, useRef } from 'react';
+import React, { Key, ReactNode, SyntheticEvent, useRef } from 'react';
 import { useInteractiveList } from './useInteractiveList';
 
 /**
@@ -59,7 +60,7 @@ const DEFAULT_PROPS: Partial<ListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref) => {
+const InternalList = createComponent<ListProps, HTMLUListElement>((props, ref) => {
     const { children, className, isClickable, itemPadding, onListItemSelected, tabIndex, ...forwardedProps } = props;
     const listElementRef = useRef<HTMLUListElement>(null);
 
diff --git a/packages/lumx-react/src/components/list/ListDivider.tsx b/packages/lumx-react/src/components/list/ListDivider.tsx
index 7f36dc0b4..9939cdb43 100644
--- a/packages/lumx-react/src/components/list/ListDivider.tsx
+++ b/packages/lumx-react/src/components/list/ListDivider.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -27,7 +28,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListDivider: Comp<ListDividerProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListDivider = createComponent<ListDividerProps, HTMLLIElement>((props, ref) => {
     const { className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/list/ListItem.tsx b/packages/lumx-react/src/components/list/ListItem.tsx
index 2306f46cf..3dc29ab19 100644
--- a/packages/lumx-react/src/components/list/ListItem.tsx
+++ b/packages/lumx-react/src/components/list/ListItem.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
@@ -74,7 +75,7 @@ export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListItem = createComponent<ListItemProps, HTMLLIElement>((props, ref) => {
     const {
         after,
         before,
diff --git a/packages/lumx-react/src/components/list/ListSubheader.tsx b/packages/lumx-react/src/components/list/ListSubheader.tsx
index 4e8b450bf..350eec37b 100644
--- a/packages/lumx-react/src/components/list/ListSubheader.tsx
+++ b/packages/lumx-react/src/components/list/ListSubheader.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListSubheader = createComponent<ListSubheaderProps, HTMLLIElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/message/Message.tsx b/packages/lumx-react/src/components/message/Message.tsx
index b45482bc3..04190097a 100644
--- a/packages/lumx-react/src/components/message/Message.tsx
+++ b/packages/lumx-react/src/components/message/Message.tsx
@@ -1,9 +1,10 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
@@ -57,7 +58,7 @@ const CONFIG = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Message = createComponent<MessageProps, HTMLDivElement>((props, ref) => {
     const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;
     const { color, icon } = CONFIG[kind as Kind] || {};
     const { onClick, label: closeButtonLabel } = closeButtonProps || {};
diff --git a/packages/lumx-react/src/components/mosaic/Mosaic.tsx b/packages/lumx-react/src/components/mosaic/Mosaic.tsx
index 92d28d7c5..2a44735a6 100644
--- a/packages/lumx-react/src/components/mosaic/Mosaic.tsx
+++ b/packages/lumx-react/src/components/mosaic/Mosaic.tsx
@@ -1,7 +1,8 @@
-import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { MouseEventHandler, useMemo } from 'react';
 
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import take from 'lodash/take';
@@ -40,7 +41,7 @@ const DEFAULT_PROPS: Partial<MosaicProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Mosaic = createComponent<MosaicProps, HTMLDivElement>((props, ref) => {
     const { className, theme, thumbnails, onImageClick, ...forwardedProps } = props;
     const handleImageClick = useMemo(() => {
         if (!onImageClick) return undefined;
diff --git a/packages/lumx-react/src/components/notification/Notification.tsx b/packages/lumx-react/src/components/notification/Notification.tsx
index 84412b9ac..47a7e3247 100644
--- a/packages/lumx-react/src/components/notification/Notification.tsx
+++ b/packages/lumx-react/src/components/notification/Notification.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, useRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -9,7 +10,7 @@ import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
@@ -64,7 +65,7 @@ const DEFAULT_PROPS: Partial<NotificationProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Notification = createComponent<NotificationProps, HTMLDivElement>((props, ref) => {
     const {
         actionLabel,
         className,
diff --git a/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx b/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
index 8dbf6d5a2..c7ed5b854 100644
--- a/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
+++ b/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
@@ -1,7 +1,8 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 import classNames from 'classnames';
 
-import { Comp, HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { Popover, PopoverProps } from '../popover/Popover';
@@ -34,7 +35,7 @@ const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
  * * Sets a focus trap within the popover
  * * Closes on click away and escape.
  */
-export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const PopoverDialog = createComponent<PopoverDialogProps, HTMLDivElement>((props, ref) => {
     const {
         children,
         isOpen,
diff --git a/packages/lumx-react/src/components/popover/Popover.tsx b/packages/lumx-react/src/components/popover/Popover.tsx
index 066070c98..1cabf9300 100644
--- a/packages/lumx-react/src/components/popover/Popover.tsx
+++ b/packages/lumx-react/src/components/popover/Popover.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, ReactNode, RefObject, useRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode, RefObject, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -7,7 +8,7 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
@@ -97,7 +98,7 @@ const renderPopover = (children: ReactNode, usePortal?: boolean): any => {
 };
 
 // Inner component (must be wrapped before export)
-const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref) => {
+const _InnerPopover = createComponent<PopoverProps, HTMLDivElement>((props, ref) => {
     const {
         anchorRef,
         as: Component = 'div',
diff --git a/packages/lumx-react/src/components/post-block/PostBlock.tsx b/packages/lumx-react/src/components/post-block/PostBlock.tsx
index cfd1446fd..58f06006e 100644
--- a/packages/lumx-react/src/components/post-block/PostBlock.tsx
+++ b/packages/lumx-react/src/components/post-block/PostBlock.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -58,7 +59,7 @@ const DEFAULT_PROPS: Partial<PostBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const PostBlock = createComponent<PostBlockProps, HTMLDivElement>((props, ref) => {
     const {
         actions,
         attachments,
@@ -86,7 +87,6 @@ export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props
                     <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />
                 </div>
             )}
-
             <div className={`${CLASSNAME}__wrapper`}>
                 {author && <div className={`${CLASSNAME}__author`}>{author}</div>}
 
diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
index eaad7d846..74086bcb2 100644
--- a/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
+++ b/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
@@ -42,7 +43,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTracker: Comp<ProgressTrackerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressTracker = createComponent<ProgressTrackerProps, HTMLDivElement>((props, ref) => {
     const { 'aria-label': ariaLabel, children, className, ...forwardedProps } = props;
     const stepListRef = React.useRef(null);
     useRovingTabIndex({
diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx
index ba8a8b1eb..de5c20776 100644
--- a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx
+++ b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStep.tsx
@@ -1,10 +1,11 @@
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, useCallback } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
 
 import classNames from 'classnames';
 
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
@@ -56,7 +57,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTrackerStep: Comp<ProgressTrackerStepProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const ProgressTrackerStep = createComponent<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {
     const {
         className,
         disabled,
diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx
index ac87996c3..a116537e7 100644
--- a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx
+++ b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerStepPanel.tsx
@@ -1,10 +1,11 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 /**
  * Defines the props of the component.
@@ -40,28 +41,26 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepPanelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProps, HTMLDivElement> = forwardRef(
-    (props, ref) => {
-        const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
+export const ProgressTrackerStepPanel = createComponent<ProgressTrackerStepPanelProps, HTMLDivElement>((props, ref) => {
+    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
 
-        const state = useTabProviderContext('tabPanel', id);
-        const isActive = propIsActive || state?.isActive;
+    const state = useTabProviderContext('tabPanel', id);
+    const isActive = propIsActive || state?.isActive;
 
-        return (
-            <div
-                ref={ref}
-                {...forwardedProps}
-                id={state?.tabPanelId}
-                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
-                role="tabpanel"
-                tabIndex={isActive ? 0 : -1}
-                aria-labelledby={state?.tabId}
-            >
-                {(!state?.isLazy || isActive) && children}
-            </div>
-        );
-    },
-);
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            id={state?.tabPanelId}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
+            role="tabpanel"
+            tabIndex={isActive ? 0 : -1}
+            aria-labelledby={state?.tabId}
+        >
+            {(!state?.isLazy || isActive) && children}
+        </div>
+    );
+});
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
 ProgressTrackerStepPanel.className = CLASSNAME;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;
diff --git a/packages/lumx-react/src/components/progress/Progress.tsx b/packages/lumx-react/src/components/progress/Progress.tsx
index 0ae653428..06731f278 100644
--- a/packages/lumx-react/src/components/progress/Progress.tsx
+++ b/packages/lumx-react/src/components/progress/Progress.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ProgressLinear } from './ProgressLinear';
 import { ProgressCircular } from './ProgressCircular';
@@ -49,7 +50,7 @@ const DEFAULT_PROPS: Partial<ProgressProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Progress: Comp<ProgressProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Progress = createComponent<ProgressProps, HTMLDivElement>((props, ref) => {
     const { className, theme, variant, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/progress/ProgressCircular.tsx b/packages/lumx-react/src/components/progress/ProgressCircular.tsx
index 5d38580bf..67f01c305 100644
--- a/packages/lumx-react/src/components/progress/ProgressCircular.tsx
+++ b/packages/lumx-react/src/components/progress/ProgressCircular.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme, Size } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -45,7 +46,7 @@ const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressCircular: Comp<ProgressCircularProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressCircular = createComponent<ProgressCircularProps, HTMLDivElement>((props, ref) => {
     const { className, theme, size, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/progress/ProgressLinear.tsx b/packages/lumx-react/src/components/progress/ProgressLinear.tsx
index 32f0a2df8..f3f16cd08 100644
--- a/packages/lumx-react/src/components/progress/ProgressLinear.tsx
+++ b/packages/lumx-react/src/components/progress/ProgressLinear.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 export interface ProgressLinearProps extends GenericProps, HasTheme {}
@@ -33,7 +34,7 @@ const DEFAULT_PROPS: Partial<ProgressLinearProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressLinear: Comp<ProgressLinearProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressLinear = createComponent<ProgressLinearProps, HTMLDivElement>((props, ref) => {
     const { className, theme, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/radio-button/RadioButton.tsx b/packages/lumx-react/src/components/radio-button/RadioButton.tsx
index fa2faa4de..93d86ae1f 100644
--- a/packages/lumx-react/src/components/radio-button/RadioButton.tsx
+++ b/packages/lumx-react/src/components/radio-button/RadioButton.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 
@@ -58,7 +59,7 @@ const DEFAULT_PROPS: Partial<RadioButtonProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const RadioButton = createComponent<RadioButtonProps, HTMLDivElement>((props, ref) => {
     const {
         checked,
         className,
diff --git a/packages/lumx-react/src/components/radio-button/RadioGroup.tsx b/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
index 1f14374eb..ca4611f67 100644
--- a/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
+++ b/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const RadioGroup = createComponent<RadioGroupProps, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/select/Select.tsx b/packages/lumx-react/src/components/select/Select.tsx
index 61b92fdde..cdc324e9a 100644
--- a/packages/lumx-react/src/components/select/Select.tsx
+++ b/packages/lumx-react/src/components/select/Select.tsx
@@ -1,17 +1,17 @@
-import React, { forwardRef, RefObject } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
 
+import React, { RefObject } from 'react';
 import classNames from 'classnames';
+
 import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-
 import { Emphasis, Size, Theme } from '@lumx/react/components';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
-import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
-import { Comp } from '@lumx/react/utils/type';
+import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
@@ -167,7 +167,7 @@ const SelectField: React.FC<SelectProps> = ({
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Select: Comp<SelectProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Select = createComponent<SelectProps, HTMLDivElement>((props, ref) => {
     const isEmpty = lodashIsEmpty(props.value);
     const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
 
diff --git a/packages/lumx-react/src/components/select/SelectMultiple.tsx b/packages/lumx-react/src/components/select/SelectMultiple.tsx
index bed1e3a5b..6d87deacc 100644
--- a/packages/lumx-react/src/components/select/SelectMultiple.tsx
+++ b/packages/lumx-react/src/components/select/SelectMultiple.tsx
@@ -1,15 +1,15 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+
+import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-
 import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
-import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
-import { Comp } from '@lumx/react/utils/type';
+import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
@@ -177,7 +177,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SelectMultiple: Comp<SelectMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SelectMultiple = createComponent<SelectMultipleProps, HTMLDivElement>((props, ref) => {
     return WithSelectContext(
         SelectMultipleField,
         {
diff --git a/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx b/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
index 931ed476c..69589bc66 100644
--- a/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
+++ b/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
@@ -1,10 +1,11 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -32,7 +33,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {
+export const SideNavigation = createComponent<SideNavigationProps, HTMLUListElement>((props, ref) => {
     const { children, className, theme, ...forwardedProps } = props;
     const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
 
diff --git a/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx b/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx
index 27f3c6c3c..57cab6d93 100644
--- a/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx
+++ b/packages/lumx-react/src/components/side-navigation/SideNavigationItem.tsx
@@ -1,4 +1,5 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -7,7 +8,7 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 
-import { Comp, GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
@@ -67,7 +68,7 @@ const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const SideNavigationItem = createComponent<SideNavigationItemProps, HTMLLIElement>((props, ref) => {
     const {
         children,
         className,
diff --git a/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx b/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx
index b295f3179..e3515bc61 100644
--- a/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx
+++ b/packages/lumx-react/src/components/skeleton/SkeletonCircle.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -36,7 +37,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SkeletonCircle = createComponent<SkeletonCircleProps, HTMLDivElement>((props, ref) => {
     const { className, size, color, theme, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx b/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx
index 10106814a..8a96f8d47 100644
--- a/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx
+++ b/packages/lumx-react/src/components/skeleton/SkeletonRectangle.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -49,7 +50,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SkeletonRectangle = createComponent<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {
     const { aspectRatio, className, height, theme, variant, width, color, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx b/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx
index 52b48cfd1..c27e3e09e 100644
--- a/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx
+++ b/packages/lumx-react/src/components/skeleton/SkeletonTypography.tsx
@@ -1,8 +1,9 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import classNames from 'classnames';
-import React, { CSSProperties, forwardRef } from 'react';
+import React, { CSSProperties } from 'react';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -38,7 +39,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SkeletonTypography = createComponent<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {
     const { className, theme, typography, width, color, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/slider/Slider.tsx b/packages/lumx-react/src/components/slider/Slider.tsx
index 69b852986..88a22ba4d 100644
--- a/packages/lumx-react/src/components/slider/Slider.tsx
+++ b/packages/lumx-react/src/components/slider/Slider.tsx
@@ -1,12 +1,13 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { forwardRef, SyntheticEvent, useMemo, useRef } from 'react';
+import React, { SyntheticEvent, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { clamp } from '@lumx/react/utils/clamp';
@@ -91,7 +92,7 @@ const computePercentFromValue = (value: number, min: number, max: number): numbe
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Slider = createComponent<SliderProps, HTMLDivElement>((props, ref) => {
     const {
         className,
         disabled,
diff --git a/packages/lumx-react/src/components/slideshow/Slides.tsx b/packages/lumx-react/src/components/slideshow/Slides.tsx
index 0b9ccf87a..1b294fd77 100644
--- a/packages/lumx-react/src/components/slideshow/Slides.tsx
+++ b/packages/lumx-react/src/components/slideshow/Slides.tsx
@@ -1,10 +1,11 @@
-import React, { Children, CSSProperties, forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, CSSProperties } from 'react';
 import chunk from 'lodash/chunk';
 
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
@@ -53,7 +54,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Slides = createComponent<SlidesProps, HTMLDivElement>((props, ref) => {
     const {
         activeIndex,
         id,
diff --git a/packages/lumx-react/src/components/slideshow/Slideshow.tsx b/packages/lumx-react/src/components/slideshow/Slideshow.tsx
index b0b1e899b..b464c5879 100644
--- a/packages/lumx-react/src/components/slideshow/Slideshow.tsx
+++ b/packages/lumx-react/src/components/slideshow/Slideshow.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';
 import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { buildSlideShowGroupId } from './SlideshowItemGroup';
@@ -51,7 +52,7 @@ const DEFAULT_PROPS: Partial<SlideshowProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Slideshow = createComponent<SlideshowProps, HTMLDivElement>((props, ref) => {
     const {
         activeIndex,
         autoPlay,
diff --git a/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx b/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx
index 9360c36b9..06dbd66d9 100644
--- a/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx
+++ b/packages/lumx-react/src/components/slideshow/SlideshowControls.tsx
@@ -1,11 +1,12 @@
-import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
@@ -80,7 +81,7 @@ const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalSlideshowControls = createComponent<SlideshowControlsProps, HTMLDivElement>((props, ref) => {
     const {
         activeIndex,
         className,
diff --git a/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx b/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx
index 2b7c52afa..ff958f9b5 100644
--- a/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx
+++ b/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SlideshowItem = createComponent<SlideshowItemProps, HTMLDivElement>((props, ref) => {
     const { className, children, ...forwardedProps } = props;
     return (
         <div
diff --git a/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx b/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx
index 2841b364e..9719dc8be 100644
--- a/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx
+++ b/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
@@ -35,7 +36,7 @@ export const buildSlideShowGroupId = (slidesId: string, index: number) => `${sli
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SlideshowItemGroup: Comp<SlideshowItemGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SlideshowItemGroup = createComponent<SlideshowItemGroupProps, HTMLDivElement>((props, ref) => {
     const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
     const groupRef = React.useRef<HTMLDivElement>(null);
 
diff --git a/packages/lumx-react/src/components/switch/Switch.tsx b/packages/lumx-react/src/components/switch/Switch.tsx
index 49acf9d95..b1b890200 100644
--- a/packages/lumx-react/src/components/switch/Switch.tsx
+++ b/packages/lumx-react/src/components/switch/Switch.tsx
@@ -1,4 +1,5 @@
-import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
@@ -6,7 +7,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 
@@ -57,7 +58,7 @@ const DEFAULT_PROPS: Partial<SwitchProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Switch = createComponent<SwitchProps, HTMLDivElement>((props, ref) => {
     const {
         checked,
         children,
diff --git a/packages/lumx-react/src/components/table/Table.tsx b/packages/lumx-react/src/components/table/Table.tsx
index 34435361a..c426d2407 100644
--- a/packages/lumx-react/src/components/table/Table.tsx
+++ b/packages/lumx-react/src/components/table/Table.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -41,7 +42,7 @@ const DEFAULT_PROPS: Partial<TableProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {
+export const Table = createComponent<TableProps, HTMLTableElement>((props, ref) => {
     const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/table/TableBody.tsx b/packages/lumx-react/src/components/table/TableBody.tsx
index bdb2e2ea3..d0056d0e7 100644
--- a/packages/lumx-react/src/components/table/TableBody.tsx
+++ b/packages/lumx-react/src/components/table/TableBody.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -27,7 +28,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
+export const TableBody = createComponent<TableBodyProps, HTMLTableSectionElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/table/TableCell.tsx b/packages/lumx-react/src/components/table/TableCell.tsx
index 345cf902f..538e61cd1 100644
--- a/packages/lumx-react/src/components/table/TableCell.tsx
+++ b/packages/lumx-react/src/components/table/TableCell.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Icon, Size } from '@lumx/react';
-import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
@@ -60,7 +61,7 @@ const DEFAULT_PROPS: Partial<TableCellProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {
+export const TableCell = createComponent<TableCellProps, HTMLTableCellElement>((props, ref) => {
     const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;
 
     // Use button if clickable
diff --git a/packages/lumx-react/src/components/table/TableHeader.tsx b/packages/lumx-react/src/components/table/TableHeader.tsx
index 6a4a5e9fd..c37e7d0fc 100644
--- a/packages/lumx-react/src/components/table/TableHeader.tsx
+++ b/packages/lumx-react/src/components/table/TableHeader.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -32,7 +33,7 @@ const DEFAULT_PROPS: Partial<TableHeaderProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
+export const TableHeader = createComponent<TableHeaderProps, HTMLTableSectionElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/table/TableRow.tsx b/packages/lumx-react/src/components/table/TableRow.tsx
index 5d15d3c7d..7d54a1b8a 100644
--- a/packages/lumx-react/src/components/table/TableRow.tsx
+++ b/packages/lumx-react/src/components/table/TableRow.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -39,7 +40,7 @@ const DEFAULT_PROPS: Partial<TableRowProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {
+export const TableRow = createComponent<TableRowProps, HTMLTableRowElement>((props, ref) => {
     const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/tabs/Tab.tsx b/packages/lumx-react/src/components/tabs/Tab.tsx
index 12bebb072..7b7e3497c 100644
--- a/packages/lumx-react/src/components/tabs/Tab.tsx
+++ b/packages/lumx-react/src/components/tabs/Tab.tsx
@@ -1,10 +1,11 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { Icon, IconProps, Size } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 import { useTabProviderContext } from './state';
 
 /**
@@ -51,7 +52,7 @@ const DEFAULT_PROPS: Partial<TabProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const Tab = createComponent<TabProps, HTMLButtonElement>((props, ref) => {
     const {
         className,
         disabled,
diff --git a/packages/lumx-react/src/components/tabs/TabList.tsx b/packages/lumx-react/src/components/tabs/TabList.tsx
index 2baa5d842..f486d6357 100644
--- a/packages/lumx-react/src/components/tabs/TabList.tsx
+++ b/packages/lumx-react/src/components/tabs/TabList.tsx
@@ -1,11 +1,12 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 
 export enum TabListLayout {
@@ -55,7 +56,7 @@ const DEFAULT_PROPS: Partial<TabListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TabList = createComponent<TabListProps, HTMLDivElement>((props, ref) => {
     const { 'aria-label': ariaLabel, children, className, layout, position, theme, ...forwardedProps } = props;
     const tabListRef = React.useRef(null);
     useRovingTabIndex({
diff --git a/packages/lumx-react/src/components/tabs/TabPanel.tsx b/packages/lumx-react/src/components/tabs/TabPanel.tsx
index f9ff8ed20..b059a7231 100644
--- a/packages/lumx-react/src/components/tabs/TabPanel.tsx
+++ b/packages/lumx-react/src/components/tabs/TabPanel.tsx
@@ -1,10 +1,11 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 /**
  * Defines the props of the component.
@@ -40,7 +41,7 @@ const DEFAULT_PROPS: Partial<TabPanelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TabPanel = createComponent<TabPanelProps, HTMLDivElement>((props, ref) => {
     const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
 
     const state = useTabProviderContext('tabPanel', id);
diff --git a/packages/lumx-react/src/components/text-field/TextField.tsx b/packages/lumx-react/src/components/text-field/TextField.tsx
index e2198a360..eab1b7680 100644
--- a/packages/lumx-react/src/components/text-field/TextField.tsx
+++ b/packages/lumx-react/src/components/text-field/TextField.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -16,7 +17,7 @@ import {
     Size,
     Theme,
 } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
@@ -254,7 +255,7 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TextField = createComponent<TextFieldProps, HTMLDivElement>((props, ref) => {
     const {
         chips,
         className,
diff --git a/packages/lumx-react/src/components/text/Text.tsx b/packages/lumx-react/src/components/text/Text.tsx
index 08ffdfbb5..7255cf429 100644
--- a/packages/lumx-react/src/components/text/Text.tsx
+++ b/packages/lumx-react/src/components/text/Text.tsx
@@ -1,7 +1,8 @@
-import React, { Children, Fragment, forwardRef } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { Children, Fragment } from 'react';
 
 import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
     getRootClassName,
@@ -73,7 +74,7 @@ const DEFAULT_PROPS = {} as const;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Text: Comp<TextProps> = forwardRef((props, ref) => {
+export const Text = createComponent<TextProps>((props, ref) => {
     const {
         as: Component,
         children,
diff --git a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
index 906b0a32f..c5830f4cd 100644
--- a/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
+++ b/packages/lumx-react/src/components/thumbnail/Thumbnail.tsx
@@ -1,6 +1,6 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 import React, {
     CSSProperties,
-    forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
     MouseEventHandler,
@@ -13,7 +13,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
 
-import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiImageBroken } from '@lumx/icons';
@@ -98,7 +98,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
+export const Thumbnail = createComponent<ThumbnailProps>((props, ref) => {
     const {
         align,
         alt,
diff --git a/packages/lumx-react/src/components/toolbar/Toolbar.tsx b/packages/lumx-react/src/components/toolbar/Toolbar.tsx
index 08a7fc460..7ab595b70 100644
--- a/packages/lumx-react/src/components/toolbar/Toolbar.tsx
+++ b/packages/lumx-react/src/components/toolbar/Toolbar.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
@@ -39,7 +40,7 @@ const DEFAULT_PROPS: Partial<ToolbarProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Toolbar: Comp<ToolbarProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Toolbar = createComponent<ToolbarProps, HTMLDivElement>((props, ref) => {
     const { after, before, className, label, ...forwardedProps } = props;
 
     return (
diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
index 96db0eabb..48b786335 100644
--- a/packages/lumx-react/src/components/tooltip/Tooltip.tsx
+++ b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
@@ -1,11 +1,12 @@
+import { createComponent } from '@lumx/react/utils/createComponent';
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { forwardRef, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
@@ -70,7 +71,7 @@ const ARROW_SIZE = 8;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Tooltip = createComponent<TooltipProps, HTMLDivElement>((props, ref) => {
     const {
         label,
         children,
diff --git a/packages/lumx-react/src/components/uploader/Uploader.tsx b/packages/lumx-react/src/components/uploader/Uploader.tsx
index 776fd3682..af21d8a70 100644
--- a/packages/lumx-react/src/components/uploader/Uploader.tsx
+++ b/packages/lumx-react/src/components/uploader/Uploader.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
@@ -76,7 +77,7 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Uploader: Comp<UploaderProps> = forwardRef((props, ref) => {
+export const Uploader = createComponent<UploaderProps>((props, ref) => {
     const { aspectRatio, className, label, icon, size, theme, variant, fileInputProps, ...forwardedProps } = props;
     // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
diff --git a/packages/lumx-react/src/components/user-block/UserBlock.tsx b/packages/lumx-react/src/components/user-block/UserBlock.tsx
index 2ab7f616e..ae57fd7c6 100644
--- a/packages/lumx-react/src/components/user-block/UserBlock.tsx
+++ b/packages/lumx-react/src/components/user-block/UserBlock.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { createComponent } from '@lumx/react/utils/createComponent';
+import React, { ReactNode } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
 import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { AvatarProps } from '../avatar/Avatar';
@@ -72,7 +73,7 @@ const DEFAULT_PROPS: Partial<UserBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const UserBlock = createComponent<UserBlockProps, HTMLDivElement>((props, ref) => {
     const {
         avatarProps,
         className,
diff --git a/packages/lumx-react/src/utils/createComponent/index.d.ts b/packages/lumx-react/src/utils/createComponent/index.d.ts
new file mode 100644
index 000000000..796f44fc6
--- /dev/null
+++ b/packages/lumx-react/src/utils/createComponent/index.d.ts
@@ -0,0 +1,4 @@
+import type { ReactNode, ForwardedRef } from 'react';
+import type { Comp } from '../type';
+
+declare function createComponent<P, T = HTMLElement>(render: (props: P, ref: ForwardedRef<T>) => ReactNode): Comp<P, T>;
diff --git a/packages/lumx-react/src/utils/createComponent/index.js b/packages/lumx-react/src/utils/createComponent/index.js
new file mode 100644
index 000000000..11c0c20dc
--- /dev/null
+++ b/packages/lumx-react/src/utils/createComponent/index.js
@@ -0,0 +1 @@
+export { forwardRef as createComponent } from 'react';
diff --git a/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs b/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs
index 8a2f00dee..e3141dd50 100644
--- a/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs
+++ b/packages/yo-generators/generators/component/templates/FunctionalComponent.tsx.ejs
@@ -1,14 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { createComponent } from "@lumx/react/utils/createComponent";
 
 /**
  * Defines the props of the component.
  */
-export interface <%= componentName %>Props extends GenericProps {}
+export interface <%= componentName %>Props {}
 
 /**
  * Component display name.
@@ -28,7 +28,7 @@ const DEFAULT_PROPS: Partial<<%= componentName %>Props> = {};
 /**
  * [Enter the description of the component here].
  */
-export const <%= componentName %>: Comp<<%= componentName %>Props, HTMLDivElement> = forwardRef((props, ref) => {
+export const <%= componentName %> = createComponent<<%= componentName %>Props, HTMLDivElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (