diff --git a/examples/button/button.polymorph.tsx b/examples/button/button.polymorph.tsx
index ea99ef348..3609ffff8 100644
--- a/examples/button/button.polymorph.tsx
+++ b/examples/button/button.polymorph.tsx
@@ -46,6 +46,7 @@ function Component() {
       <Button as="span" className="cursor-pointer">
         Span Button
       </Button>
+      {/* @ts-expect-error TODO: fix `as` inference */}
       <Button as={Link} href="#">
         Next Link Button
       </Button>
diff --git a/examples/dropdown/dropdown.customItem.tsx b/examples/dropdown/dropdown.customItem.tsx
index d6fbc7aa0..96509097b 100644
--- a/examples/dropdown/dropdown.customItem.tsx
+++ b/examples/dropdown/dropdown.customItem.tsx
@@ -41,6 +41,7 @@ function Component() {
 function Component() {
   return (
     <Dropdown dismissOnClick={false} label="My custom item">
+      {/* @ts-expect-error TODO: fix `as` inference */}
       <DropdownItem as={Link} href="#">
         Home
       </DropdownItem>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 53c672d12..1df740f29 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,7 @@
-import type { ElementType } from 'react';
-import { forwardRef, type ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ElementType, ForwardedRef } from 'react';
+import { type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
+import genericForwardRef from '../../helpers/generic-forward-ref';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
@@ -15,7 +16,6 @@ import { Spinner } from '../Spinner';
 import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
 import type { PositionInButtonGroup } from './ButtonGroup';
 import { ButtonGroup } from './ButtonGroup';
-import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../helpers/generic-as-prop';
 
 export interface FlowbiteButtonTheme {
   base: string;
@@ -67,110 +67,105 @@ export interface ButtonSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'lg' | 'x
   [key: string]: string;
 }
 
-export type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentPropWithRef<
-  T,
-  {
-    href?: string;
-    color?: keyof FlowbiteColors;
-    fullSized?: boolean;
-    gradientDuoTone?: keyof ButtonGradientDuoToneColors;
-    gradientMonochrome?: keyof ButtonGradientColors;
-    target?: string;
-    isProcessing?: boolean;
-    processingLabel?: string;
-    processingSpinner?: ReactNode;
-    label?: ReactNode;
-    outline?: boolean;
-    pill?: boolean;
-    positionInGroup?: keyof PositionInButtonGroup;
-    size?: keyof ButtonSizes;
-    theme?: DeepPartial<FlowbiteButtonTheme>;
-  }
->;
-
-type ButtonComponentType = (<C extends React.ElementType = 'button'>(
-  props: ButtonProps<C>,
-) => React.ReactNode | null) & { displayName?: string };
+export type ButtonProps<T extends ElementType = 'button'> = {
+  as?: T | null;
+  href?: string;
+  color?: keyof FlowbiteColors;
+  fullSized?: boolean;
+  gradientDuoTone?: keyof ButtonGradientDuoToneColors;
+  gradientMonochrome?: keyof ButtonGradientColors;
+  target?: string;
+  isProcessing?: boolean;
+  processingLabel?: string;
+  processingSpinner?: ReactNode;
+  label?: ReactNode;
+  outline?: boolean;
+  pill?: boolean;
+  positionInGroup?: keyof PositionInButtonGroup;
+  size?: keyof ButtonSizes;
+  theme?: DeepPartial<FlowbiteButtonTheme>;
+} & ComponentPropsWithoutRef<T>;
 
-const ButtonComponentFn: ButtonComponentType = forwardRef(
-  <T extends ElementType = 'button'>(
-    {
-      children,
-      className,
-      color = 'info',
-      disabled,
-      fullSized,
-      isProcessing = false,
-      processingLabel = 'Loading...',
-      processingSpinner,
-      gradientDuoTone,
-      gradientMonochrome,
-      label,
-      outline = false,
-      pill = false,
-      positionInGroup = 'none',
-      size = 'md',
-      theme: customTheme = {},
-      ...props
-    }: ButtonProps<T>,
-    ref: PolymorphicRef<T>,
-  ) => {
-    const { buttonGroup: groupTheme, button: buttonTheme } = getTheme();
-    const theme = mergeDeep(buttonTheme, customTheme);
+const ButtonComponentFn = <T extends ElementType = 'button'>(
+  {
+    children,
+    className,
+    color = 'info',
+    disabled,
+    fullSized,
+    isProcessing = false,
+    processingLabel = 'Loading...',
+    processingSpinner,
+    gradientDuoTone,
+    gradientMonochrome,
+    label,
+    outline = false,
+    pill = false,
+    positionInGroup = 'none',
+    size = 'md',
+    theme: customTheme = {},
+    ...props
+  }: ButtonProps<T>,
+  ref: ForwardedRef<T>,
+) => {
+  const { buttonGroup: groupTheme, button: buttonTheme } = getTheme();
+  const theme = mergeDeep(buttonTheme, customTheme);
 
-    const theirProps = props as ButtonBaseProps<T>;
+  const theirProps = props as ButtonBaseProps<T>;
 
-    return (
-      <ButtonBase
-        ref={ref}
-        disabled={disabled}
+  return (
+    <ButtonBase
+      ref={ref}
+      disabled={disabled}
+      className={twMerge(
+        theme.base,
+        disabled && theme.disabled,
+        !gradientDuoTone && !gradientMonochrome && theme.color[color],
+        gradientDuoTone && !gradientMonochrome && theme.gradientDuoTone[gradientDuoTone],
+        !gradientDuoTone && gradientMonochrome && theme.gradient[gradientMonochrome],
+        outline && (theme.outline.color[color] ?? theme.outline.color.default),
+        theme.pill[pill ? 'on' : 'off'],
+        fullSized && theme.fullSized,
+        groupTheme.position[positionInGroup],
+        className,
+      )}
+      {...theirProps}
+    >
+      <span
         className={twMerge(
-          theme.base,
-          disabled && theme.disabled,
-          !gradientDuoTone && !gradientMonochrome && theme.color[color],
-          gradientDuoTone && !gradientMonochrome && theme.gradientDuoTone[gradientDuoTone],
-          !gradientDuoTone && gradientMonochrome && theme.gradient[gradientMonochrome],
-          outline && (theme.outline.color[color] ?? theme.outline.color.default),
-          theme.pill[pill ? 'on' : 'off'],
-          fullSized && theme.fullSized,
-          groupTheme.position[positionInGroup],
-          className,
+          theme.inner.base,
+          theme.outline[outline ? 'on' : 'off'],
+          theme.outline.pill[outline && pill ? 'on' : 'off'],
+          theme.size[size],
+          outline && !theme.outline.color[color] && theme.inner.outline,
+          isProcessing && theme.isProcessing,
+          isProcessing && theme.inner.isProcessingPadding[size],
+          theme.inner.position[positionInGroup],
         )}
-        {...theirProps}
       >
-        <span
-          className={twMerge(
-            theme.inner.base,
-            theme.outline[outline ? 'on' : 'off'],
-            theme.outline.pill[outline && pill ? 'on' : 'off'],
-            theme.size[size],
-            outline && !theme.outline.color[color] && theme.inner.outline,
-            isProcessing && theme.isProcessing,
-            isProcessing && theme.inner.isProcessingPadding[size],
-            theme.inner.position[positionInGroup],
+        <>
+          {isProcessing && (
+            <span className={twMerge(theme.spinnerSlot, theme.spinnerLeftPosition[size])}>
+              {processingSpinner || <Spinner size={size} />}
+            </span>
           )}
-        >
-          <>
-            {isProcessing && (
-              <span className={twMerge(theme.spinnerSlot, theme.spinnerLeftPosition[size])}>
-                {processingSpinner || <Spinner size={size} />}
-              </span>
-            )}
-            {typeof children !== 'undefined' ? (
-              children
-            ) : (
-              <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
-                {isProcessing ? processingLabel : label}
-              </span>
-            )}
-          </>
-        </span>
-      </ButtonBase>
-    );
-  },
-);
+          {typeof children !== 'undefined' ? (
+            children
+          ) : (
+            <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
+              {isProcessing ? processingLabel : label}
+            </span>
+          )}
+        </>
+      </span>
+    </ButtonBase>
+  );
+};
 
 ButtonComponentFn.displayName = 'Button';
-export const Button = Object.assign(ButtonComponentFn, {
+
+const ButtonComponent = genericForwardRef(ButtonComponentFn);
+
+export const Button = Object.assign(ButtonComponent, {
   Group: ButtonGroup,
 });
diff --git a/src/components/Button/ButtonBase.tsx b/src/components/Button/ButtonBase.tsx
index 6bb5a97c1..42bd13799 100644
--- a/src/components/Button/ButtonBase.tsx
+++ b/src/components/Button/ButtonBase.tsx
@@ -1,19 +1,18 @@
-import { createElement, type ComponentPropsWithoutRef, type ElementType, type ForwardedRef, forwardRef } from 'react';
+import { createElement, type ComponentPropsWithoutRef, type ElementType, type ForwardedRef } from 'react';
+import genericForwardRef from '../../helpers/generic-forward-ref';
 
 export type ButtonBaseProps<T extends ElementType = 'button'> = {
   as?: T;
   href?: string;
 } & ComponentPropsWithoutRef<T>;
 
-export const ButtonBase = forwardRef(
-  <T extends ElementType = 'button'>(
-    { children, as: Component, href, type = 'button', ...props }: ButtonBaseProps<T>,
-    ref: ForwardedRef<T>,
-  ) => {
-    const BaseComponent = Component || (href ? 'a' : 'button');
+const ButtonBaseComponent = <T extends ElementType = 'button'>(
+  { children, as: Component, href, type = 'button', ...props }: ButtonBaseProps<T>,
+  ref: ForwardedRef<T>,
+) => {
+  const BaseComponent = Component || (href ? 'a' : 'button');
 
-    return createElement(BaseComponent, { ref, href, type, ...props }, children);
-  },
-);
+  return createElement(BaseComponent, { ref, href, type, ...props }, children);
+};
 
-ButtonBase.displayName = 'ButtonBaseComponent';
+export const ButtonBase = genericForwardRef(ButtonBaseComponent);
diff --git a/src/components/Dropdown/Dropdown.spec.tsx b/src/components/Dropdown/Dropdown.spec.tsx
index fec8846ae..c5f1895c8 100644
--- a/src/components/Dropdown/Dropdown.spec.tsx
+++ b/src/components/Dropdown/Dropdown.spec.tsx
@@ -167,7 +167,7 @@ describe('Components / Dropdown', () => {
   });
 
   describe('Dropdown item render', async () => {
-    it('should override Dropdown.Item base component when using `as` prop', async () => {
+    it('should override Dropdownn.Item base component when using `as` prop', async () => {
       const user = userEvent.setup();
 
       const CustomBaseItem = ({ children }: PropsWithChildren) => {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 3b34ac8f1..8398785b1 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -10,6 +10,7 @@ import type {
   MutableRefObject,
   ReactElement,
   ReactNode,
+  RefCallback,
   SetStateAction,
 } from 'react';
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -97,7 +98,13 @@ const Trigger = ({
       {children}
     </button>
   ) : (
-    <Button {...buttonProps} disabled={disabled} type="button" ref={refs.setReference} {...a11yProps}>
+    <Button
+      {...buttonProps}
+      disabled={disabled}
+      type="button"
+      ref={refs.setReference as RefCallback<'button'>}
+      {...a11yProps}
+    >
       {children}
     </Button>
   );
diff --git a/src/components/Dropdown/DropdownItem.tsx b/src/components/Dropdown/DropdownItem.tsx
index 2c36c3206..673304c62 100644
--- a/src/components/Dropdown/DropdownItem.tsx
+++ b/src/components/Dropdown/DropdownItem.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import { useListItem, useMergeRefs } from '@floating-ui/react';
-import { forwardRef, type ComponentProps, type ElementType, type FC, type RefCallback } from 'react';
+import { useListItem } from '@floating-ui/react';
+import type { ComponentProps, ComponentPropsWithoutRef, ElementType, FC, RefCallback } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
 import { ButtonBase, type ButtonBaseProps } from '../Button/ButtonBase';
 import { useDropdownContext } from './DropdownContext';
-import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '~/src/helpers/generic-as-prop';
 
 export interface FlowbiteDropdownItemTheme {
   container: string;
@@ -15,52 +14,47 @@ export interface FlowbiteDropdownItemTheme {
   icon: string;
 }
 
-export type DropdownItemProps<T extends ElementType = 'button'> = PolymorphicComponentPropWithRef<
-  T,
-  {
-    href?: string;
-    icon?: FC<ComponentProps<'svg'>>;
-    onClick?: () => void;
-    theme?: DeepPartial<FlowbiteDropdownItemTheme>;
-  }
->;
+export type DropdownItemProps<T extends ElementType = 'button'> = {
+  // TODO: make it work with `Link` from Next.js
+  as?: T;
+  href?: string;
+  icon?: FC<ComponentProps<'svg'>>;
+  onClick?: () => void;
+  theme?: DeepPartial<FlowbiteDropdownItemTheme>;
+} & ComponentPropsWithoutRef<T>;
 
-type DropdownItemComponentType = (<C extends React.ElementType = 'button'>(
-  props: DropdownItemProps<C>,
-) => React.ReactNode | null) & { displayName?: string };
+export const DropdownItem = <T extends ElementType = 'button'>({
+  children,
+  className,
+  icon: Icon,
+  onClick,
+  theme: customTheme = {},
+  ...props
+}: DropdownItemProps<T>) => {
+  const { ref, index } = useListItem({ label: typeof children === 'string' ? children : undefined });
+  const { theme: rootTheme, activeIndex, dismissOnClick, getItemProps, handleSelect } = useDropdownContext();
+  const isActive = activeIndex === index;
+  const theme = mergeDeep(rootTheme.floating.item, customTheme);
 
-export const DropdownItem: DropdownItemComponentType = forwardRef(
-  <T extends ElementType = 'button'>(
-    { children, className, icon: Icon, onClick, theme: customTheme = {}, ...props }: DropdownItemProps<T>,
-    forwardedRef: PolymorphicRef<T>,
-  ) => {
-    const { ref: listItemRef, index } = useListItem({ label: typeof children === 'string' ? children : undefined });
-    const ref = useMergeRefs([forwardedRef, listItemRef]);
-    const { theme: rootTheme, activeIndex, dismissOnClick, getItemProps, handleSelect } = useDropdownContext();
-    const isActive = activeIndex === index;
-    const theme = mergeDeep(rootTheme.floating.item, customTheme);
+  const theirProps = props as ButtonBaseProps<T>;
 
-    const theirProps = props as ButtonBaseProps<T>;
-
-    return (
-      <li role="menuitem" className={theme.container}>
-        <ButtonBase
-          ref={ref as RefCallback<T>}
-          className={twMerge(theme.base, className)}
-          {...theirProps}
-          {...getItemProps({
-            onClick: () => {
-              onClick && onClick();
-              dismissOnClick && handleSelect(null);
-            },
-          })}
-          tabIndex={isActive ? 0 : -1}
-        >
-          {Icon && <Icon className={theme.icon} />}
-          {children}
-        </ButtonBase>
-      </li>
-    );
-  },
-);
-DropdownItem.displayName = 'DropdownItem';
+  return (
+    <li role="menuitem" className={theme.container}>
+      <ButtonBase
+        ref={ref as RefCallback<T>}
+        className={twMerge(theme.base, className)}
+        {...theirProps}
+        {...getItemProps({
+          onClick: () => {
+            onClick && onClick();
+            dismissOnClick && handleSelect(null);
+          },
+        })}
+        tabIndex={isActive ? 0 : -1}
+      >
+        {Icon && <Icon className={theme.icon} />}
+        {children}
+      </ButtonBase>
+    </li>
+  );
+};
diff --git a/src/helpers/generic-as-prop.ts b/src/helpers/generic-as-prop.ts
deleted file mode 100644
index 53c65add8..000000000
--- a/src/helpers/generic-as-prop.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type React from 'react';
-
-export type AsProp<C extends React.ElementType> = {
-  as?: C | null;
-};
-
-export type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<
-  Props & AsProp<C>
-> &
-  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<
-  C,
-  Props
-> & {
-  ref?: PolymorphicRef<C>;
-};
-
-export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
diff --git a/src/helpers/generic-forward-ref.ts b/src/helpers/generic-forward-ref.ts
new file mode 100644
index 000000000..28460fa5e
--- /dev/null
+++ b/src/helpers/generic-forward-ref.ts
@@ -0,0 +1,13 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+/** This allow the `forwardRef` to be used with generic components */
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FixedForwardRef = <T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => JSX.Element,
+) => (props: P & React.RefAttributes<T>) => JSX.Element;
+
+const genericForwardRef = forwardRef as FixedForwardRef;
+
+export default genericForwardRef;