diff --git a/src/lib/components/Accordion/AccordionTitle.tsx b/src/lib/components/Accordion/AccordionTitle.tsx
index d89c223d6d..39c04e3276 100644
--- a/src/lib/components/Accordion/AccordionTitle.tsx
+++ b/src/lib/components/Accordion/AccordionTitle.tsx
@@ -9,10 +9,7 @@ import { useAccordionContext } from './AccordionPanelContext';
 export interface FlowbiteAccordionTitleTheme {
   arrow: {
     base: string;
-    open: {
-      off: string;
-      on: string;
-    };
+    open: FlowbiteBoolean;
   };
   base: string;
   flush: FlowbiteBoolean;
diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx
index ced6f92c07..69b87c5b12 100644
--- a/src/lib/components/Avatar/Avatar.tsx
+++ b/src/lib/components/Avatar/Avatar.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
 import { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
-import type { FlowbiteColors, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import AvatarGroup from './AvatarGroup';
 import AvatarGroupCounter from './AvatarGroupCounter';
@@ -24,9 +24,7 @@ export interface FlowbiteAvatarRootTheme {
   statusPosition: FlowbitePositions;
 }
 
-export interface FlowbiteAvatarImageTheme {
-  off: string;
-  on: string;
+export interface FlowbiteAvatarImageTheme extends FlowbiteBoolean {
   placeholder: string;
 }
 
diff --git a/src/lib/components/Badge/Badge.tsx b/src/lib/components/Badge/Badge.tsx
index aecfc68d61..38543aff33 100644
--- a/src/lib/components/Badge/Badge.tsx
+++ b/src/lib/components/Badge/Badge.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
-import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteBadgeTheme {
@@ -17,9 +17,7 @@ export interface FlowbiteBadgeRootTheme {
   size: BadgeSizes;
 }
 
-export interface FlowbiteBadgeIconTheme {
-  off: string;
-  on: string;
+export interface FlowbiteBadgeIconTheme extends FlowbiteBoolean {
   size: BadgeSizes;
 }
 
diff --git a/src/lib/components/Breadcrumb/BreadcrumbItem.tsx b/src/lib/components/Breadcrumb/BreadcrumbItem.tsx
index 5ac7a116e2..cb262f1256 100644
--- a/src/lib/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/src/lib/components/Breadcrumb/BreadcrumbItem.tsx
@@ -3,15 +3,13 @@ import { ComponentProps, FC, forwardRef, PropsWithChildren } from 'react';
 import { HiOutlineChevronRight } from 'react-icons/hi';
 import { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteBreadcrumbItemTheme {
   base: string;
   chevron: string;
-  href: {
-    off: string;
-    on: string;
-  };
+  href: FlowbiteBoolean;
   icon: string;
 }
 
diff --git a/src/lib/components/Button/Button.tsx b/src/lib/components/Button/Button.tsx
index a28af74333..78009c3d78 100644
--- a/src/lib/components/Button/Button.tsx
+++ b/src/lib/components/Button/Button.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import type {
   FlowbiteBoolean,
   FlowbiteColors,
@@ -18,20 +19,24 @@ export interface FlowbiteButtonTheme {
   disabled: string;
   gradient: ButtonGradientColors;
   gradientDuoTone: ButtonGradientDuoToneColors;
-  inner: {
-    base: string;
-    position: PositionInButtonGroup;
-    outline: string;
-  };
+  inner: FlowbiteButtonInnerTheme;
   label: string;
-  outline: FlowbiteBoolean & {
-    color: ButtonOutlineColors;
-    pill: FlowbiteBoolean;
-  };
+  outline: FlowbiteButtonOutlineTheme;
   pill: FlowbiteBoolean;
   size: ButtonSizes;
 }
 
+export interface FlowbiteButtonInnerTheme {
+  base: string;
+  position: PositionInButtonGroup;
+  outline: string;
+}
+
+export interface FlowbiteButtonOutlineTheme extends FlowbiteBoolean {
+  color: ButtonOutlineColors;
+  pill: FlowbiteBoolean;
+}
+
 export interface ButtonColors
   extends Pick<FlowbiteColors, 'dark' | 'failure' | 'gray' | 'info' | 'light' | 'purple' | 'success' | 'warning'> {
   [key: string]: string;
@@ -64,6 +69,7 @@ export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'r
   pill?: boolean;
   positionInGroup?: keyof PositionInButtonGroup;
   size?: keyof ButtonSizes;
+  theme?: FlowbiteButtonTheme;
 }
 
 const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
@@ -82,14 +88,14 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
       positionInGroup = 'none',
       size = 'md',
       className,
+      theme: customTheme = {},
       ...props
     },
     ref,
   ) => {
-    const isLink = typeof href !== 'undefined';
-
-    const { buttonGroup: groupTheme, button: theme } = useTheme().theme;
+    const { buttonGroup: groupTheme, button: theme } = mergeDeep(useTheme().theme, customTheme);
 
+    const isLink = typeof href !== 'undefined';
     const Component = isLink ? 'a' : 'button';
     const theirProps = props as object;
 
diff --git a/src/lib/components/Card/Card.tsx b/src/lib/components/Card/Card.tsx
index 1e4211845f..0e0043a9ab 100644
--- a/src/lib/components/Card/Card.tsx
+++ b/src/lib/components/Card/Card.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteCardTheme {
@@ -12,19 +13,13 @@ export interface FlowbiteCardTheme {
 export interface FlowbiteCardRootTheme {
   base: string;
   children: string;
-  horizontal: {
-    off: string;
-    on: string;
-  };
+  horizontal: FlowbiteBoolean;
   href: string;
 }
 
 export interface FlowbiteCardImageTheme {
   base: string;
-  horizontal: {
-    off: string;
-    on: string;
-  };
+  horizontal: FlowbiteBoolean;
 }
 
 export interface CardProps extends PropsWithChildren<ComponentProps<'div'>> {
diff --git a/src/lib/components/Carousel/Carousel.tsx b/src/lib/components/Carousel/Carousel.tsx
index 7a9e35a884..63fa848cca 100644
--- a/src/lib/components/Carousel/Carousel.tsx
+++ b/src/lib/components/Carousel/Carousel.tsx
@@ -3,33 +3,44 @@ import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } f
 import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';
 import ScrollContainer from 'react-indiana-drag-scroll';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import windowExists from '../../helpers/window-exists';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteCarouselTheme {
+  root: FlowbiteCarouselRootTheme;
+  indicators: FlowbiteCarouselIndicatorsTheme;
+  item: FlowbiteCarouselItemTheme;
+  control: FlowbiteCarouselControlTheme;
+  scrollContainer: FlowbiteCarouselScrollContainer;
+}
+
+export interface FlowbiteCarouselRootTheme {
   base: string;
-  indicators: {
-    active: {
-      off: string;
-      on: string;
-    };
-    base: string;
-    wrapper: string;
-  };
-  item: {
-    base: string;
-    wrapper: string;
-  };
-  control: {
-    base: string;
-    icon: string;
-  };
   leftControl: string;
   rightControl: string;
-  scrollContainer: {
-    base: string;
-    snap: string;
-  };
+}
+
+export interface FlowbiteCarouselIndicatorsTheme {
+  active: FlowbiteBoolean;
+  base: string;
+  wrapper: string;
+}
+
+export interface FlowbiteCarouselItemTheme {
+  base: string;
+  wrapper: string;
+}
+
+export interface FlowbiteCarouselControlTheme {
+  base: string;
+  icon: string;
+}
+
+export interface FlowbiteCarouselScrollContainer {
+  base: string;
+  snap: string;
 }
 
 export interface CarouselProps extends PropsWithChildren<ComponentProps<'div'>> {
@@ -38,6 +49,7 @@ export interface CarouselProps extends PropsWithChildren<ComponentProps<'div'>>
   rightControl?: ReactNode;
   slide?: boolean;
   slideInterval?: number;
+  theme?: FlowbiteCarouselTheme;
 }
 
 export const Carousel: FC<CarouselProps> = ({
@@ -48,14 +60,15 @@ export const Carousel: FC<CarouselProps> = ({
   slide = true,
   slideInterval,
   className,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
-  const isDeviceMobile = windowExists() && navigator.userAgent.indexOf('IEMobile') !== -1;
+  const theme = mergeDeep(useTheme().theme.carousel, customTheme);
 
+  const isDeviceMobile = windowExists() && navigator.userAgent.indexOf('IEMobile') !== -1;
   const carouselContainer = useRef<HTMLDivElement>(null);
   const [activeItem, setActiveItem] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
-  const theme = useTheme().theme.carousel;
 
   const items = useMemo(
     () =>
@@ -96,7 +109,7 @@ export const Carousel: FC<CarouselProps> = ({
   const handleDragging = (dragging: boolean) => () => setIsDragging(dragging);
 
   return (
-    <div className={classNames(theme.base, className)} data-testid="carousel" {...props}>
+    <div className={classNames(theme.root.base, className)} data-testid="carousel" {...props}>
       <ScrollContainer
         className={classNames(
           theme.scrollContainer.base,
@@ -141,7 +154,7 @@ export const Carousel: FC<CarouselProps> = ({
 
       {items && (
         <>
-          <div className={theme.leftControl}>
+          <div className={theme.root.leftControl}>
             <button
               className="group"
               data-testid="carousel-left-control"
@@ -151,7 +164,7 @@ export const Carousel: FC<CarouselProps> = ({
               {leftControl ? leftControl : <DefaultLeftControl />}
             </button>
           </div>
-          <div className={theme.rightControl}>
+          <div className={theme.root.rightControl}>
             <button
               className="group"
               data-testid="carousel-right-control"
diff --git a/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx b/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx
index 3658c9070d..59705cc0ce 100644
--- a/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx
+++ b/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx
@@ -2,22 +2,31 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { useContext } from 'react';
 import { HiMoon, HiSun } from 'react-icons/hi';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { ThemeContext, useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteDarkThemeToggleTheme {
+  root: FlowbiteDarkThemeToggleRootTheme;
+}
+
+export interface FlowbiteDarkThemeToggleRootTheme {
   base: string;
   icon: string;
 }
 
-export type DarkThemeToggleProps = ComponentProps<'button'>;
+export interface DarkThemeToggleProps extends ComponentProps<'button'> {
+  theme?: DeepPartial<FlowbiteDarkThemeToggleTheme>;
+}
+
+export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({ className, theme: customTheme = {}, ...props }) => {
+  const theme = mergeDeep(useTheme().theme.darkThemeToggle, customTheme);
 
-export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({ className, ...props }) => {
-  const theme = useTheme().theme.darkThemeToggle;
   const { mode, toggleMode } = useContext(ThemeContext);
 
   return (
     <button
-      className={classNames(theme.base, className)}
+      className={classNames(theme.root.base, className)}
       data-testid="dark-theme-toggle"
       onClick={toggleMode}
       type="button"
@@ -25,9 +34,9 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({ className, ...props
       {...props}
     >
       {mode === 'dark' ? (
-        <HiSun aria-label="Currently dark mode" className={theme.icon} />
+        <HiSun aria-label="Currently dark mode" className={theme.root.icon} />
       ) : (
-        <HiMoon aria-label="Currently light mode" className={theme.icon} />
+        <HiMoon aria-label="Currently light mode" className={theme.root.icon} />
       )}
     </button>
   );
diff --git a/src/lib/components/FileInput/FileInput.tsx b/src/lib/components/FileInput/FileInput.tsx
index bcc9ec1513..4af3d230a1 100644
--- a/src/lib/components/FileInput/FileInput.tsx
+++ b/src/lib/components/FileInput/FileInput.tsx
@@ -8,15 +8,23 @@ import { HelperText } from '../HelperText';
 import type { TextInputColors, TextInputSizes } from '../TextInput';
 
 export interface FlowbiteFileInputTheme {
+  root: FlowbiteFileInputRootTheme;
+  field: FlowbiteFileInputFieldTheme;
+}
+
+export interface FlowbiteFileInputRootTheme {
+  base: string;
+}
+
+export interface FlowbiteFileInputFieldTheme {
+  base: string;
+  input: FlowbiteFileInputFieldInputTheme;
+}
+
+export interface FlowbiteFileInputFieldInputTheme {
   base: string;
-  field: {
-    base: string;
-    input: {
-      base: string;
-      sizes: TextInputSizes;
-      colors: TextInputColors;
-    };
-  };
+  sizes: TextInputSizes;
+  colors: TextInputColors;
 }
 
 export interface FileInputProps extends Omit<ComponentProps<'input'>, 'type' | 'ref' | 'color'> {
@@ -27,12 +35,12 @@ export interface FileInputProps extends Omit<ComponentProps<'input'>, 'type' | '
 }
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  ({ theme: customTheme = {}, sizing = 'md', helperText, color = 'gray', className, ...props }, ref) => {
+  ({ sizing = 'md', helperText, color = 'gray', className, theme: customTheme = {}, ...props }, ref) => {
     const theme = mergeDeep(useTheme().theme.fileInput, customTheme);
 
     return (
       <>
-        <div className={classNames(theme.base, className)}>
+        <div className={classNames(theme.root.base, className)}>
           <div className={theme.field.base}>
             <input
               className={classNames(
diff --git a/src/lib/components/Floating/Floating.tsx b/src/lib/components/Floating/Floating.tsx
index 65a13cced1..25b1dceef1 100644
--- a/src/lib/components/Floating/Floating.tsx
+++ b/src/lib/components/Floating/Floating.tsx
@@ -15,6 +15,11 @@ import { useEffect, useRef, useState } from 'react';
 import { getArrowPlacement, getMiddleware, getPlacement } from '../../helpers/floating';
 
 export interface FlowbiteFloatingTheme {
+  root: FlowbiteFloatingRootTheme;
+  arrow: FlowbiteFloatingArrowTheme;
+}
+
+export interface FlowbiteFloatingRootTheme {
   target: string;
   base: string;
   animation: string;
@@ -25,15 +30,16 @@ export interface FlowbiteFloatingTheme {
     auto: string;
   };
   content: string;
-  arrow: {
-    base: string;
-    style: {
-      dark: string;
-      light: string;
-      auto: string;
-    };
-    placement: string;
+}
+
+export interface FlowbiteFloatingArrowTheme {
+  base: string;
+  style: {
+    dark: string;
+    light: string;
+    auto: string;
   };
+  placement: string;
 }
 
 export interface FloatingProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'style'>> {
@@ -53,7 +59,6 @@ export interface FloatingProps extends PropsWithChildren<Omit<ComponentProps<'di
 export const Floating: FC<FloatingProps> = ({
   children,
   content,
-  theme,
   animation = 'duration-300',
   arrow = true,
   placement = 'top',
@@ -61,6 +66,7 @@ export const Floating: FC<FloatingProps> = ({
   trigger = 'hover',
   closeRequestKey,
   className,
+  theme,
   ...props
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);
@@ -72,6 +78,7 @@ export const Floating: FC<FloatingProps> = ({
     open,
     placement: getPlacement({ placement }),
   });
+
   const {
     context,
     floating,
diff --git a/src/lib/components/Footer/Footer.tsx b/src/lib/components/Footer/Footer.tsx
index 14464a62b0..5277b6cd5f 100644
--- a/src/lib/components/Footer/Footer.tsx
+++ b/src/lib/components/Footer/Footer.tsx
@@ -1,51 +1,36 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
-import { FooterBrand } from './FooterBrand';
-import { FooterCopyright } from './FooterCopyright';
-import { FooterDivider } from './FooterDivider';
-import { FooterIcon } from './FooterIcon';
+import { FlowbiteFooterBrandTheme, FooterBrand } from './FooterBrand';
+import { FlowbiteFooterCopyrightTheme, FooterCopyright } from './FooterCopyright';
+import { FlowbiteFooterDividerTheme, FooterDivider } from './FooterDivider';
+import { FlowbiteFooterIconTheme, FooterIcon } from './FooterIcon';
 import { FooterLink } from './FooterLink';
-import { FooterLinkGroup } from './FooterLinkGroup';
-import { FooterTitle } from './FooterTitle';
+import { FlowbiteFooterLinkGroupTheme, FooterLinkGroup } from './FooterLinkGroup';
+import { FlowbiteFooterTitleTheme, FooterTitle } from './FooterTitle';
 
 export interface FlowbiteFooterTheme {
+  root: FlowbiteFooterRootTheme;
+  groupLink: FlowbiteFooterLinkGroupTheme;
+  icon: FlowbiteFooterIconTheme;
+  title: FlowbiteFooterTitleTheme;
+  divider: FlowbiteFooterDividerTheme;
+  copyright: FlowbiteFooterCopyrightTheme;
+  brand: FlowbiteFooterBrandTheme;
+}
+
+export interface FlowbiteFooterRootTheme {
   base: string;
   container: string;
   bgDark: string;
-  groupLink: {
-    base: string;
-    link: {
-      base: string;
-      href: string;
-    };
-    col: string;
-  };
-  icon: {
-    base: string;
-    size: string;
-  };
-  title: {
-    base: string;
-  };
-  divider: {
-    base: string;
-  };
-  copyright: {
-    base: string;
-    href: string;
-    span: string;
-  };
-  brand: {
-    base: string;
-    img: string;
-    span: string;
-  };
 }
 
 export interface FooterProps extends ComponentProps<'footer'> {
   bgDark?: boolean;
   container?: boolean;
+  theme?: DeepPartial<FlowbiteFooterTheme>;
 }
 
 export const FooterComponent: FC<FooterProps> = ({
@@ -53,12 +38,14 @@ export const FooterComponent: FC<FooterProps> = ({
   className,
   bgDark = false,
   container = false,
+  theme: customTheme = {},
 }): JSX.Element => {
-  const theme = useTheme().theme.footer;
+  const theme = mergeDeep(useTheme().theme.footer, customTheme);
+
   return (
     <footer
       data-testid="flowbite-footer"
-      className={classNames(theme.base, bgDark && theme.bgDark, container && theme.container, className)}
+      className={classNames(theme.root.base, bgDark && theme.root.bgDark, container && theme.root.container, className)}
     >
       {children}
     </footer>
diff --git a/src/lib/components/Footer/FooterBrand.tsx b/src/lib/components/Footer/FooterBrand.tsx
index 971d52c64f..01ee674323 100644
--- a/src/lib/components/Footer/FooterBrand.tsx
+++ b/src/lib/components/Footer/FooterBrand.tsx
@@ -1,15 +1,33 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
+
+export interface FlowbiteFooterBrandTheme {
+  base: string;
+  img: string;
+  span: string;
+}
+
 export interface FooterBrandProps extends PropsWithChildren<ComponentProps<'div'>> {
   alt?: string;
   href?: string;
   name?: string;
   src: string;
+  theme?: DeepPartial<FlowbiteFooterBrandTheme>;
 }
 
-export const FooterBrand: FC<FooterBrandProps> = ({ alt, className, children, href, name, src }) => {
-  const theme = useTheme().theme.footer.brand;
+export const FooterBrand: FC<FooterBrandProps> = ({
+  alt,
+  className,
+  children,
+  href,
+  name,
+  src,
+  theme: customTheme = {},
+}) => {
+  const theme = mergeDeep(useTheme().theme.footer.brand, customTheme);
 
   return (
     <div>
diff --git a/src/lib/components/Footer/FooterCopyright.tsx b/src/lib/components/Footer/FooterCopyright.tsx
index dde4a87ab6..391dfaa7f3 100644
--- a/src/lib/components/Footer/FooterCopyright.tsx
+++ b/src/lib/components/Footer/FooterCopyright.tsx
@@ -1,15 +1,24 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteFooterCopyrightTheme {
+  base: string;
+  href: string;
+  span: string;
+}
+
 export interface CopyrightProps extends PropsWithChildren<ComponentProps<'span'>> {
   href?: string;
   by: string;
   year?: number;
+  theme?: DeepPartial<FlowbiteFooterCopyrightTheme>;
 }
 
-export const FooterCopyright: FC<CopyrightProps> = ({ href, by, year, className }) => {
-  const theme = useTheme().theme.footer.copyright;
+export const FooterCopyright: FC<CopyrightProps> = ({ href, by, year, className, theme: customTheme = {} }) => {
+  const theme = mergeDeep(useTheme().theme.footer.copyright, customTheme);
 
   return (
     <div>
diff --git a/src/lib/components/Footer/FooterDivider.tsx b/src/lib/components/Footer/FooterDivider.tsx
index 6774d1d7f2..6f64073b52 100644
--- a/src/lib/components/Footer/FooterDivider.tsx
+++ b/src/lib/components/Footer/FooterDivider.tsx
@@ -1,11 +1,19 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-type FooterDividerProps = ComponentProps<'hr'>;
+export interface FlowbiteFooterDividerTheme {
+  base: string;
+}
 
-export const FooterDivider: FC<FooterDividerProps> = ({ className }) => {
-  const theme = useTheme().theme.footer.divider;
+export interface FooterDividerProps extends ComponentProps<'hr'> {
+  theme?: DeepPartial<FlowbiteFooterDividerTheme>;
+}
+
+export const FooterDivider: FC<FooterDividerProps> = ({ className, theme: customTheme = {} }) => {
+  const theme = mergeDeep(useTheme().theme.footer.divider, customTheme);
 
   return <hr data-testid="footer-divider" className={classNames(theme.base, className)} />;
 };
diff --git a/src/lib/components/Footer/FooterIcon.tsx b/src/lib/components/Footer/FooterIcon.tsx
index da86e20bab..1def4d5cc7 100644
--- a/src/lib/components/Footer/FooterIcon.tsx
+++ b/src/lib/components/Footer/FooterIcon.tsx
@@ -1,15 +1,29 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteFooterIconTheme {
+  base: string;
+  size: string;
+}
+
 export interface FooterIconProps extends PropsWithChildren<ComponentProps<'a'>> {
   ariaLabel?: string;
   href?: string;
   icon: FC<ComponentProps<'svg'>>;
+  theme?: DeepPartial<FlowbiteFooterIconTheme>;
 }
 
-export const FooterIcon: FC<FooterIconProps> = ({ href, className, ariaLabel, icon: Icon }) => {
-  const theme = useTheme().theme.footer.icon;
+export const FooterIcon: FC<FooterIconProps> = ({
+  href,
+  className,
+  ariaLabel,
+  icon: Icon,
+  theme: customTheme = {},
+}) => {
+  const theme = mergeDeep(useTheme().theme.footer.icon, customTheme);
 
   return (
     <div>
diff --git a/src/lib/components/Footer/FooterLink.tsx b/src/lib/components/Footer/FooterLink.tsx
index f837fcf83f..068cdbe875 100644
--- a/src/lib/components/Footer/FooterLink.tsx
+++ b/src/lib/components/Footer/FooterLink.tsx
@@ -1,13 +1,21 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteFooterLinkTheme {
+  base: string;
+  href: string;
+}
+
 export interface FooterLinkProps extends PropsWithChildren<ComponentProps<'a'>> {
   href: string;
+  theme?: DeepPartial<FlowbiteFooterLinkTheme>;
 }
 
-export const FooterLink: FC<FooterLinkProps> = ({ children, className, href }) => {
-  const theme = useTheme().theme.footer.groupLink.link;
+export const FooterLink: FC<FooterLinkProps> = ({ children, className, theme: customTheme = {}, href }) => {
+  const theme = mergeDeep(useTheme().theme.footer.groupLink.link, customTheme);
 
   return (
     <li className={classNames(theme.base, className)}>
diff --git a/src/lib/components/Footer/FooterLinkGroup.tsx b/src/lib/components/Footer/FooterLinkGroup.tsx
index 86747f6d3d..783dd9a7b1 100644
--- a/src/lib/components/Footer/FooterLinkGroup.tsx
+++ b/src/lib/components/Footer/FooterLinkGroup.tsx
@@ -1,13 +1,28 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
+import { FlowbiteFooterLinkTheme } from './FooterLink';
+
+export interface FlowbiteFooterLinkGroupTheme {
+  base: string;
+  link: FlowbiteFooterLinkTheme;
+  col: string;
+}
 
 export interface FooterLinkGroupProps extends PropsWithChildren<ComponentProps<'ul'>> {
   col?: boolean;
+  theme: DeepPartial<FlowbiteFooterLinkGroupTheme>;
 }
 
-export const FooterLinkGroup: FC<FooterLinkGroupProps> = ({ children, className, col = false }) => {
-  const theme = useTheme().theme.footer.groupLink;
+export const FooterLinkGroup: FC<FooterLinkGroupProps> = ({
+  children,
+  className,
+  col = false,
+  theme: customTheme = {},
+}) => {
+  const theme = mergeDeep(useTheme().theme.footer.groupLink, customTheme);
 
   return (
     <ul data-testid="footer-groupLink" className={classNames(theme.base, col && theme.col, className)}>
diff --git a/src/lib/components/Footer/FooterTitle.tsx b/src/lib/components/Footer/FooterTitle.tsx
index c543c666b8..4399d2d699 100644
--- a/src/lib/components/Footer/FooterTitle.tsx
+++ b/src/lib/components/Footer/FooterTitle.tsx
@@ -1,13 +1,20 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteFooterTitleTheme {
+  base: string;
+}
+
 export interface FooterTitleProps extends PropsWithChildren<ComponentProps<'h2'>> {
   title: string;
+  theme?: DeepPartial<FlowbiteFooterTitleTheme>;
 }
 
-export const FooterTitle: FC<FooterTitleProps> = ({ title, className }) => {
-  const theme = useTheme().theme.footer.title;
+export const FooterTitle: FC<FooterTitleProps> = ({ title, className, theme: customTheme = {} }) => {
+  const theme = mergeDeep(useTheme().theme.footer.title, customTheme);
 
   return (
     <h2 data-testid="flowbite-footer-title" className={classNames(theme.base, className)}>
diff --git a/src/lib/components/HelperText/HelperText.tsx b/src/lib/components/HelperText/HelperText.tsx
index 309089ca5f..a42933b409 100644
--- a/src/lib/components/HelperText/HelperText.tsx
+++ b/src/lib/components/HelperText/HelperText.tsx
@@ -1,9 +1,15 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteHelperTextTheme {
+  root: FlowbiteHelperTextRootTheme;
+}
+
+export interface FlowbiteHelperTextRootTheme {
   base: string;
   colors: HelperColors;
 }
@@ -15,12 +21,21 @@ export interface HelperColors extends Pick<FlowbiteColors, 'gray' | 'info' | 'fa
 export interface HelperTextProps extends PropsWithChildren<Omit<ComponentProps<'p'>, 'color'>> {
   color?: keyof HelperColors;
   value?: string;
+  theme?: DeepPartial<FlowbiteHelperTextTheme>;
 }
 
-export const HelperText: FC<HelperTextProps> = ({ value, children, color = 'default', className, ...props }) => {
-  const theme = useTheme().theme.helperText;
+export const HelperText: FC<HelperTextProps> = ({
+  value,
+  children,
+  color = 'default',
+  className,
+  theme: customTheme = {},
+  ...props
+}) => {
+  const theme = mergeDeep(useTheme().theme.helperText, customTheme);
+
   return (
-    <p className={classNames(theme.base, theme.colors[color], className)} {...props}>
+    <p className={classNames(theme.root.base, theme.root.colors[color], className)} {...props}>
       {value ?? children ?? ''}
     </p>
   );
diff --git a/src/lib/components/Label/Label.tsx b/src/lib/components/Label/Label.tsx
index e54c013c68..84ead9190b 100644
--- a/src/lib/components/Label/Label.tsx
+++ b/src/lib/components/Label/Label.tsx
@@ -1,9 +1,15 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteStateColors } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteLabelTheme {
+  root: FlowbiteLabelRootTheme;
+}
+
+export interface FlowbiteLabelRootTheme {
   base: string;
   colors: LabelColors;
   disabled: string;
@@ -18,6 +24,7 @@ export interface LabelProps extends PropsWithChildren<Omit<ComponentProps<'label
   color?: keyof LabelColors;
   value?: string;
   disabled?: boolean;
+  theme?: DeepPartial<FlowbiteLabelTheme>;
 }
 
 export const Label: FC<LabelProps> = ({
@@ -26,11 +33,16 @@ export const Label: FC<LabelProps> = ({
   disabled = false,
   value,
   className,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
-  const theme = useTheme().theme.label;
+  const theme = mergeDeep(useTheme().theme.label, customTheme);
+
   return (
-    <label className={classNames(theme.base, theme.colors[color], disabled ?? theme.disabled, className)} {...props}>
+    <label
+      className={classNames(theme.root.base, theme.root.colors[color], disabled ?? theme.root.disabled, className)}
+      {...props}
+    >
       {value ?? children ?? ''}
     </label>
   );
diff --git a/src/lib/components/ListGroup/ListGroup.tsx b/src/lib/components/ListGroup/ListGroup.tsx
index deb2a1e466..f3f99a87cf 100644
--- a/src/lib/components/ListGroup/ListGroup.tsx
+++ b/src/lib/components/ListGroup/ListGroup.tsx
@@ -1,27 +1,34 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
-import { ListGroupItem } from './ListGroupItem';
+import { FlowbiteListGroupItemTheme, ListGroupItem } from './ListGroupItem';
 
 export interface FlowbiteListGroupTheme {
+  root: FlowbiteListGroupRootTheme;
+  item: FlowbiteListGroupItemTheme;
+}
+
+export interface FlowbiteListGroupRootTheme {
   base: string;
-  item: {
-    active: FlowbiteBoolean;
-    base: string;
-    href: FlowbiteBoolean;
-    icon: string;
-  };
 }
 
-export type ListGroupProps = PropsWithChildren<ComponentProps<'div'>>;
+export interface ListGroupProps extends PropsWithChildren<ComponentProps<'div'>> {
+  theme?: DeepPartial<FlowbiteListGroupTheme>;
+}
 
-const ListGroupComponent: FC<ListGroupProps> = ({ children, className, ...props }): JSX.Element => {
-  const theme = useTheme().theme.listGroup.base;
+const ListGroupComponent: FC<ListGroupProps> = ({
+  children,
+  className,
+  theme: customTheme = {},
+  ...props
+}): JSX.Element => {
+  const theme = mergeDeep(useTheme().theme.listGroup, customTheme);
   const theirProps = props as object;
 
   return (
-    <ul className={classNames(theme, className)} {...theirProps}>
+    <ul className={classNames(theme.root.base, className)} {...theirProps}>
       {children}
     </ul>
   );
diff --git a/src/lib/components/ListGroup/ListGroupItem.tsx b/src/lib/components/ListGroup/ListGroupItem.tsx
index 249f2ad435..fa0e1479d2 100644
--- a/src/lib/components/ListGroup/ListGroupItem.tsx
+++ b/src/lib/components/ListGroup/ListGroupItem.tsx
@@ -1,7 +1,20 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteListGroupItemTheme {
+  base: string;
+  link: {
+    base: string;
+    active: FlowbiteBoolean;
+    href: FlowbiteBoolean;
+    icon: string;
+  };
+}
+
 export type ListGroupItemProps = (
   | PropsWithChildren<ComponentProps<'a'>>
   | PropsWithChildren<ComponentProps<'button'>>
@@ -11,6 +24,7 @@ export type ListGroupItemProps = (
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
   onClick?: () => void;
+  theme?: DeepPartial<FlowbiteListGroupItemTheme>;
 };
 
 export const ListGroupItem: FC<ListGroupItemProps> = ({
@@ -20,25 +34,29 @@ export const ListGroupItem: FC<ListGroupItemProps> = ({
   icon: Icon,
   onClick,
   className,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
+  const theme = mergeDeep(useTheme().theme.listGroup.item, customTheme);
+
   const isLink = typeof href !== 'undefined';
   const Component = isLink ? 'a' : 'button';
-
-  const theme = useTheme().theme.listGroup.item;
-
   const theirProps = props as object;
 
   return (
-    <li>
+    <li className={classNames(theme.base, className)}>
       <Component
-        className={classNames(theme.active[isActive ? 'on' : 'off'], theme.base, theme.href[isLink ? 'on' : 'off'])}
+        className={classNames(
+          theme.link.active[isActive ? 'on' : 'off'],
+          theme.link.base,
+          theme.link.href[isLink ? 'on' : 'off'],
+        )}
         href={href}
         onClick={onClick}
         type={isLink ? undefined : 'button'}
         {...theirProps}
       >
-        {Icon && <Icon aria-hidden className={theme.icon} data-testid="flowbite-list-group-item-icon" />}
+        {Icon && <Icon aria-hidden className={theme.link.icon} data-testid="flowbite-list-group-item-icon" />}
         {children}
       </Component>
     </li>
diff --git a/src/lib/components/Tooltip/Tooltip.tsx b/src/lib/components/Tooltip/Tooltip.tsx
index 0348abb16d..d7bc3f39b8 100644
--- a/src/lib/components/Tooltip/Tooltip.tsx
+++ b/src/lib/components/Tooltip/Tooltip.tsx
@@ -1,5 +1,7 @@
 import type { Placement } from '@floating-ui/core';
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { Floating, FlowbiteFloatingTheme } from '../Floating';
 import { useTheme } from '../Flowbite/ThemeContext';
 
@@ -12,6 +14,7 @@ export interface TooltipProps extends PropsWithChildren<Omit<ComponentProps<'div
   style?: 'dark' | 'light' | 'auto';
   animation?: false | `duration-${number}`;
   arrow?: boolean;
+  theme?: DeepPartial<FlowbiteTooltipTheme>;
 }
 
 /**
@@ -26,9 +29,10 @@ export const Tooltip: FC<TooltipProps> = ({
   style = 'dark',
   trigger = 'hover',
   className,
+  theme: customTheme = {},
   ...props
 }) => {
-  const theme = useTheme().theme.tooltip;
+  const theme = mergeDeep(useTheme().theme.tooltip, customTheme);
 
   return (
     <Floating