diff --git a/src/docs/pages/ThemePage.tsx b/src/docs/pages/ThemePage.tsx
index fee652dfc..8e265fc69 100644
--- a/src/docs/pages/ThemePage.tsx
+++ b/src/docs/pages/ThemePage.tsx
@@ -8,10 +8,10 @@ import { Flowbite } from '../../lib/components';
 import type { CustomFlowbiteTheme } from '../../lib/components/Flowbite/FlowbiteTheme';
 
 const ThemePage: FC = () => {
-  const theme: CustomFlowbiteTheme = { alert: { color: { primary: 'bg-primary' } } };
+  const theme: CustomFlowbiteTheme = { alert: { root: { color: { primary: 'bg-primary' } } } };
 
   return (
-    <div className="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
+    <div className="flex flex-col max-w-4xl gap-8 mx-auto dark:text-white">
       <div className="flex flex-col gap-2">
         <span className="text-2xl font-bold">Theme</span>
         <div className="py-4">
diff --git a/src/lib/components/Accordion/Accordion.spec.tsx b/src/lib/components/Accordion/Accordion.spec.tsx
index 7a6ad3aff..a3919d44c 100644
--- a/src/lib/components/Accordion/Accordion.spec.tsx
+++ b/src/lib/components/Accordion/Accordion.spec.tsx
@@ -115,7 +115,9 @@ describe('Components / Accordion', () => {
       it('should use custom `base` classes', () => {
         const theme = {
           accordion: {
-            base: 'text-4xl',
+            root: {
+              base: 'text-4xl',
+            },
           },
         };
 
@@ -131,9 +133,11 @@ describe('Components / Accordion', () => {
       it('should use custom `flush` classes', () => {
         const theme = {
           accordion: {
-            flush: {
-              off: 'text-4xl',
-              on: 'text-3xl',
+            root: {
+              flush: {
+                off: 'text-4xl',
+                on: 'text-3xl',
+              },
             },
           },
         };
diff --git a/src/lib/components/Accordion/Accordion.tsx b/src/lib/components/Accordion/Accordion.tsx
index 3f85513cf..a0d7f17d8 100644
--- a/src/lib/components/Accordion/Accordion.tsx
+++ b/src/lib/components/Accordion/Accordion.tsx
@@ -2,32 +2,24 @@ import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
 import { Children, cloneElement, useMemo, useState } from 'react';
 import { HiChevronDown } from 'react-icons/hi';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
-import { AccordionContent } from './AccordionContent';
+import { AccordionContent, FlowbiteAccordionComponentTheme } from './AccordionContent';
 import type { AccordionPanelProps } from './AccordionPanel';
 import { AccordionPanel } from './AccordionPanel';
-import { AccordionTitle } from './AccordionTitle';
+import { AccordionTitle, FlowbiteAccordionTitleTheme } from './AccordionTitle';
 
 export interface FlowbiteAccordionTheme {
+  root: FlowbiteAccordionRootTheme;
+  content: FlowbiteAccordionComponentTheme;
+  title: FlowbiteAccordionTitleTheme;
+}
+
+export interface FlowbiteAccordionRootTheme {
   base: string;
-  content: {
-    base: string;
-  };
   flush: FlowbiteBoolean;
-  title: {
-    arrow: {
-      base: string;
-      open: {
-        off: string;
-        on: string;
-      };
-    };
-    base: string;
-    flush: FlowbiteBoolean;
-    heading: string;
-    open: FlowbiteBoolean;
-  };
 }
 
 export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>> {
@@ -36,6 +28,7 @@ export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>>
   children: ReactElement<AccordionPanelProps> | ReactElement<AccordionPanelProps>[];
   flush?: boolean;
   collapseAll?: boolean;
+  theme?: DeepPartial<FlowbiteAccordionRootTheme>;
 }
 
 const AccordionComponent: FC<AccordionProps> = ({
@@ -45,6 +38,7 @@ const AccordionComponent: FC<AccordionProps> = ({
   flush = false,
   collapseAll = false,
   className,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
   const [isOpen, setOpen] = useState(collapseAll ? -1 : 0);
@@ -55,7 +49,8 @@ const AccordionComponent: FC<AccordionProps> = ({
       ),
     [alwaysOpen, arrowIcon, children, flush, isOpen],
   );
-  const theme = useTheme().theme.accordion;
+
+  const theme = mergeDeep(useTheme().theme.accordion.root, customTheme);
 
   return (
     <div
diff --git a/src/lib/components/Accordion/AccordionContent.tsx b/src/lib/components/Accordion/AccordionContent.tsx
index 6f91ecd63..4b80c7e91 100644
--- a/src/lib/components/Accordion/AccordionContent.tsx
+++ b/src/lib/components/Accordion/AccordionContent.tsx
@@ -1,11 +1,27 @@
 import classNames from 'classnames';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { useAccordionContext } from './AccordionPanelContext';
 
-export const AccordionContent: FC<ComponentProps<'div'>> = ({ children, className, ...props }): JSX.Element => {
+export interface FlowbiteAccordionComponentTheme {
+  base: string;
+}
+
+export interface AccordionContentProps extends PropsWithChildren<ComponentProps<'div'>> {
+  theme?: DeepPartial<FlowbiteAccordionComponentTheme>;
+}
+
+export const AccordionContent: FC<AccordionContentProps> = ({
+  children,
+  className,
+  theme: customTheme = {},
+  ...props
+}): JSX.Element => {
   const { isOpen } = useAccordionContext();
-  const theme = useTheme().theme.accordion.content;
+
+  const theme = mergeDeep(useTheme().theme.accordion.content, customTheme);
 
   return (
     <div
diff --git a/src/lib/components/Accordion/AccordionTitle.tsx b/src/lib/components/Accordion/AccordionTitle.tsx
index 2c0a31371..d89c223d6 100644
--- a/src/lib/components/Accordion/AccordionTitle.tsx
+++ b/src/lib/components/Accordion/AccordionTitle.tsx
@@ -1,25 +1,43 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
-import type { FlowbiteHeadingLevel } from '../Flowbite/FlowbiteTheme';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import type { FlowbiteBoolean, FlowbiteHeadingLevel } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { useAccordionContext } from './AccordionPanelContext';
 
+export interface FlowbiteAccordionTitleTheme {
+  arrow: {
+    base: string;
+    open: {
+      off: string;
+      on: string;
+    };
+  };
+  base: string;
+  flush: FlowbiteBoolean;
+  heading: string;
+  open: FlowbiteBoolean;
+}
+
 export interface AccordionTitleProps extends ComponentProps<'button'> {
   arrowIcon?: FC<ComponentProps<'svg'>>;
   as?: FlowbiteHeadingLevel;
+  theme?: DeepPartial<FlowbiteAccordionTitleTheme>;
 }
 
 export const AccordionTitle: FC<AccordionTitleProps> = ({
   as: Heading = 'h2',
   children,
   className,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
   const { arrowIcon: ArrowIcon, flush, isOpen, setOpen } = useAccordionContext();
-  const theme = useTheme().theme.accordion.title;
-
   const onClick = () => typeof setOpen !== 'undefined' && setOpen();
 
+  const theme = mergeDeep(useTheme().theme.accordion.title, customTheme);
+
   return (
     <button
       className={classNames(
diff --git a/src/lib/components/Alert/Alert.tsx b/src/lib/components/Alert/Alert.tsx
index 6c5336bad..6a04862c8 100644
--- a/src/lib/components/Alert/Alert.tsx
+++ b/src/lib/components/Alert/Alert.tsx
@@ -1,23 +1,31 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 import { HiX } from 'react-icons/hi';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteAlertTheme {
+  root: FlowbiteAlertRootTheme;
+  closeButton: FlowbiteAlertCloseButtonTheme;
+}
+
+export interface FlowbiteAlertRootTheme {
   base: string;
   borderAccent: string;
   wrapper: string;
-  closeButton: {
-    base: string;
-    icon: string;
-    color: AlertColors;
-  };
   color: AlertColors;
   icon: string;
   rounded: string;
 }
 
+export interface FlowbiteAlertCloseButtonTheme {
+  base: string;
+  icon: string;
+  color: AlertColors;
+}
+
 export interface AlertColors extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'success' | 'warning'> {
   [key: string]: string;
 }
@@ -29,6 +37,7 @@ export interface AlertProps extends PropsWithChildren<Omit<ComponentProps<'div'>
   onDismiss?: boolean | (() => void);
   rounded?: boolean;
   withBorderAccent?: boolean;
+  theme?: DeepPartial<FlowbiteAlertTheme>;
 }
 
 export const Alert: FC<AlertProps> = ({
@@ -40,22 +49,23 @@ export const Alert: FC<AlertProps> = ({
   rounded = true,
   withBorderAccent,
   className,
+  theme: customTheme = {},
 }) => {
-  const theme = useTheme().theme.alert;
+  const theme = mergeDeep(useTheme().theme.alert, customTheme);
 
   return (
     <div
       className={classNames(
-        theme.base,
-        theme.color[color],
-        rounded && theme.rounded,
-        withBorderAccent && theme.borderAccent,
+        theme.root.base,
+        theme.root.color[color],
+        rounded && theme.root.rounded,
+        withBorderAccent && theme.root.borderAccent,
         className,
       )}
       role="alert"
     >
-      <div className={theme.wrapper}>
-        {Icon && <Icon className={theme.icon} />}
+      <div className={theme.root.wrapper}>
+        {Icon && <Icon className={theme.root.icon} />}
         <div>{children}</div>
         {typeof onDismiss === 'function' && (
           <button
diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
index 95851c313..f9c3372ed 100644
--- a/src/lib/components/Avatar/Avatar.spec.tsx
+++ b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -9,8 +9,10 @@ describe('Components / Avatar', () => {
     it('should use custom sizes', () => {
       const theme: CustomFlowbiteTheme = {
         avatar: {
-          size: {
-            xxl: 'h-64 w-64',
+          root: {
+            size: {
+              xxl: 'h-64 w-64',
+            },
           },
         },
       };
@@ -26,8 +28,10 @@ describe('Components / Avatar', () => {
     it('should use custom colors', () => {
       const theme: CustomFlowbiteTheme = {
         avatar: {
-          color: {
-            rose: 'ring-rose-500 dark:ring-rose-400',
+          root: {
+            color: {
+              rose: 'ring-rose-500 dark:ring-rose-400',
+            },
           },
         },
       };
@@ -77,8 +81,20 @@ describe('Components / Avatar', () => {
       expect(img()).toHaveAttribute('referrerpolicy', 'no-referrer');
     });
   });
+  describe('Status', () => {
+    it('should have online status indicator', () => {
+      render(
+        <Flowbite>
+          <Avatar status="online" />
+        </Flowbite>,
+      );
+
+      expect(status()).toHaveClass('bg-green-400');
+    });
+  });
 });
 
+const status = () => screen.getByTestId('flowbite-avatar-status');
 const img = () => screen.getByTestId('flowbite-avatar-img');
 const initialsPlaceholder = () => screen.getByTestId('flowbite-avatar-initials-placeholder');
 const initialsPlaceholderText = () => screen.getByTestId('flowbite-avatar-initials-placeholder-text');
diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx
index 404b47754..ced6f92c0 100644
--- a/src/lib/components/Avatar/Avatar.tsx
+++ b/src/lib/components/Avatar/Avatar.tsx
@@ -1,34 +1,46 @@
 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 { useTheme } from '../Flowbite/ThemeContext';
 import AvatarGroup from './AvatarGroup';
 import AvatarGroupCounter from './AvatarGroupCounter';
 
 export interface FlowbiteAvatarTheme {
+  root: FlowbiteAvatarRootTheme;
+  img: FlowbiteAvatarImageTheme;
+  status: FlowbiteAvatarStatusTheme;
+  initials: FlowbiteAvatarInitialsTheme;
+}
+
+export interface FlowbiteAvatarRootTheme {
   base: string;
   bordered: string;
-  img: {
-    off: string;
-    on: string;
-    placeholder: string;
-  };
   color: AvatarColors;
   rounded: string;
   size: AvatarSizes;
   stacked: string;
-  status: {
-    away: string;
-    base: string;
-    busy: string;
-    offline: string;
-    online: string;
-  };
   statusPosition: FlowbitePositions;
-  initials: {
-    base: string;
-    text: string;
-  };
+}
+
+export interface FlowbiteAvatarImageTheme {
+  off: string;
+  on: string;
+  placeholder: string;
+}
+
+export interface FlowbiteAvatarStatusTheme {
+  away: string;
+  base: string;
+  busy: string;
+  offline: string;
+  online: string;
+}
+
+export interface FlowbiteAvatarInitialsTheme {
+  base: string;
+  text: string;
 }
 
 export interface AvatarColors
@@ -57,6 +69,7 @@ export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'
   status?: 'away' | 'busy' | 'offline' | 'online';
   statusPosition?: keyof FlowbitePositions;
   placeholderInitials?: string;
+  theme?: DeepPartial<FlowbiteAvatarTheme>;
 }
 
 const AvatarComponent: FC<AvatarProps> = ({
@@ -72,21 +85,23 @@ const AvatarComponent: FC<AvatarProps> = ({
   statusPosition = 'top-left',
   placeholderInitials = '',
   className,
+  theme: customTheme = {},
   ...props
 }) => {
-  const theme = useTheme().theme.avatar;
+  const theme = mergeDeep(useTheme().theme.avatar, customTheme);
+
   const imgClassName = classNames(
-    bordered && theme.bordered,
-    bordered && theme.color[color],
-    rounded && theme.rounded,
-    stacked && theme.stacked,
+    bordered && theme.root.bordered,
+    bordered && theme.root.color[color],
+    rounded && theme.root.rounded,
+    stacked && theme.root.stacked,
     theme.img.on,
-    theme.size[size],
+    theme.root.size[size],
   );
 
   const imgProps = { alt, className: classNames(imgClassName, theme.img.on), 'data-testid': 'flowbite-avatar-img' };
   return (
-    <div className={classNames(theme.base, className)} data-testid="flowbite-avatar" {...props}>
+    <div className={classNames(theme.root.base, className)} data-testid="flowbite-avatar" {...props}>
       <div className="relative">
         {img ? (
           typeof img === 'string' ? (
@@ -99,10 +114,10 @@ const AvatarComponent: FC<AvatarProps> = ({
             className={classNames(
               theme.img.off,
               theme.initials.base,
-              rounded && theme.rounded,
-              stacked && theme.stacked,
-              bordered && theme.bordered,
-              bordered && theme.color[color],
+              rounded && theme.root.rounded,
+              stacked && theme.root.stacked,
+              bordered && theme.root.bordered,
+              bordered && theme.root.color[color],
             )}
             data-testid="flowbite-avatar-initials-placeholder"
           >
@@ -123,7 +138,10 @@ const AvatarComponent: FC<AvatarProps> = ({
           </div>
         )}
         {status && (
-          <span className={classNames(theme.status.base, theme.status[status], theme.statusPosition[statusPosition])} />
+          <span
+            data-testid="flowbite-avatar-status"
+            className={classNames(theme.status.base, theme.status[status], theme.root.statusPosition[statusPosition])}
+          />
         )}
       </div>
       {children && <div>{children}</div>}
diff --git a/src/lib/components/Avatar/AvatarGroup.spec.tsx b/src/lib/components/Avatar/AvatarGroup.spec.tsx
new file mode 100644
index 000000000..28095c88b
--- /dev/null
+++ b/src/lib/components/Avatar/AvatarGroup.spec.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import AvatarGroup from './AvatarGroup';
+
+describe('AvatarGroup', () => {
+  it('renders the avatar group element with the correct classname', () => {
+    render(
+      <AvatarGroup className="test-class">
+        <div>Test child</div>
+      </AvatarGroup>,
+    );
+    const avatarGroupElement = screen.getByTestId('avatar-group-element');
+    expect(avatarGroupElement).toBeInTheDocument();
+    expect(avatarGroupElement).toHaveClass('test-class');
+  });
+
+  it('merges the custom theme with the default theme', () => {
+    render(
+      <AvatarGroup theme={{ base: 'custom-base-class' }}>
+        <div>Test child</div>
+      </AvatarGroup>,
+    );
+    const avatarGroupElement = screen.getByTestId('avatar-group-element');
+    expect(avatarGroupElement).toHaveClass('custom-base-class');
+  });
+});
diff --git a/src/lib/components/Avatar/AvatarGroup.tsx b/src/lib/components/Avatar/AvatarGroup.tsx
index c4d03deb4..00b09f93c 100644
--- a/src/lib/components/Avatar/AvatarGroup.tsx
+++ b/src/lib/components/Avatar/AvatarGroup.tsx
@@ -1,18 +1,27 @@
 import classNames from 'classnames';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite';
 
 export interface FlowbiteAvatarGroupTheme {
+  root: FlowbiteAvatarGroupRootTheme;
+}
+
+export interface FlowbiteAvatarGroupRootTheme {
   base: string;
 }
 
-export type AvatarGroupProps = PropsWithChildren<ComponentProps<'div'>>;
+export interface AvatarGroupProps extends PropsWithChildren<ComponentProps<'div'>> {
+  theme?: DeepPartial<FlowbiteAvatarGroupRootTheme>;
+}
+
+const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+  const theme = mergeDeep(useTheme().theme.avatarGroup.root, customTheme);
 
-const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className }) => {
-  const theme = useTheme().theme.avatarGroup;
   return (
-    <div data-testid="avatar-group-element" className={classNames(theme.base, className)}>
+    <div data-testid="avatar-group-element" className={classNames(theme.base, className)} {...props}>
       {children}
     </div>
   );
diff --git a/src/lib/components/Avatar/AvatarGroupCounter.spec.tsx b/src/lib/components/Avatar/AvatarGroupCounter.spec.tsx
new file mode 100644
index 000000000..a729b5de2
--- /dev/null
+++ b/src/lib/components/Avatar/AvatarGroupCounter.spec.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import AvatarGroupCounter from './AvatarGroupCounter';
+
+describe('AvatarGroupCounter', () => {
+  it('renders the counter element with the correct classname', () => {
+    render(<AvatarGroupCounter total={3} href="test" className="test-class" />);
+    const counterElement = screen.getByText('+3');
+    expect(counterElement).toBeInTheDocument();
+    expect(counterElement).toHaveClass('test-class');
+    expect(counterElement).toHaveAttribute('href', 'test');
+  });
+
+  it('merges the custom theme with the default theme', () => {
+    render(<AvatarGroupCounter total={5} theme={{ base: 'custom-base-class' }} />);
+    const counterElement = screen.getByText('+5');
+    expect(counterElement).toHaveClass('custom-base-class');
+  });
+});
diff --git a/src/lib/components/Avatar/AvatarGroupCounter.tsx b/src/lib/components/Avatar/AvatarGroupCounter.tsx
index 5f88c1d57..cec00933f 100644
--- a/src/lib/components/Avatar/AvatarGroupCounter.tsx
+++ b/src/lib/components/Avatar/AvatarGroupCounter.tsx
@@ -1,18 +1,26 @@
 import classNames from 'classnames';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite';
 
 export interface FlowbiteAvatarGroupCounterTheme {
+  root: FlowbiteAvatarGroupCounterRootTheme;
+}
+
+export interface FlowbiteAvatarGroupCounterRootTheme {
   base: string;
 }
 
-export interface AvatarGroupdCounterProps extends PropsWithChildren<ComponentProps<'a'>> {
+export interface AvatarGroupCounterProps extends PropsWithChildren<ComponentProps<'a'>> {
   total?: number;
+  theme?: DeepPartial<FlowbiteAvatarGroupCounterRootTheme>;
 }
 
-const AvatarGroupCounter: React.FC<AvatarGroupdCounterProps> = ({ total, href, className }) => {
-  const theme = useTheme().theme.avatarGroupCounter;
+const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({ total, href, className, theme: customTheme = {} }) => {
+  const theme = mergeDeep(useTheme().theme.avatarGroupCounter.root, customTheme);
+
   return (
     <a className={classNames(theme.base, className)} href={href}>
       +{total}
diff --git a/src/lib/components/Avatar/index.ts b/src/lib/components/Avatar/index.ts
index e33c75811..2f3438387 100644
--- a/src/lib/components/Avatar/index.ts
+++ b/src/lib/components/Avatar/index.ts
@@ -1,3 +1,3 @@
 export * from './Avatar';
 export type { AvatarGroupProps, FlowbiteAvatarGroupTheme } from './AvatarGroup';
-export type { AvatarGroupdCounterProps, FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter';
+export type { AvatarGroupCounterProps, FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter';
diff --git a/src/lib/components/Badge/Badge.spec.tsx b/src/lib/components/Badge/Badge.spec.tsx
index ee196419e..732de80d7 100644
--- a/src/lib/components/Badge/Badge.spec.tsx
+++ b/src/lib/components/Badge/Badge.spec.tsx
@@ -22,9 +22,11 @@ describe('Components / Badge', () => {
     it('should use custom colors', () => {
       const theme = {
         badge: {
-          color: {
-            primary:
-              'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
+          root: {
+            color: {
+              primary:
+                'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
+            },
           },
         },
       };
@@ -44,6 +46,11 @@ describe('Components / Badge', () => {
     it('should use custom sizes', () => {
       const theme = {
         badge: {
+          root: {
+            size: {
+              xxl: 'text-2xl',
+            },
+          },
           icon: {
             off: 'rounded-lg p-1',
             on: 'rounded-full p-5',
@@ -51,9 +58,6 @@ describe('Components / Badge', () => {
               xxl: 'w-6 h-6',
             },
           },
-          size: {
-            xxl: 'text-2xl',
-          },
         },
       };
       render(
diff --git a/src/lib/components/Badge/Badge.tsx b/src/lib/components/Badge/Badge.tsx
index e1f2a54ef..aecfc68d6 100644
--- a/src/lib/components/Badge/Badge.tsx
+++ b/src/lib/components/Badge/Badge.tsx
@@ -1,17 +1,25 @@
 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 { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteBadgeTheme {
+  root: FlowbiteBadgeRootTheme;
+  icon: FlowbiteBadgeIconTheme;
+}
+
+export interface FlowbiteBadgeRootTheme {
   base: string;
   color: BadgeColors;
   href: string;
-  icon: {
-    off: string;
-    on: string;
-    size: BadgeSizes;
-  };
+  size: BadgeSizes;
+}
+
+export interface FlowbiteBadgeIconTheme {
+  off: string;
+  on: string;
   size: BadgeSizes;
 }
 
@@ -29,6 +37,7 @@ export interface BadgeProps extends PropsWithChildren<Omit<ComponentProps<'span'
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
   size?: keyof BadgeSizes;
+  theme?: DeepPartial<FlowbiteBadgeTheme>;
 }
 
 export const Badge: FC<BadgeProps> = ({
@@ -38,17 +47,18 @@ export const Badge: FC<BadgeProps> = ({
   icon: Icon,
   size = 'xs',
   className,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
-  const theme = useTheme().theme.badge;
+  const theme = mergeDeep(useTheme().theme.badge, customTheme);
 
   const Content = (): JSX.Element => (
     <span
       className={classNames(
-        theme.base,
-        theme.color[color],
+        theme.root.base,
+        theme.root.color[color],
         theme.icon[Icon ? 'on' : 'off'],
-        theme.size[size],
+        theme.root.size[size],
         className,
       )}
       data-testid="flowbite-badge"
@@ -60,7 +70,7 @@ export const Badge: FC<BadgeProps> = ({
   );
 
   return href ? (
-    <a className={theme.href} href={href}>
+    <a className={theme.root.href} href={href}>
       <Content />
     </a>
   ) : (
diff --git a/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx b/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx
index 41044142c..8e424e689 100644
--- a/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx
+++ b/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx
@@ -45,7 +45,9 @@ describe('Components / Breadcrumb', () => {
     it('should use custom list classes', () => {
       const theme = {
         breadcrumb: {
-          list: 'gap-6',
+          root: {
+            list: 'gap-6',
+          },
         },
       };
       render(
diff --git a/src/lib/components/Breadcrumb/Breadcrumb.tsx b/src/lib/components/Breadcrumb/Breadcrumb.tsx
index 796f20172..21393b83d 100644
--- a/src/lib/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb/Breadcrumb.tsx
@@ -1,25 +1,34 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
-import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbItem, { FlowbiteBreadcrumbItemTheme } from './BreadcrumbItem';
 
 export interface FlowbiteBreadcrumbTheme {
-  item: {
-    base: string;
-    chevron: string;
-    href: {
-      off: string;
-      on: string;
-    };
-    icon: string;
-  };
+  root: FlowbiteBreadcrumbRootTheme;
+  item: FlowbiteBreadcrumbItemTheme;
+}
+
+export interface FlowbiteBreadcrumbRootTheme {
+  base: string;
   list: string;
 }
 
-const BreadcrumbComponent: FC<ComponentProps<'nav'>> = ({ children, ...props }) => {
-  const theme = useTheme().theme.breadcrumb;
+export interface BreadcrumbComponentProps extends ComponentProps<'nav'> {
+  theme?: DeepPartial<FlowbiteBreadcrumbRootTheme>;
+}
+
+const BreadcrumbComponent: FC<BreadcrumbComponentProps> = ({
+  children,
+  className,
+  theme: customTheme = {},
+  ...props
+}) => {
+  const theme = mergeDeep(useTheme().theme.breadcrumb.root, customTheme);
 
   return (
-    <nav aria-label="Breadcrumb" {...props}>
+    <nav aria-label="Breadcrumb" className={classNames(theme.base, className)} {...props}>
       <ol className={theme.list}>{children}</ol>
     </nav>
   );
diff --git a/src/lib/components/Breadcrumb/BreadcrumbItem.tsx b/src/lib/components/Breadcrumb/BreadcrumbItem.tsx
index e8d983991..5ac7a116e 100644
--- a/src/lib/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/src/lib/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,20 +1,33 @@
 import classNames from 'classnames';
 import { ComponentProps, FC, forwardRef, PropsWithChildren } from 'react';
 import { HiOutlineChevronRight } from 'react-icons/hi';
+import { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteBreadcrumbItemTheme {
+  base: string;
+  chevron: string;
+  href: {
+    off: string;
+    on: string;
+  };
+  icon: string;
+}
+
 export interface BreadcrumbItemProps extends PropsWithChildren<Omit<ComponentProps<'li'>, 'ref'>> {
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
+  theme?: DeepPartial<FlowbiteBreadcrumbItemTheme>;
 }
 
 const BreadcrumbItem = forwardRef<HTMLAnchorElement | HTMLSpanElement, BreadcrumbItemProps>(
-  ({ children, className, href, icon: Icon, ...props }, ref): JSX.Element => {
+  ({ children, className, href, icon: Icon, theme: customTheme = {}, ...props }, ref): JSX.Element => {
     const isLink = typeof href !== 'undefined';
-    const theme = useTheme().theme.breadcrumb.item;
-
     const Component = isLink ? 'a' : 'span';
 
+    const theme = mergeDeep(useTheme().theme.breadcrumb.item, customTheme);
+
     return (
       <li className={classNames(theme.base, className)} {...props}>
         <HiOutlineChevronRight aria-hidden className={theme.chevron} data-testid="flowbite-breadcrumb-separator" />
diff --git a/src/lib/components/Card/Card.spec.tsx b/src/lib/components/Card/Card.spec.tsx
index 8d7e9934b..1676c0673 100644
--- a/src/lib/components/Card/Card.spec.tsx
+++ b/src/lib/components/Card/Card.spec.tsx
@@ -43,7 +43,9 @@ describe('Components / Card', () => {
     it('should use `base` classes', () => {
       const theme = {
         card: {
-          base: 'text-blue-100',
+          root: {
+            base: 'text-blue-100',
+          },
         },
       };
       render(
@@ -58,7 +60,9 @@ describe('Components / Card', () => {
     it('should use `children` classes', () => {
       const theme = {
         card: {
-          children: 'text-blue-900',
+          root: {
+            children: 'text-blue-900',
+          },
         },
       };
       render(
@@ -76,9 +80,11 @@ describe('Components / Card', () => {
     it('should use `horizontal` classes', () => {
       const theme = {
         card: {
-          horizontal: {
-            off: 'text-blue-200',
-            on: 'text-blue-300',
+          root: {
+            horizontal: {
+              off: 'text-blue-200',
+              on: 'text-blue-300',
+            },
           },
         },
       };
@@ -98,7 +104,9 @@ describe('Components / Card', () => {
     it('should use `href` classes', () => {
       const theme = {
         card: {
-          href: 'text-blue-700',
+          root: {
+            href: 'text-blue-700',
+          },
         },
       };
       render(
diff --git a/src/lib/components/Card/Card.tsx b/src/lib/components/Card/Card.tsx
index ab9b3eaf1..1e4211845 100644
--- a/src/lib/components/Card/Card.tsx
+++ b/src/lib/components/Card/Card.tsx
@@ -1,8 +1,15 @@
 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 FlowbiteCardTheme {
+  root: FlowbiteCardRootTheme;
+  img: FlowbiteCardImageTheme;
+}
+
+export interface FlowbiteCardRootTheme {
   base: string;
   children: string;
   horizontal: {
@@ -10,12 +17,13 @@ export interface FlowbiteCardTheme {
     on: string;
   };
   href: string;
-  img: {
-    base: string;
-    horizontal: {
-      off: string;
-      on: string;
-    };
+}
+
+export interface FlowbiteCardImageTheme {
+  base: string;
+  horizontal: {
+    off: string;
+    on: string;
   };
 }
 
@@ -24,6 +32,7 @@ export interface CardProps extends PropsWithChildren<ComponentProps<'div'>> {
   href?: string;
   imgAlt?: string;
   imgSrc?: string;
+  theme?: DeepPartial<FlowbiteCardTheme>;
 }
 
 export const Card: FC<CardProps> = ({
@@ -33,16 +42,22 @@ export const Card: FC<CardProps> = ({
   href,
   imgAlt,
   imgSrc,
+  theme: customTheme = {},
   ...props
 }): JSX.Element => {
-  const theme = useTheme().theme.card;
-
   const Component = typeof href === 'undefined' ? 'div' : 'a';
   const theirProps = props as object;
 
+  const theme = mergeDeep(useTheme().theme.card, customTheme);
+
   return (
     <Component
-      className={classNames(theme.base, theme.horizontal[horizontal ? 'on' : 'off'], href && theme.href, className)}
+      className={classNames(
+        theme.root.base,
+        theme.root.horizontal[horizontal ? 'on' : 'off'],
+        href && theme.root.href,
+        className,
+      )}
       data-testid="flowbite-card"
       href={href}
       {...theirProps}
@@ -54,7 +69,7 @@ export const Card: FC<CardProps> = ({
           src={imgSrc}
         />
       )}
-      <div className={theme.children}>{children}</div>
+      <div className={theme.root.children}>{children}</div>
     </Component>
   );
 };
diff --git a/src/lib/components/Flowbite/Flowbite.spec.tsx b/src/lib/components/Flowbite/Flowbite.spec.tsx
index 7a49b423d..36f56d96c 100644
--- a/src/lib/components/Flowbite/Flowbite.spec.tsx
+++ b/src/lib/components/Flowbite/Flowbite.spec.tsx
@@ -94,8 +94,10 @@ const TestComponent = () => {
 
 const customTheme = {
   avatar: {
-    size: {
-      xxl: 'h-64 w-64',
+    root: {
+      size: {
+        xxl: 'h-64 w-64',
+      },
     },
   },
 };
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index bce64a3b2..67a8110d7 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -2,14 +2,16 @@ import type { FlowbiteTheme } from '../components';
 
 const theme: FlowbiteTheme = {
   accordion: {
-    base: 'divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700',
+    root: {
+      base: 'divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700',
+      flush: {
+        off: 'rounded-lg border',
+        on: 'border-b',
+      },
+    },
     content: {
       base: 'py-5 px-5 last:rounded-b-lg dark:bg-gray-900 first:rounded-t-lg',
     },
-    flush: {
-      off: 'rounded-lg border',
-      on: 'border-b',
-    },
     title: {
       arrow: {
         base: 'h-6 w-6 shrink-0',
@@ -31,9 +33,20 @@ const theme: FlowbiteTheme = {
     },
   },
   alert: {
-    base: 'flex flex-col gap-2 p-4 text-sm',
-    borderAccent: 'border-t-4',
-    wrapper: 'flex items-center',
+    root: {
+      base: 'flex flex-col gap-2 p-4 text-sm',
+      borderAccent: 'border-t-4',
+      wrapper: 'flex items-center',
+      color: {
+        info: 'text-blue-700 bg-blue-100 border-blue-500 dark:bg-blue-200 dark:text-blue-800',
+        gray: 'text-gray-700 bg-gray-100 border-gray-500 dark:bg-gray-700 dark:text-gray-300',
+        failure: 'text-red-700 bg-red-100 border-red-500 dark:bg-red-200 dark:text-red-800',
+        success: 'text-green-700 bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800',
+        warning: 'text-yellow-700 bg-yellow-100 border-yellow-500 dark:bg-yellow-200 dark:text-yellow-800',
+      },
+      icon: 'mr-3 inline h-5 w-5 flex-shrink-0',
+      rounded: 'rounded-lg',
+    },
     closeButton: {
       base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2',
       icon: 'w-5 h-5',
@@ -48,44 +61,48 @@ const theme: FlowbiteTheme = {
           'bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
       },
     },
-    color: {
-      info: 'text-blue-700 bg-blue-100 border-blue-500 dark:bg-blue-200 dark:text-blue-800',
-      gray: 'text-gray-700 bg-gray-100 border-gray-500 dark:bg-gray-700 dark:text-gray-300',
-      failure: 'text-red-700 bg-red-100 border-red-500 dark:bg-red-200 dark:text-red-800',
-      success: 'text-green-700 bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800',
-      warning: 'text-yellow-700 bg-yellow-100 border-yellow-500 dark:bg-yellow-200 dark:text-yellow-800',
-    },
-    icon: 'mr-3 inline h-5 w-5 flex-shrink-0',
-    rounded: 'rounded-lg',
   },
   avatar: {
-    base: 'flex justify-center items-center space-x-4',
-    bordered: 'p-1 ring-2',
+    root: {
+      base: 'flex justify-center items-center space-x-4',
+      bordered: 'p-1 ring-2',
+      rounded: '!rounded-full',
+      color: {
+        dark: 'ring-gray-800 dark:ring-gray-800',
+        failure: 'ring-red-500 dark:ring-red-700',
+        gray: 'ring-gray-500 dark:ring-gray-400',
+        info: 'ring-blue-400 dark:ring-blue-800',
+        light: 'ring-gray-300 dark:ring-gray-500',
+        purple: 'ring-purple-500 dark:ring-purple-600',
+        success: 'ring-green-500 dark:ring-green-500',
+        warning: 'ring-yellow-300 dark:ring-yellow-500',
+        pink: 'ring-pink-500 dark:ring-pink-500',
+      },
+      size: {
+        xs: 'w-6 h-6',
+        sm: 'w-8 h-8',
+        md: 'w-10 h-10',
+        lg: 'w-20 h-20',
+        xl: 'w-36 h-36',
+      },
+      stacked: 'ring-2 ring-gray-300 dark:ring-gray-500',
+      statusPosition: {
+        'bottom-left': '-bottom-1 -left-1',
+        'bottom-center': '-botton-1 center',
+        'bottom-right': '-bottom-1 -right-1',
+        'top-left': '-top-1 -left-1',
+        'top-center': '-top-1 center',
+        'top-right': '-top-1 -right-1',
+        'center-right': 'center -right-1',
+        center: 'center center',
+        'center-left': 'center -left-1',
+      },
+    },
     img: {
       off: 'rounded relative overflow-hidden bg-gray-100 dark:bg-gray-600',
       on: 'rounded',
       placeholder: 'absolute w-auto h-auto text-gray-400 -bottom-1',
     },
-    rounded: '!rounded-full',
-    color: {
-      dark: 'ring-gray-800 dark:ring-gray-800',
-      failure: 'ring-red-500 dark:ring-red-700',
-      gray: 'ring-gray-500 dark:ring-gray-400',
-      info: 'ring-blue-400 dark:ring-blue-800',
-      light: 'ring-gray-300 dark:ring-gray-500',
-      purple: 'ring-purple-500 dark:ring-purple-600',
-      success: 'ring-green-500 dark:ring-green-500',
-      warning: 'ring-yellow-300 dark:ring-yellow-500',
-      pink: 'ring-pink-500 dark:ring-pink-500',
-    },
-    size: {
-      xs: 'w-6 h-6',
-      sm: 'w-8 h-8',
-      md: 'w-10 h-10',
-      lg: 'w-20 h-20',
-      xl: 'w-36 h-36',
-    },
-    stacked: 'ring-2 ring-gray-300 dark:ring-gray-500',
     status: {
       away: 'bg-yellow-400',
       base: 'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800',
@@ -93,46 +110,45 @@ const theme: FlowbiteTheme = {
       offline: 'bg-gray-400',
       online: 'bg-green-400',
     },
-    statusPosition: {
-      'bottom-left': '-bottom-1 -left-1',
-      'bottom-center': '-botton-1 center',
-      'bottom-right': '-bottom-1 -right-1',
-      'top-left': '-top-1 -left-1',
-      'top-center': '-top-1 center',
-      'top-right': '-top-1 -right-1',
-      'center-right': 'center -right-1',
-      center: 'center center',
-      'center-left': 'center -left-1',
-    },
     initials: {
       text: 'font-medium text-gray-600 dark:text-gray-300',
       base: 'inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 dark:bg-gray-600',
     },
   },
   avatarGroupCounter: {
-    base: 'relative flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full ring-2 ring-gray-300 hover:bg-gray-600 dark:ring-gray-500',
+    root: {
+      base: 'relative flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full ring-2 ring-gray-300 hover:bg-gray-600 dark:ring-gray-500',
+    },
   },
   avatarGroup: {
-    base: 'flex mb-5 -space-x-4',
+    root: {
+      base: 'flex -space-x-4',
+    },
   },
   badge: {
-    base: 'flex h-fit items-center gap-1 font-semibold',
-    color: {
-      info: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
-      gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600',
-      failure:
-        'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
-      success:
-        'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
-      warning:
-        'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
-      indigo:
-        'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300',
-      purple:
-        'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
-      pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
+    root: {
+      base: 'flex h-fit items-center gap-1 font-semibold',
+      color: {
+        info: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
+        gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600',
+        failure:
+          'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+        success:
+          'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+        warning:
+          'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
+        indigo:
+          'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300',
+        purple:
+          'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
+        pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
+      },
+      href: 'group',
+      size: {
+        xs: 'p-1 text-xs',
+        sm: 'p-1.5 text-sm',
+      },
     },
-    href: 'group',
     icon: {
       off: 'rounded px-2 py-0.5',
       on: 'rounded-full p-1.5',
@@ -141,12 +157,12 @@ const theme: FlowbiteTheme = {
         sm: 'w-3.5 h-3.5',
       },
     },
-    size: {
-      xs: 'p-1 text-xs',
-      sm: 'p-1.5 text-sm',
-    },
   },
   breadcrumb: {
+    root: {
+      base: '',
+      list: 'flex items-center',
+    },
     item: {
       base: 'group flex items-center',
       chevron: 'mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2',
@@ -156,7 +172,6 @@ const theme: FlowbiteTheme = {
       },
       icon: 'mr-2 h-4 w-4',
     },
-    list: 'flex items-center',
   },
   button: {
     base: 'group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10',
@@ -254,13 +269,15 @@ const theme: FlowbiteTheme = {
     },
   },
   card: {
-    base: 'flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800',
-    children: 'flex h-full flex-col justify-center gap-4 p-6',
-    horizontal: {
-      off: 'flex-col',
-      on: 'flex-col md:max-w-xl md:flex-row',
+    root: {
+      base: 'flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800',
+      children: 'flex h-full flex-col justify-center gap-4 p-6',
+      horizontal: {
+        off: 'flex-col',
+        on: 'flex-col md:max-w-xl md:flex-row',
+      },
+      href: 'hover:bg-gray-100 dark:hover:bg-gray-700',
     },
-    href: 'hover:bg-gray-100 dark:hover:bg-gray-700',
     img: {
       base: '',
       horizontal: {