diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
index 00926bafa..c8cc02877 100644
--- a/.github/actions/setup/action.yml
+++ b/.github/actions/setup/action.yml
@@ -5,9 +5,9 @@ runs:
   using: composite
   steps:
     - name: Setup Bun
-      uses: oven-sh/setup-bun@v1
+      uses: oven-sh/setup-bun@v2
       with:
-        bun-version: 1.1.21
+        bun-version: 1.1.32
 
     - name: Setup Node
       uses: actions/setup-node@v4
diff --git a/apps/storybook/tailwind.config.cjs b/apps/storybook/tailwind.config.cjs
index a0e0fe2be..ad547b4ff 100644
--- a/apps/storybook/tailwind.config.cjs
+++ b/apps/storybook/tailwind.config.cjs
@@ -1,8 +1,11 @@
+const flowbite = require("../../packages/ui/src/tailwind");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: ["../../packages/ui/src/**/*.{ts,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [require("flowbite/plugin")],
+  plugins: [flowbite],
 };
diff --git a/apps/web/components/code-demo.tsx b/apps/web/components/code-demo.tsx
index b83d0465c..63752a7ca 100644
--- a/apps/web/components/code-demo.tsx
+++ b/apps/web/components/code-demo.tsx
@@ -144,7 +144,7 @@ export function CodeDemo({ data }: CodeDemoProps) {
         </div>
       </div>
       <CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode} iframe={data.iframe}>
-        {data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : data.component}
+        {data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : <>{data.component}</>}
       </CodePreview>
       <div className="code-syntax-wrapper">
         <div
diff --git a/apps/web/content/docs/customize/theme.mdx b/apps/web/content/docs/customize/theme.mdx
index be6ccbd8b..1bc424ea4 100644
--- a/apps/web/content/docs/customize/theme.mdx
+++ b/apps/web/content/docs/customize/theme.mdx
@@ -43,7 +43,7 @@ const customTheme: CustomFlowbiteTheme = {
 
 export default function MyPage() {
   return (
-    <Flowbite theme={{ theme: customTheme }}>
+    <Flowbite theme={customTheme}>
       <Button color="primary">Click me</Button>
     </Flowbite>
   );
diff --git a/apps/web/examples/megaMenu/megaMenu.root.tsx b/apps/web/examples/megaMenu/megaMenu.root.tsx
index b9bdbd8ec..bbadd4e23 100644
--- a/apps/web/examples/megaMenu/megaMenu.root.tsx
+++ b/apps/web/examples/megaMenu/megaMenu.root.tsx
@@ -6,7 +6,6 @@ import {
   NavbarCollapse,
   NavbarLink,
   NavbarToggle,
-  theme,
 } from "flowbite-react";
 import { type CodeData } from "~/components/code-demo";
 
@@ -112,11 +111,11 @@ function Component() {
 `;
 
 const codeRSC = `
-import { 
-  Button, 
-  MegaMenu, 
-  MegaMenuDropdown, 
-  Navbar, 
+import {
+  Button,
+  MegaMenu,
+  MegaMenuDropdown,
+  Navbar,
   NavbarBrand,
   NavbarCollapse,
   NavbarLink,
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 4f11a03dc..40c3d6809 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 58651fab0..901aa67e1 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -2,8 +2,6 @@ const { withContentlayer } = require("next-contentlayer2");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
   images: {
     remotePatterns: [
       {
diff --git a/apps/web/package.json b/apps/web/package.json
index 24405b2ac..e7b5ca80e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,23 +14,23 @@
     "typecheck": "contentlayer2 build && tsc --noEmit"
   },
   "dependencies": {
-    "contentlayer2": "0.5.0",
+    "contentlayer2": "0.5.1",
     "flowbite-react": "workspace:*",
     "react-icons": "5.2.1",
-    "tailwind-merge": "2.4.0"
+    "tailwind-merge": "2.5.4"
   },
   "devDependencies": {
-    "@docsearch/react": "3.6.1",
+    "@docsearch/react": "3.6.2",
     "@types/mdx": "2.0.13",
     "@types/prismjs": "1.26.4",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
-    "eslint-config-next": "14.2.5",
+    "eslint-config-next": "14.2.15",
     "markdown-toc": "1.2.0",
-    "next": "14.2.5",
-    "next-contentlayer2": "0.5.0",
-    "postcss": "8.4.41",
+    "next": "14.2.15",
+    "next-contentlayer2": "0.5.1",
+    "postcss": "8.4.47",
     "prismjs": "1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -38,8 +38,8 @@
     "rehype-autolink-headings": "7.1.0",
     "rehype-prism-plus": "2.0.0",
     "rehype-slug": "6.0.0",
-    "sharp": "0.33.4",
-    "tailwindcss": "3.4.7",
+    "sharp": "0.33.5",
+    "tailwindcss": "3.4.14",
     "typescript": "5.5.4"
   }
 }
diff --git a/apps/web/tailwind.config.cjs b/apps/web/tailwind.config.cjs
index ba3d6a775..a6d1f1cb7 100644
--- a/apps/web/tailwind.config.cjs
+++ b/apps/web/tailwind.config.cjs
@@ -8,7 +8,6 @@ module.exports = {
     "./components/**/*.{js,jsx,md,mdx,ts,tsx}",
     "./data/**/*.{js,jsx,ts,tsx}",
     "./examples/**/*.{js,jsx,ts,tsx}",
-    flowbite.content({ base: "../../" }),
   ],
   theme: {
     extend: {
@@ -91,5 +90,5 @@ module.exports = {
       ],
     },
   },
-  plugins: [flowbite.plugin()],
+  plugins: [flowbite],
 };
diff --git a/bun.lockb b/bun.lockb
index 097bb08e9..ba4d505c7 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 8ef9ab1a5..5010da773 100644
--- a/package.json
+++ b/package.json
@@ -31,20 +31,20 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.5.0",
-    "@changesets/cli": "2.27.7",
+    "@changesets/cli": "2.27.9",
     "@ianvs/prettier-plugin-sort-imports": "4.3.1",
-    "@types/bun": "1.1.6",
-    "@types/web": "0.0.153",
+    "@types/bun": "1.1.12",
+    "@types/web": "0.0.175",
     "clean-package": "2.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-tailwindcss": "3.17.4",
-    "npm-check-updates": "17.0.3",
+    "eslint-plugin-tailwindcss": "3.17.5",
+    "npm-check-updates": "17.1.6",
     "prettier": "3.3.3",
-    "prettier-plugin-packagejson": "2.5.1",
-    "prettier-plugin-tailwindcss": "0.6.5",
+    "prettier-plugin-packagejson": "2.5.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
     "rimraf": "6.0.1",
-    "turbo": "2.0.12"
+    "turbo": "2.2.3"
   },
-  "packageManager": "bun@1.1.21"
+  "packageManager": "bun@1.1.33"
 }
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 62387b2c7..858645780 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -46,14 +46,14 @@
   "dependencies": {
     "@clack/prompts": "0.7.0",
     "arg": "5.0.2",
-    "execa": "9.3.0",
-    "ora": "8.0.1",
-    "picocolors": "1.0.1",
+    "execa": "9.4.1",
+    "ora": "8.1.0",
+    "picocolors": "1.1.1",
     "rimraf": "6.0.1"
   },
   "devDependencies": {
-    "tsup": "8.2.4",
-    "typescript": "5.5.4"
+    "tsup": "8.3.5",
+    "typescript": "5.6.3"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
index 29f44348c..47b03f061 100644
--- a/packages/ui/.gitignore
+++ b/packages/ui/.gitignore
@@ -1,2 +1,3 @@
 coverage
 dist
+src/tailwind/class-list.ts
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 550fb0d27..e7c1e0d0f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -19,21 +19,78 @@
     "directory": "packages/ui"
   },
   "license": "MIT",
+  "sideEffects": false,
+  "type": "commonjs",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/cjs/index.cjs"
+      "import": {
+        "types": "./dist/types/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
     },
     "./components/*": {
-      "types": "./dist/types/components/*/index.d.ts",
-      "import": "./dist/esm/components/*/index.mjs",
-      "require": "./dist/cjs/components/*/index.cjs"
+      "import": {
+        "types": "./dist/types/components/*/index.d.mts",
+        "default": "./dist/esm/components/*/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/components/*/index.d.ts",
+        "default": "./dist/cjs/components/*/index.cjs"
+      }
+    },
+    "./helpers/*": {
+      "import": {
+        "types": "./dist/types/helpers/*.d.mts",
+        "default": "./dist/esm/helpers/*.mjs"
+      },
+      "require": {
+        "types": "./dist/types/helpers/*.d.ts",
+        "default": "./dist/cjs/helpers/*.cjs"
+      }
+    },
+    "./hooks/*": {
+      "import": {
+        "types": "./dist/types/hooks/*.d.mts",
+        "default": "./dist/esm/hooks/*.mjs"
+      },
+      "require": {
+        "types": "./dist/types/hooks/*.d.ts",
+        "default": "./dist/cjs/hooks/*.cjs"
+      }
+    },
+    "./tailwind/*": {
+      "import": {
+        "types": "./dist/types/tailwind/*.d.mts",
+        "default": "./dist/esm/tailwind/*.mjs"
+      },
+      "require": {
+        "types": "./dist/types/tailwind/*.d.ts",
+        "default": "./dist/cjs/tailwind/*.cjs"
+      }
     },
     "./tailwind": {
-      "types": "./dist/types/tailwind.d.ts",
-      "import": "./dist/esm/tailwind.mjs",
-      "require": "./dist/cjs/tailwind.cjs"
+      "import": {
+        "types": "./dist/types/tailwind/index.d.mts",
+        "default": "./dist/esm/tailwind/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/tailwind/index.d.ts",
+        "default": "./dist/cjs/tailwind/index.cjs"
+      }
+    },
+    "./theme": {
+      "import": {
+        "types": "./dist/types/theme/index.d.mts",
+        "default": "./dist/esm/theme/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/theme/index.d.ts",
+        "default": "./dist/cjs/theme/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -45,13 +102,15 @@
   ],
   "scripts": {
     "build": "bun --bun rollup -c",
-    "clean": "rimraf .turbo coverage dist node_modules tsconfig.tsbuildinfo",
+    "clean": "rimraf .turbo coverage dist node_modules src/tailwind/class-list.ts tsconfig.tsbuildinfo",
     "dev": "bun run build --watch",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
+    "generate-classlist": "bun scripts/generate-classlist.mts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepack": "clean-package",
+    "prepare": "bun run generate-classlist",
     "prepublishOnly": "bun run build",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -62,9 +121,9 @@
     "@floating-ui/react": "0.26.21",
     "classnames": "2.5.1",
     "debounce": "2.1.0",
-    "flowbite": "2.5.1",
+    "deepmerge-ts": "7.1.3",
     "react-icons": "5.2.1",
-    "tailwind-merge": "2.4.0"
+    "tailwind-merge": "2.5.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.8",
@@ -76,12 +135,13 @@
     "@typescript-eslint/parser": "8.0.1",
     "@vitejs/plugin-react": "4.3.1",
     "@vitest/coverage-v8": "2.0.5",
+    "acorn": "8.12.1",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vitest": "0.5.4",
-    "fast-glob": "3.3.2",
+    "estree-walker": "3.0.3",
     "jsdom": "24.1.1",
-    "rollup": "4.20.0",
+    "rollup": "4.24.0",
     "rollup-plugin-esbuild": "6.1.1",
     "rollup-plugin-use-client": "1.4.0",
     "typescript": "5.5.4",
diff --git a/packages/ui/rollup.config.mjs b/packages/ui/rollup.config.mjs
index ba9f4a059..c5d97238a 100644
--- a/packages/ui/rollup.config.mjs
+++ b/packages/ui/rollup.config.mjs
@@ -1,15 +1,14 @@
-import { $ } from "bun";
-import glob from "fast-glob";
+import { $, Glob } from "bun";
 import { rimraf } from "rimraf";
 import esbuild from "rollup-plugin-esbuild";
 import { rollupPluginUseClient } from "rollup-plugin-use-client";
 import packageJson from "./package.json";
 
-const componentEntries = await glob("src/components/**/index.ts");
-const entries = ["src/index.ts", "src/tailwind.ts", ...componentEntries];
+const componentEntries = await Array.fromAsync(new Glob("src/components/**/index.ts").scan());
+const entries = ["src/index.ts", "src/tailwind/index.ts", ...componentEntries];
 const external = [
-  "flowbite/plugin",
   "react/jsx-runtime",
+  "tailwindcss/plugin",
   new RegExp("react-icons/*"),
   ...Object.keys({
     ...packageJson.dependencies,
@@ -42,6 +41,7 @@ export default {
   external,
   plugins: [
     cleanOutputDir(),
+    generateClassList(),
     esbuild({
       sourceMap: false,
     }),
@@ -54,6 +54,9 @@ export default {
     }
     warn(warning);
   },
+  watch: {
+    exclude: "src/tailwind/class-list.ts",
+  },
 };
 
 function cleanOutputDir() {
@@ -61,6 +64,16 @@ function cleanOutputDir() {
     name: "clean-output-dir",
     async buildStart() {
       await rimraf(outputDir);
+      await $`mkdir ${outputDir}`;
+    },
+  };
+}
+
+function generateClassList() {
+  return {
+    name: "generate-classlist",
+    async buildStart() {
+      await $`bun run generate-classlist`;
     },
   };
 }
@@ -68,8 +81,20 @@ function cleanOutputDir() {
 function generateDts() {
   return {
     name: "generate-dts",
-    async closeBundle() {
+    async buildStart() {
+      // generate `.d.ts` files
       await $`tsc -p tsconfig.build.json --outDir ${outputDir}/types`;
+
+      // generate `.d.mts` files
+      for await (const path of new Glob(`${outputDir}/types/**/*.d.ts`).scan()) {
+        const file = Bun.file(path);
+        const content = await file.text();
+
+        await Bun.write(path.replace(".d.ts", ".d.mts"), content);
+        // fix incorrect default export
+        // https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FalseExportDefault.md
+        await Bun.write(path, content.replace("export default _default", "export = _default"));
+      }
     },
   };
 }
diff --git a/packages/ui/scripts/generate-classlist.mts b/packages/ui/scripts/generate-classlist.mts
new file mode 100644
index 000000000..09bb4575f
--- /dev/null
+++ b/packages/ui/scripts/generate-classlist.mts
@@ -0,0 +1,67 @@
+import { parse } from "acorn";
+import { Glob } from "bun";
+import { walk, type Node } from "estree-walker";
+import prettier from "prettier";
+
+async function main() {
+  const classListMap: Record<string, string[]> = {};
+
+  const paths = await Array.fromAsync(new Glob("src/components/**/theme.ts").scan());
+  paths.sort();
+
+  for (const path of paths) {
+    const componentName = path.split("/")[2];
+    const file = Bun.file(path);
+    const content = await file.text();
+    const classList = await extractClassList(content);
+    classListMap[componentName] = classList;
+  }
+
+  await Bun.write(
+    "src/tailwind/class-list.ts",
+    await prettier.format(`export const CLASS_LIST_MAP = ${JSON.stringify(classListMap, null, 2)}`, {
+      parser: "babel",
+    }),
+  );
+}
+
+async function extractClassList(content: string) {
+  const classList = new Set<string>();
+  const transpiler = new Bun.Transpiler({
+    loader: "ts",
+  });
+  const transpiledContent = transpiler.transformSync(content);
+  const ast = parse(transpiledContent, {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  });
+  let isInsideCreateTheme = false;
+
+  walk(ast as Node, {
+    enter(node) {
+      if (isCreateThemeNode(node)) {
+        isInsideCreateTheme = true;
+      }
+      if (isInsideCreateTheme) {
+        if (node.type === "Literal" && typeof node.value === "string") {
+          for (const className of node.value.split(/\s+/)) {
+            if (className) classList.add(className);
+          }
+        }
+      }
+    },
+    leave(node) {
+      if (isCreateThemeNode(node)) {
+        isInsideCreateTheme = false;
+      }
+    },
+  });
+
+  function isCreateThemeNode(node: Node) {
+    return node.type === "CallExpression" && "name" in node.callee && node.callee.name === "createTheme";
+  }
+
+  return [...classList].sort();
+}
+
+main();
diff --git a/packages/ui/src/components/Accordion/Accordion.spec.tsx b/packages/ui/src/components/Accordion/Accordion.spec.tsx
index 2655aa6b2..8339a2664 100644
--- a/packages/ui/src/components/Accordion/Accordion.spec.tsx
+++ b/packages/ui/src/components/Accordion/Accordion.spec.tsx
@@ -135,7 +135,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion />
           </Flowbite>,
         );
@@ -156,7 +156,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion />
             <TestAccordion flush />
           </Flowbite>,
@@ -182,7 +182,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion />
           </Flowbite>,
         );
@@ -219,7 +219,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion alwaysOpen />
             <TestAccordion alwaysOpen flush />
           </Flowbite>,
diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx
index 0f831e2fa..2c0f59223 100644
--- a/packages/ui/src/components/Accordion/Accordion.tsx
+++ b/packages/ui/src/components/Accordion/Accordion.tsx
@@ -3,17 +3,18 @@
 import type { ComponentProps, FC, ReactElement } from "react";
 import { Children, cloneElement, useMemo, useState } from "react";
 import { HiChevronDown } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteAccordionComponentTheme } from "./AccordionContent";
 import { AccordionContent } from "./AccordionContent";
 import type { AccordionPanelProps } from "./AccordionPanel";
 import { AccordionPanel } from "./AccordionPanel";
 import type { FlowbiteAccordionTitleTheme } from "./AccordionTitle";
 import { AccordionTitle } from "./AccordionTitle";
+import { accordionTheme } from "./theme";
 
 export interface FlowbiteAccordionTheme {
   root: FlowbiteAccordionRootTheme;
@@ -42,7 +43,7 @@ const AccordionComponent: FC<AccordionProps> = ({
   flush = false,
   collapseAll = false,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const [isOpen, setOpen] = useState(collapseAll ? -1 : 0);
@@ -61,7 +62,7 @@ const AccordionComponent: FC<AccordionProps> = ({
     [alwaysOpen, arrowIcon, children, flush, isOpen],
   );
 
-  const theme = mergeDeep(getTheme().accordion.root, customTheme);
+  const theme = resolveTheme([accordionTheme.root, getStore().theme?.accordion?.root, customTheme]);
 
   return (
     <div
diff --git a/packages/ui/src/components/Accordion/AccordionContent.tsx b/packages/ui/src/components/Accordion/AccordionContent.tsx
index b2d6bc0f3..108d2a167 100644
--- a/packages/ui/src/components/Accordion/AccordionContent.tsx
+++ b/packages/ui/src/components/Accordion/AccordionContent.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { useAccordionContext } from "./AccordionPanelContext";
+import { accordionTheme } from "./theme";
 
 export interface FlowbiteAccordionComponentTheme {
   base: string;
@@ -15,15 +16,10 @@ export interface AccordionContentProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteAccordionComponentTheme>;
 }
 
-export const AccordionContent: FC<AccordionContentProps> = ({
-  children,
-  className,
-  theme: customTheme = {},
-  ...props
-}) => {
+export const AccordionContent: FC<AccordionContentProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { isOpen } = useAccordionContext();
 
-  const theme = mergeDeep(getTheme().accordion.content, customTheme);
+  const theme = resolveTheme([accordionTheme.content, getStore().theme?.accordion?.content, customTheme]);
 
   return (
     <div
diff --git a/packages/ui/src/components/Accordion/AccordionTitle.tsx b/packages/ui/src/components/Accordion/AccordionTitle.tsx
index 293ee71d5..d00a3802f 100644
--- a/packages/ui/src/components/Accordion/AccordionTitle.tsx
+++ b/packages/ui/src/components/Accordion/AccordionTitle.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean, FlowbiteHeadingLevel } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteHeadingLevel } from "../Flowbite/FlowbiteTheme";
 import { useAccordionContext } from "./AccordionPanelContext";
+import { accordionTheme } from "./theme";
 
 export interface FlowbiteAccordionTitleTheme {
   arrow: {
@@ -29,13 +30,13 @@ export const AccordionTitle: FC<AccordionTitleProps> = ({
   as: Heading = "h2",
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { arrowIcon: ArrowIcon, flush, isOpen, setOpen } = useAccordionContext();
   const onClick = () => typeof setOpen !== "undefined" && setOpen();
 
-  const theme = mergeDeep(getTheme().accordion.title, customTheme);
+  const theme = resolveTheme([accordionTheme.title, getStore().theme?.accordion?.title, customTheme]);
 
   return (
     <button
diff --git a/packages/ui/src/components/Alert/Alert.spec.tsx b/packages/ui/src/components/Alert/Alert.spec.tsx
index 6d89eb170..fdb9988c2 100644
--- a/packages/ui/src/components/Alert/Alert.spec.tsx
+++ b/packages/ui/src/components/Alert/Alert.spec.tsx
@@ -26,7 +26,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
@@ -41,7 +41,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert withBorderAccent />
           </Flowbite>,
         );
@@ -56,7 +56,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
@@ -78,7 +78,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
@@ -98,7 +98,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert icon={HiHeart} />
           </Flowbite>,
         );
@@ -113,7 +113,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
index d3a82513e..5230390b9 100644
--- a/packages/ui/src/components/Alert/Alert.tsx
+++ b/packages/ui/src/components/Alert/Alert.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC, ReactNode } from "react";
 import { HiX } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors } from "../Flowbite";
+import type { FlowbiteColors } from "../Flowbite/FlowbiteTheme";
+import { alertTheme } from "./theme";
 
 export interface FlowbiteAlertTheme {
   base: string;
@@ -40,11 +41,11 @@ export const Alert: FC<AlertProps> = ({
   icon: Icon,
   onDismiss,
   rounded = true,
-  theme: customTheme = {},
+  theme: customTheme,
   withBorderAccent,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().alert, customTheme);
+  const theme = resolveTheme([alertTheme, getStore().theme?.alert, customTheme]);
 
   return (
     <div
diff --git a/packages/ui/src/components/Avatar/Avatar.spec.tsx b/packages/ui/src/components/Avatar/Avatar.spec.tsx
index a97f37cef..1936ba61c 100644
--- a/packages/ui/src/components/Avatar/Avatar.spec.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.spec.tsx
@@ -16,7 +16,7 @@ describe("Components / Avatar", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Avatar size="xxl" />
         </Flowbite>,
       );
@@ -35,7 +35,7 @@ describe("Components / Avatar", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Avatar
             bordered
             color="rose"
diff --git a/packages/ui/src/components/Avatar/Avatar.tsx b/packages/ui/src/components/Avatar/Avatar.tsx
index 3c40df431..f9e9fd508 100644
--- a/packages/ui/src/components/Avatar/Avatar.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.tsx
@@ -1,13 +1,14 @@
 import type { ComponentProps, FC, ReactElement } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteAvatarGroupTheme } from "./AvatarGroup";
 import { AvatarGroup } from "./AvatarGroup";
 import type { FlowbiteAvatarGroupCounterTheme } from "./AvatarGroupCounter";
 import { AvatarGroupCounter } from "./AvatarGroupCounter";
+import { avatarTheme } from "./theme";
 
 export interface FlowbiteAvatarTheme {
   root: FlowbiteAvatarRootTheme;
@@ -88,10 +89,10 @@ const AvatarComponent: FC<AvatarProps> = ({
   stacked = false,
   status,
   statusPosition = "top-left",
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().avatar, customTheme);
+  const theme = resolveTheme([avatarTheme, getStore().theme?.avatar, customTheme]);
 
   const imgClassName = twMerge(
     theme.root.img.base,
diff --git a/packages/ui/src/components/Avatar/AvatarGroup.tsx b/packages/ui/src/components/Avatar/AvatarGroup.tsx
index 6a937efc1..3fb6d1a66 100644
--- a/packages/ui/src/components/Avatar/AvatarGroup.tsx
+++ b/packages/ui/src/components/Avatar/AvatarGroup.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { avatarTheme } from "./theme";
 
 export interface FlowbiteAvatarGroupTheme {
   base: string;
@@ -12,8 +13,8 @@ export interface AvatarGroupProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteAvatarGroupTheme>;
 }
 
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().avatar.group, customTheme);
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([avatarTheme.group, getStore().theme?.avatar?.group, customTheme]);
 
   return (
     <div data-testid="avatar-group-element" className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Avatar/AvatarGroupCounter.tsx b/packages/ui/src/components/Avatar/AvatarGroupCounter.tsx
index 73919bda4..3867b3369 100644
--- a/packages/ui/src/components/Avatar/AvatarGroupCounter.tsx
+++ b/packages/ui/src/components/Avatar/AvatarGroupCounter.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { avatarTheme } from "./theme";
 
 export interface FlowbiteAvatarGroupCounterTheme {
   base: string;
@@ -16,11 +17,11 @@ export interface AvatarGroupCounterProps extends ComponentProps<"a"> {
 export const AvatarGroupCounter: FC<AvatarGroupCounterProps> = ({
   className,
   href,
-  theme: customTheme = {},
+  theme: customTheme,
   total,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().avatar.groupCounter, customTheme);
+  const theme = resolveTheme([avatarTheme.groupCounter, getStore().theme?.avatar?.groupCounter, customTheme]);
 
   return (
     <a href={href} className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Badge/Badge.spec.tsx b/packages/ui/src/components/Badge/Badge.spec.tsx
index 249f9a350..feefc0521 100644
--- a/packages/ui/src/components/Badge/Badge.spec.tsx
+++ b/packages/ui/src/components/Badge/Badge.spec.tsx
@@ -41,7 +41,7 @@ describe("Components / Badge", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Badge color="primary" href="/" icon={HiCheck}>
             A badge
           </Badge>
@@ -71,7 +71,7 @@ describe("Components / Badge", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Badge size="xxl">A badge</Badge>
           <Badge icon={HiCheck} size="xxl" />
         </Flowbite>,
diff --git a/packages/ui/src/components/Badge/Badge.tsx b/packages/ui/src/components/Badge/Badge.tsx
index bfc266fae..dea569d7e 100644
--- a/packages/ui/src/components/Badge/Badge.tsx
+++ b/packages/ui/src/components/Badge/Badge.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
+import { badgeTheme } from "./theme";
 
 export interface FlowbiteBadgeTheme {
   root: FlowbiteBadgeRootTheme;
@@ -40,10 +41,10 @@ export const Badge: FC<BadgeProps> = ({
   icon: Icon,
   size = "xs",
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().badge, customTheme);
+  const theme = resolveTheme([badgeTheme, getStore().theme?.badge, customTheme]);
 
   const Content: FC = () => (
     <span
diff --git a/packages/ui/src/components/Blockquote/Blockquote.spec.tsx b/packages/ui/src/components/Blockquote/Blockquote.spec.tsx
index 6a3997444..3549bd01e 100644
--- a/packages/ui/src/components/Blockquote/Blockquote.spec.tsx
+++ b/packages/ui/src/components/Blockquote/Blockquote.spec.tsx
@@ -14,7 +14,7 @@ describe("Components / Blockquote", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Blockquote />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Blockquote/Blockquote.tsx b/packages/ui/src/components/Blockquote/Blockquote.tsx
index 865b491d9..7703de189 100644
--- a/packages/ui/src/components/Blockquote/Blockquote.tsx
+++ b/packages/ui/src/components/Blockquote/Blockquote.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { blockquoteTheme } from "./theme";
 
 export interface FlowbiteBlockquoteTheme {
   root: FlowbiteBlockquoteRootTheme;
@@ -16,8 +17,8 @@ export interface BlockquoteProps extends ComponentProps<"blockquote"> {
   theme?: DeepPartial<FlowbiteBlockquoteTheme>;
 }
 
-export const Blockquote: FC<BlockquoteProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().blockquote, customTheme);
+export const Blockquote: FC<BlockquoteProps> = ({ children, className, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([blockquoteTheme, getStore().theme?.blockquote, customTheme]);
 
   return (
     <blockquote className={twMerge(theme.root.base, className)} data-testid="flowbite-blockquote" {...props}>
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.spec.tsx b/packages/ui/src/components/Breadcrumb/Breadcrumb.spec.tsx
index bffcd8109..d32f449ce 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.spec.tsx
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.spec.tsx
@@ -48,7 +48,7 @@ describe("Components / Breadcrumb", () => {
       },
     };
     render(
-      <Flowbite theme={{ theme }}>
+      <Flowbite theme={theme}>
         <TestBreadcrumb />
       </Flowbite>,
     );
@@ -71,7 +71,7 @@ describe("Components / Breadcrumb", () => {
       },
     };
     render(
-      <Flowbite theme={{ theme }}>
+      <Flowbite theme={theme}>
         <TestBreadcrumb />
       </Flowbite>,
     );
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
index 35304ee1a..453ae2391 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteBreadcrumbItemTheme } from "./BreadcrumbItem";
 import { BreadcrumbItem } from "./BreadcrumbItem";
+import { breadcrumbTheme } from "./theme";
 
 export interface FlowbiteBreadcrumbTheme {
   root: FlowbiteBreadcrumbRootTheme;
@@ -20,13 +21,8 @@ export interface BreadcrumbComponentProps extends ComponentProps<"nav"> {
   theme?: DeepPartial<FlowbiteBreadcrumbRootTheme>;
 }
 
-const BreadcrumbComponent: FC<BreadcrumbComponentProps> = ({
-  children,
-  className,
-  theme: customTheme = {},
-  ...props
-}) => {
-  const theme = mergeDeep(getTheme().breadcrumb.root, customTheme);
+const BreadcrumbComponent: FC<BreadcrumbComponentProps> = ({ children, className, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([breadcrumbTheme.root, getStore().theme?.breadcrumb?.root, customTheme]);
 
   return (
     <nav aria-label="Breadcrumb" className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
index 45c3b63b8..8c72352e3 100644
--- a/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,11 +1,12 @@
 import type { ComponentProps, FC } from "react";
 import { forwardRef } from "react";
 import { HiOutlineChevronRight } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
+import { breadcrumbTheme } from "./theme";
 
 export interface FlowbiteBreadcrumbItemTheme {
   base: string;
@@ -21,11 +22,11 @@ export interface BreadcrumbItemProps extends Omit<ComponentProps<"li">, "ref"> {
 }
 
 export const BreadcrumbItem = forwardRef<HTMLAnchorElement | HTMLSpanElement, BreadcrumbItemProps>(
-  ({ children, className, href, icon: Icon, theme: customTheme = {}, ...props }, ref) => {
+  ({ children, className, href, icon: Icon, theme: customTheme, ...props }, ref) => {
     const isLink = typeof href !== "undefined";
     const Component = isLink ? "a" : "span";
 
-    const theme = mergeDeep(getTheme().breadcrumb.item, customTheme);
+    const theme = resolveTheme([breadcrumbTheme.item, getStore().theme?.breadcrumb?.item, customTheme]);
 
     return (
       <li className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Button/Button.spec.tsx b/packages/ui/src/components/Button/Button.spec.tsx
index 8ec64ac13..8f03117a1 100644
--- a/packages/ui/src/components/Button/Button.spec.tsx
+++ b/packages/ui/src/components/Button/Button.spec.tsx
@@ -189,7 +189,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button />
         </Flowbite>,
       );
@@ -207,7 +207,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button color="primary" />
         </Flowbite>,
       );
@@ -223,7 +223,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button disabled />
         </Flowbite>,
       );
@@ -241,7 +241,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button gradientMonochrome="yellowToPink" />
         </Flowbite>,
       );
@@ -259,7 +259,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button gradientDuoTone="yellowToPink" />
         </Flowbite>,
       );
@@ -277,7 +277,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button>Hi there</Button>
         </Flowbite>,
       );
@@ -295,7 +295,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button label="Hi there" />
         </Flowbite>,
       );
@@ -320,7 +320,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button>Normal button</Button>
           <Button outline>Outline button</Button>
           <Button outline pill>
@@ -349,7 +349,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button label="Normal button" />
           <Button label="Pill" pill />
         </Flowbite>,
@@ -372,7 +372,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button size="xxl">Hello</Button>
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 189d32ba4..c7c716604 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -1,9 +1,9 @@
 import type { ElementType } from "react";
 import { forwardRef, type ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
 import type { PolymorphicComponentPropWithRef, PolymorphicRef } from "../../helpers/generic-as-prop";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type {
   FlowbiteBoolean,
@@ -11,11 +11,12 @@ import type {
   FlowbiteGradientColors,
   FlowbiteGradientDuoToneColors,
   FlowbiteSizes,
-} from "../Flowbite";
+} from "../Flowbite/FlowbiteTheme";
 import { Spinner } from "../Spinner";
 import { ButtonBase, type ButtonBaseProps } from "./ButtonBase";
 import type { PositionInButtonGroup } from "./ButtonGroup";
 import { ButtonGroup } from "./ButtonGroup";
+import { buttonGroupTheme, buttonTheme } from "./theme";
 
 export interface FlowbiteButtonTheme {
   base: string;
@@ -110,13 +111,13 @@ const ButtonComponent = forwardRef(
       pill = false,
       positionInGroup = "none",
       size = "md",
-      theme: customTheme = {},
+      theme: customTheme,
       ...props
     }: ButtonProps<T>,
     ref: PolymorphicRef<T>,
   ) => {
-    const { buttonGroup: groupTheme, button: buttonTheme } = getTheme();
-    const theme = mergeDeep(buttonTheme, customTheme);
+    const theme = resolveTheme([buttonTheme, getStore().theme?.button, customTheme]);
+    const groupTheme = resolveTheme([buttonGroupTheme, getStore().theme?.buttonGroup]);
 
     const theirProps = props as ButtonBaseProps<T>;
 
diff --git a/packages/ui/src/components/Button/ButtonGroup.spec.tsx b/packages/ui/src/components/Button/ButtonGroup.spec.tsx
index 5b951a6c4..03d402013 100644
--- a/packages/ui/src/components/Button/ButtonGroup.spec.tsx
+++ b/packages/ui/src/components/Button/ButtonGroup.spec.tsx
@@ -99,7 +99,7 @@ describe("Components / Button group", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button.Group>
             <Button>One</Button>
             <Button>Two</Button>
@@ -119,7 +119,7 @@ describe("Components / Button group", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Button.Group>
             <Button>One</Button>
             <Button>Two</Button>
diff --git a/packages/ui/src/components/Button/ButtonGroup.tsx b/packages/ui/src/components/Button/ButtonGroup.tsx
index dca346d94..7172a68fd 100644
--- a/packages/ui/src/components/Button/ButtonGroup.tsx
+++ b/packages/ui/src/components/Button/ButtonGroup.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC, ReactElement, ReactNode } from "react";
 import { Children, cloneElement, isValidElement, useMemo } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import { Button, type ButtonProps } from "../Button";
+import { Button, type ButtonProps } from "../Button/Button";
+import { buttonGroupTheme } from "./theme";
 
 export interface FlowbiteButtonGroupTheme {
   base: string;
@@ -60,12 +61,12 @@ export const ButtonGroup: FC<ButtonGroupProps> = ({
   className,
   outline,
   pill,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }: ButtonGroupProps) => {
   const items = useMemo(() => processChildren(children, outline, pill), [children, outline, pill]);
 
-  const theme = mergeDeep(getTheme().buttonGroup, customTheme);
+  const theme = resolveTheme([buttonGroupTheme, getStore().theme?.buttonGroup, customTheme]);
 
   return (
     <div className={twMerge(theme.base, className)} role="group" {...props}>
diff --git a/packages/ui/src/components/Card/Card.spec.tsx b/packages/ui/src/components/Card/Card.spec.tsx
index 7195bd739..b98b1ef0a 100644
--- a/packages/ui/src/components/Card/Card.spec.tsx
+++ b/packages/ui/src/components/Card/Card.spec.tsx
@@ -85,7 +85,7 @@ describe("Components / Card", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Card />
         </Flowbite>,
       );
@@ -102,7 +102,7 @@ describe("Components / Card", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Card>
             <span aria-label="The content">Some content</span>
           </Card>
@@ -125,7 +125,7 @@ describe("Components / Card", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Card />
           <Card horizontal />
         </Flowbite>,
@@ -146,7 +146,7 @@ describe("Components / Card", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Card href="#">My card</Card>
         </Flowbite>,
       );
@@ -167,7 +167,7 @@ describe("Components / Card", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Card imgAlt="Card with image" imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg" />
           <Card
             horizontal
diff --git a/packages/ui/src/components/Card/Card.tsx b/packages/ui/src/components/Card/Card.tsx
index 3b42ae886..bdb795bf4 100644
--- a/packages/ui/src/components/Card/Card.tsx
+++ b/packages/ui/src/components/Card/Card.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
 import { omit } from "../../helpers/omit";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
+import { cardTheme } from "./theme";
 
 export interface FlowbiteCardTheme {
   root: FlowbiteCardRootTheme;
@@ -45,11 +46,11 @@ export type CardProps = (
   CommonCardProps;
 
 export const Card: FC<CardProps> = (props) => {
-  const { children, className, horizontal, href, theme: customTheme = {} } = props;
+  const { children, className, horizontal, href, theme: customTheme } = props;
   const Component = typeof href === "undefined" ? "div" : "a";
   const theirProps = removeCustomProps(props);
 
-  const theme = mergeDeep(getTheme().card, customTheme);
+  const theme = resolveTheme([cardTheme, getStore().theme?.card, customTheme]);
 
   return (
     <Component
@@ -69,11 +70,13 @@ export const Card: FC<CardProps> = (props) => {
   );
 };
 
-const Image: FC<CardProps> = ({ theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().card, customTheme);
+const Image: FC<CardProps> = ({ theme: customTheme, ...props }) => {
+  const theme = resolveTheme([cardTheme, getStore().theme?.card, customTheme]);
+
   if (props.renderImage) {
     return props.renderImage(theme, props.horizontal ?? false);
   }
+
   if (props.imgSrc) {
     return (
       <img
@@ -84,6 +87,7 @@ const Image: FC<CardProps> = ({ theme: customTheme = {}, ...props }) => {
       />
     );
   }
+
   return null;
 };
 
diff --git a/packages/ui/src/components/Carousel/Carousel.tsx b/packages/ui/src/components/Carousel/Carousel.tsx
index e07823a20..5222f8c2a 100644
--- a/packages/ui/src/components/Carousel/Carousel.tsx
+++ b/packages/ui/src/components/Carousel/Carousel.tsx
@@ -3,13 +3,14 @@
 import type { ComponentProps, FC, ReactElement, ReactNode } from "react";
 import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
 import ScrollContainer from "../../helpers/drag-scroll";
 import { isClient } from "../../helpers/is-client";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
+import { carouselTheme } from "./theme";
 
 export interface FlowbiteCarouselTheme {
   root: FlowbiteCarouselRootTheme;
@@ -71,12 +72,12 @@ export const Carousel: FC<CarouselProps> = ({
   draggable = true,
   slideInterval,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   onSlideChange = null,
   pauseOnHover = false,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().carousel, customTheme);
+  const theme = resolveTheme([carouselTheme, getStore().theme?.carousel, customTheme]);
 
   const isDeviceMobile = isClient() && navigator.userAgent.indexOf("IEMobile") !== -1;
   const carouselContainer = useRef<HTMLDivElement>(null);
@@ -209,8 +210,9 @@ export const Carousel: FC<CarouselProps> = ({
   );
 };
 
-const DefaultLeftControl: FC<DefaultLeftRightControlProps> = ({ theme: customTheme = {} }) => {
-  const theme = mergeDeep(getTheme().carousel, customTheme);
+const DefaultLeftControl: FC<DefaultLeftRightControlProps> = ({ theme: customTheme }) => {
+  const theme = resolveTheme([carouselTheme, getStore().theme?.carousel, customTheme]);
+
   return (
     <span className={theme.control.base}>
       <HiOutlineChevronLeft className={theme.control.icon} />
@@ -218,8 +220,9 @@ const DefaultLeftControl: FC<DefaultLeftRightControlProps> = ({ theme: customThe
   );
 };
 
-const DefaultRightControl: FC<DefaultLeftRightControlProps> = ({ theme: customTheme = {} }) => {
-  const theme = mergeDeep(getTheme().carousel, customTheme);
+const DefaultRightControl: FC<DefaultLeftRightControlProps> = ({ theme: customTheme }) => {
+  const theme = resolveTheme([carouselTheme, getStore().theme?.carousel, customTheme]);
+
   return (
     <span className={theme.control.base}>
       <HiOutlineChevronRight className={theme.control.icon} />
diff --git a/packages/ui/src/components/Carousel/theme.ts b/packages/ui/src/components/Carousel/theme.ts
index ac07a447d..d019788e6 100644
--- a/packages/ui/src/components/Carousel/theme.ts
+++ b/packages/ui/src/components/Carousel/theme.ts
@@ -23,8 +23,8 @@ export const carouselTheme: FlowbiteCarouselTheme = createTheme({
     },
   },
   control: {
-    base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10",
-    icon: "h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6",
+    base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70",
+    icon: "h-5 w-5 text-white sm:h-6 sm:w-6 dark:text-gray-800",
   },
   scrollContainer: {
     base: "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg",
diff --git a/packages/ui/src/components/Checkbox/Checkbox.spec.tsx b/packages/ui/src/components/Checkbox/Checkbox.spec.tsx
index fbff8a17b..a073aaef8 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.spec.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.spec.tsx
@@ -23,7 +23,7 @@ describe("Components / Checkbox", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Checkbox />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx
index e4895d651..bba6c9a87 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors } from "../Flowbite";
+import type { FlowbiteColors } from "../Flowbite/FlowbiteTheme";
+import { checkboxTheme } from "./theme";
 
 export interface FlowbiteCheckboxTheme {
   root: FlowbiteCheckboxRootTheme;
@@ -20,8 +21,8 @@ export interface CheckboxProps extends Omit<ComponentProps<"input">, "type" | "r
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, color = "default", theme: customTheme = {}, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().checkbox, customTheme);
+  ({ className, color = "default", theme: customTheme, ...props }, ref) => {
+    const theme = resolveTheme([checkboxTheme, getStore().theme?.checkbox, customTheme]);
 
     return (
       <input
diff --git a/packages/ui/src/components/Clipboard/Clipboard.tsx b/packages/ui/src/components/Clipboard/Clipboard.tsx
index a32914e83..0b3958658 100644
--- a/packages/ui/src/components/Clipboard/Clipboard.tsx
+++ b/packages/ui/src/components/Clipboard/Clipboard.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import { forwardRef, useState, type ComponentProps, type ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { Tooltip } from "../Tooltip";
-import { ClipboardWithIcon } from "./ClipboardWithIcon";
 import type { FlowbiteClipboardWithIconTheme } from "./ClipboardWithIcon";
-import { ClipboardWithIconText } from "./ClipboardWithIconText";
+import { ClipboardWithIcon } from "./ClipboardWithIcon";
 import type { FlowbiteClipboardWithIconTextTheme } from "./ClipboardWithIconText";
+import { ClipboardWithIconText } from "./ClipboardWithIconText";
 import { copyToClipboard } from "./helpers";
+import { clipboardTheme } from "./theme";
 
 export interface FlowbiteClipboardTheme {
   button: {
@@ -28,10 +29,10 @@ export interface ClipboardProps extends ComponentProps<"button"> {
 }
 
 const ClipboardComponent = forwardRef<HTMLButtonElement, ClipboardProps>(
-  ({ className, valueToCopy, label, theme: customTheme = {}, ...rest }, ref) => {
+  ({ className, valueToCopy, label, theme: customTheme, ...rest }, ref) => {
     const [isJustCopied, setIsJustCopied] = useState(false);
 
-    const theme = mergeDeep(getTheme().clipboard.button, customTheme);
+    const theme = resolveTheme([clipboardTheme.button, getStore().theme?.clipboard?.button, customTheme]);
 
     return (
       <Tooltip content={isJustCopied ? "Copied" : "Copy to clipboard"} className="[&_*]:cursor-pointer">
diff --git a/packages/ui/src/components/Clipboard/ClipboardWithIcon.tsx b/packages/ui/src/components/Clipboard/ClipboardWithIcon.tsx
index 574c8fa66..f2c43d2f3 100644
--- a/packages/ui/src/components/Clipboard/ClipboardWithIcon.tsx
+++ b/packages/ui/src/components/Clipboard/ClipboardWithIcon.tsx
@@ -2,11 +2,12 @@
 
 import { forwardRef, useState, type ComponentProps, type FC } from "react";
 import { FaCheck, FaClipboardList } from "react-icons/fa6";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { copyToClipboard } from "./helpers";
+import { clipboardTheme } from "./theme";
 
 export interface FlowbiteClipboardWithIconTheme {
   base: string;
@@ -23,10 +24,10 @@ export interface ClipboardWithIconProps extends ComponentProps<"button"> {
 }
 
 export const ClipboardWithIcon = forwardRef<HTMLButtonElement, ClipboardWithIconProps>(
-  ({ valueToCopy, icon: Icon = FaClipboardList, theme: customTheme = {}, className, ...rest }, ref) => {
+  ({ valueToCopy, icon: Icon = FaClipboardList, theme: customTheme, className, ...rest }, ref) => {
     const [isJustCopied, setIsJustCopied] = useState(false);
 
-    const theme = mergeDeep(getTheme().clipboard.withIcon, customTheme);
+    const theme = resolveTheme([clipboardTheme.withIcon, getStore().theme?.clipboard?.withIcon, customTheme]);
 
     return (
       <button
diff --git a/packages/ui/src/components/Clipboard/ClipboardWithIconText.tsx b/packages/ui/src/components/Clipboard/ClipboardWithIconText.tsx
index 224ef6a89..ddb5f352e 100644
--- a/packages/ui/src/components/Clipboard/ClipboardWithIconText.tsx
+++ b/packages/ui/src/components/Clipboard/ClipboardWithIconText.tsx
@@ -2,11 +2,12 @@
 
 import { forwardRef, useState, type ComponentProps, type FC } from "react";
 import { FaCheck, FaClipboardList } from "react-icons/fa6";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { copyToClipboard } from "./helpers";
+import { clipboardTheme } from "./theme";
 
 export interface FlowbiteClipboardWithIconTextTheme {
   base: string;
@@ -29,10 +30,10 @@ export interface ClipboardWithIconTextProps extends ComponentProps<"button"> {
 }
 
 export const ClipboardWithIconText = forwardRef<HTMLButtonElement, ClipboardWithIconTextProps>(
-  ({ valueToCopy, icon: Icon = FaClipboardList, label = "Copy", theme: customTheme = {}, className, ...rest }, ref) => {
+  ({ valueToCopy, icon: Icon = FaClipboardList, label = "Copy", theme: customTheme, className, ...rest }, ref) => {
     const [isJustCopied, setIsJustCopied] = useState(false);
 
-    const theme = mergeDeep(getTheme().clipboard.withIconText, customTheme);
+    const theme = resolveTheme([clipboardTheme.withIconText, getStore().theme?.clipboard?.withIconText, customTheme]);
 
     return (
       <button
diff --git a/packages/ui/src/components/Clipboard/theme.tsx b/packages/ui/src/components/Clipboard/theme.ts
similarity index 100%
rename from packages/ui/src/components/Clipboard/theme.tsx
rename to packages/ui/src/components/Clipboard/theme.ts
diff --git a/packages/ui/src/components/DarkThemeToggle/DarkThemeToggle.tsx b/packages/ui/src/components/DarkThemeToggle/DarkThemeToggle.tsx
index 38f46c1d4..7fafba9ad 100644
--- a/packages/ui/src/components/DarkThemeToggle/DarkThemeToggle.tsx
+++ b/packages/ui/src/components/DarkThemeToggle/DarkThemeToggle.tsx
@@ -3,12 +3,12 @@
 import type { ComponentProps, FC } from "react";
 import type { IconBaseProps } from "react-icons";
 import { HiMoon, HiSun } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { useIsMounted } from "../../hooks/use-is-mounted";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeMode } from "../../hooks/use-theme-mode";
-import { getTheme } from "../../theme-store";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { darkThemeToggleTheme } from "./theme";
 
 export interface FlowbiteDarkThemeToggleTheme {
   root: FlowbiteDarkThemeToggleRootTheme;
@@ -16,7 +16,11 @@ export interface FlowbiteDarkThemeToggleTheme {
 
 export interface FlowbiteDarkThemeToggleRootTheme {
   base: string;
-  icon: string;
+  icon: {
+    base: string;
+    light: string;
+    dark: string;
+  };
 }
 
 export interface DarkThemeToggleProps extends ComponentProps<"button"> {
@@ -27,15 +31,14 @@ export interface DarkThemeToggleProps extends ComponentProps<"button"> {
 
 export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   iconDark: IconDark = HiSun,
   iconLight: IconLight = HiMoon,
   ...props
 }) => {
-  const isMounted = useIsMounted();
-  const { computedMode, toggleMode } = useThemeMode();
+  const { toggleMode } = useThemeMode();
 
-  const theme = mergeDeep(getTheme().darkThemeToggle, customTheme);
+  const theme = resolveTheme([darkThemeToggleTheme, getStore().theme?.darkThemeToggle, customTheme]);
 
   return (
     <button
@@ -46,16 +49,8 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
       onClick={toggleMode}
       {...props}
     >
-      <IconDark
-        aria-label="Currently dark mode"
-        data-active={isMounted && computedMode === "dark"}
-        className={twMerge(theme.root.icon, "hidden dark:block")}
-      />
-      <IconLight
-        aria-label="Currently light mode"
-        data-active={isMounted && computedMode === "light"}
-        className={twMerge(theme.root.icon, "dark:hidden")}
-      />
+      <IconDark aria-label="Currently dark mode" className={twMerge(theme.root.icon.base, theme.root.icon.dark)} />
+      <IconLight aria-label="Currently light mode" className={twMerge(theme.root.icon.base, theme.root.icon.light)} />
     </button>
   );
 };
diff --git a/packages/ui/src/components/DarkThemeToggle/theme.ts b/packages/ui/src/components/DarkThemeToggle/theme.ts
index 85c908f15..96d709942 100644
--- a/packages/ui/src/components/DarkThemeToggle/theme.ts
+++ b/packages/ui/src/components/DarkThemeToggle/theme.ts
@@ -4,6 +4,10 @@ import type { FlowbiteDarkThemeToggleTheme } from "./DarkThemeToggle";
 export const darkThemeToggleTheme: FlowbiteDarkThemeToggleTheme = createTheme({
   root: {
     base: "rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700",
-    icon: "h-5 w-5",
+    icon: {
+      base: "h-5 w-5",
+      dark: "hidden dark:block",
+      light: "dark:hidden",
+    },
   },
 });
diff --git a/packages/ui/src/components/Datepicker/Datepicker.tsx b/packages/ui/src/components/Datepicker/Datepicker.tsx
index 95d308fad..b4d191345 100644
--- a/packages/ui/src/components/Datepicker/Datepicker.tsx
+++ b/packages/ui/src/components/Datepicker/Datepicker.tsx
@@ -3,9 +3,9 @@
 import type { ForwardRefRenderFunction, ReactNode } from "react";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { HiArrowLeft, HiArrowRight, HiCalendar } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { TextInput, type FlowbiteTextInputTheme, type TextInputProps } from "../TextInput";
 import { DatepickerContext } from "./DatepickerContext";
@@ -19,6 +19,7 @@ import {
   Views,
   WeekStart,
 } from "./helpers";
+import { datePickerTheme } from "./theme";
 import type { FlowbiteDatepickerViewsDaysTheme } from "./Views/Days";
 import { DatepickerViewsDays } from "./Views/Days";
 import { DatepickerViewsDecades, type FlowbiteDatepickerViewsDecadesTheme } from "./Views/Decades";
@@ -117,7 +118,7 @@ const DatepickerRender: ForwardRefRenderFunction<DatepickerRef, DatepickerProps>
     language = "en",
     weekStart = WeekStart.Sunday,
     className,
-    theme: customTheme = {},
+    theme: customTheme,
     onChange,
     label,
     value,
@@ -125,7 +126,7 @@ const DatepickerRender: ForwardRefRenderFunction<DatepickerRef, DatepickerProps>
   },
   ref,
 ) => {
-  const theme = mergeDeep(getTheme().datepicker, customTheme);
+  const theme = resolveTheme([datePickerTheme, getStore().theme?.datepicker, customTheme]);
   const initialDate = defaultValue ? getFirstDateInRange(defaultValue, minDate, maxDate) : null;
 
   const effectiveDefaultView = useMemo(() => {
diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index 2d771a5c7..2fe3fb745 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../../helpers/merge-deep";
+import { resolveTheme } from "../../../helpers/resolve-theme";
+import { twMerge } from "../../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../../types";
 import { useDatePickerContext } from "../DatepickerContext";
 import { addDays, getFirstDayOfTheMonth, getFormattedDate, getWeekDays, isDateEqual, isDateInRange } from "../helpers";
@@ -24,7 +24,7 @@ export interface DatepickerViewsDaysProps {
   theme?: DeepPartial<FlowbiteDatepickerViewsDaysTheme>;
 }
 
-export const DatepickerViewsDays: FC<DatepickerViewsDaysProps> = ({ theme: customTheme = {} }) => {
+export const DatepickerViewsDays: FC<DatepickerViewsDaysProps> = ({ theme: customTheme }) => {
   const {
     theme: rootTheme,
     weekStart,
@@ -36,7 +36,7 @@ export const DatepickerViewsDays: FC<DatepickerViewsDaysProps> = ({ theme: custo
     language,
   } = useDatePickerContext();
 
-  const theme = mergeDeep(rootTheme.views.days, customTheme);
+  const theme = resolveTheme([rootTheme.views.days, customTheme], { shouldPrefix: false });
 
   const weekDays = getWeekDays(language, weekStart);
   const startDate = getFirstDayOfTheMonth(viewDate, weekStart);
diff --git a/packages/ui/src/components/Datepicker/Views/Decades.tsx b/packages/ui/src/components/Datepicker/Views/Decades.tsx
index 4455aae3d..607dde491 100644
--- a/packages/ui/src/components/Datepicker/Views/Decades.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Decades.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../../helpers/merge-deep";
+import { resolveTheme } from "../../../helpers/resolve-theme";
+import { twMerge } from "../../../helpers/tailwind-merge";
 import { useDatePickerContext } from "../DatepickerContext";
 import { addYears, isDateInDecade, isDateInRange, startOfYearPeriod, Views } from "../helpers";
 
@@ -19,10 +19,10 @@ export interface DatepickerViewsDecadesProps {
   theme?: FlowbiteDatepickerViewsDecadesTheme;
 }
 
-export const DatepickerViewsDecades: FC<DatepickerViewsDecadesProps> = ({ theme: customTheme = {} }) => {
+export const DatepickerViewsDecades: FC<DatepickerViewsDecadesProps> = ({ theme: customTheme }) => {
   const { theme: rootTheme, viewDate, selectedDate, minDate, maxDate, setViewDate, setView } = useDatePickerContext();
 
-  const theme = mergeDeep(rootTheme.views.decades, customTheme);
+  const theme = resolveTheme([rootTheme.views.decades, customTheme], { shouldPrefix: false });
   const first = startOfYearPeriod(viewDate, 100);
   return (
     <div className={theme.items.base}>
diff --git a/packages/ui/src/components/Datepicker/Views/Months.tsx b/packages/ui/src/components/Datepicker/Views/Months.tsx
index 2faf45e37..26030ad9e 100644
--- a/packages/ui/src/components/Datepicker/Views/Months.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Months.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../../helpers/merge-deep";
+import { resolveTheme } from "../../../helpers/resolve-theme";
+import { twMerge } from "../../../helpers/tailwind-merge";
 import { useDatePickerContext } from "../DatepickerContext";
 import { getFormattedDate, isDateEqual, isDateInRange, Views } from "../helpers";
 
@@ -19,7 +19,7 @@ export interface DatepickerViewsMonthsProps {
   theme?: FlowbiteDatepickerViewsMonthsTheme;
 }
 
-export const DatepickerViewsMonth: FC<DatepickerViewsMonthsProps> = ({ theme: customTheme = {} }) => {
+export const DatepickerViewsMonth: FC<DatepickerViewsMonthsProps> = ({ theme: customTheme }) => {
   const {
     theme: rootTheme,
     minDate,
@@ -31,7 +31,7 @@ export const DatepickerViewsMonth: FC<DatepickerViewsMonthsProps> = ({ theme: cu
     setView,
   } = useDatePickerContext();
 
-  const theme = mergeDeep(rootTheme.views.months, customTheme);
+  const theme = resolveTheme([rootTheme.views.months, customTheme], { shouldPrefix: false });
 
   return (
     <div className={theme.items.base}>
diff --git a/packages/ui/src/components/Datepicker/Views/Years.tsx b/packages/ui/src/components/Datepicker/Views/Years.tsx
index 57704c54e..dafb42287 100644
--- a/packages/ui/src/components/Datepicker/Views/Years.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Years.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../../helpers/merge-deep";
+import { resolveTheme } from "../../../helpers/resolve-theme";
+import { twMerge } from "../../../helpers/tailwind-merge";
 import { useDatePickerContext } from "../DatepickerContext";
 import { isDateEqual, isDateInRange, startOfYearPeriod, Views } from "../helpers";
 
@@ -21,10 +21,10 @@ export interface DatepickerViewsYearsProps {
   theme?: FlowbiteDatepickerViewsYearsTheme;
 }
 
-export const DatepickerViewsYears: FC<DatepickerViewsYearsProps> = ({ theme: customTheme = {} }) => {
+export const DatepickerViewsYears: FC<DatepickerViewsYearsProps> = ({ theme: customTheme }) => {
   const { theme: rootTheme, selectedDate, minDate, maxDate, viewDate, setViewDate, setView } = useDatePickerContext();
 
-  const theme = mergeDeep(rootTheme.views.years, customTheme);
+  const theme = resolveTheme([rootTheme.views.years, customTheme], { shouldPrefix: false });
 
   return (
     <div className={theme.items.base}>
diff --git a/packages/ui/src/components/Drawer/Drawer.tsx b/packages/ui/src/components/Drawer/Drawer.tsx
index 87866095f..e6f7d60ab 100644
--- a/packages/ui/src/components/Drawer/Drawer.tsx
+++ b/packages/ui/src/components/Drawer/Drawer.tsx
@@ -2,14 +2,15 @@
 
 import type { ComponentProps, FC } from "react";
 import { useEffect, useId } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { DrawerContext } from "./DrawerContext";
 import { DrawerHeader, type FlowbiteDrawerHeaderTheme } from "./DrawerHeader";
 import { DrawerItems, type FlowbiteDrawerItemsTheme } from "./DrawerItems";
+import { drawerTheme } from "./theme";
 
 export interface FlowbiteDrawerTheme {
   root: FlowbiteDrawerRootTheme;
@@ -46,12 +47,11 @@ const DrawerComponent: FC<DrawerProps> = ({
   position = "left",
   onClose,
   open: isOpen = false,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const id = useId();
-
-  const theme = mergeDeep(getTheme().drawer, customTheme);
+  const theme = resolveTheme([drawerTheme, getStore().theme?.drawer, customTheme]);
 
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
diff --git a/packages/ui/src/components/Drawer/DrawerHeader.tsx b/packages/ui/src/components/Drawer/DrawerHeader.tsx
index d0bc56f72..06aee4407 100644
--- a/packages/ui/src/components/Drawer/DrawerHeader.tsx
+++ b/packages/ui/src/components/Drawer/DrawerHeader.tsx
@@ -3,9 +3,9 @@
 import type { ComponentProps, FC } from "react";
 import { useId } from "react";
 import { MdClose, MdHome } from "react-icons/md";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { useDrawerContext } from "./DrawerContext";
 
 export interface FlowbiteDrawerHeaderTheme {
@@ -29,7 +29,7 @@ export const DrawerHeader: FC<DrawerHeaderProps> = ({
   children,
   className,
   closeIcon: CloseIcon = MdClose,
-  theme: customTheme = {},
+  theme: customTheme,
   title,
   titleIcon: TitleIcon = MdHome,
   ...props
@@ -38,7 +38,7 @@ export const DrawerHeader: FC<DrawerHeaderProps> = ({
 
   const { id: mainDivId, isOpen, onClose, theme: rootTheme } = useDrawerContext();
 
-  const theme = mergeDeep(rootTheme.header, customTheme);
+  const theme = resolveTheme([rootTheme.header, customTheme], { shouldPrefix: false });
 
   return (
     <div className={className} {...props}>
diff --git a/packages/ui/src/components/Drawer/DrawerItems.tsx b/packages/ui/src/components/Drawer/DrawerItems.tsx
index 1522bca0a..df813eaaf 100644
--- a/packages/ui/src/components/Drawer/DrawerItems.tsx
+++ b/packages/ui/src/components/Drawer/DrawerItems.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useDrawerContext } from "./DrawerContext";
 
@@ -14,10 +14,10 @@ export interface DrawerItemsProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteDrawerItemsTheme>;
 }
 
-export const DrawerItems: FC<DrawerItemsProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const DrawerItems: FC<DrawerItemsProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme } = useDrawerContext();
 
-  const theme = mergeDeep(rootTheme.items, customTheme);
+  const theme = resolveTheme([rootTheme.items, customTheme], { shouldPrefix: false });
 
   return (
     <div data-testid="flowbite-drawer-items" className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Dropdown/Dropdown.tsx b/packages/ui/src/components/Dropdown/Dropdown.tsx
index d46b50587..29263fb89 100644
--- a/packages/ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/ui/src/components/Dropdown/Dropdown.tsx
@@ -14,10 +14,10 @@ import type {
 } from "react";
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import { useBaseFLoating, useFloatingInteractions } from "../../hooks/use-floating";
-import { getTheme } from "../../theme-store";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { Button, type ButtonProps } from "../Button";
 import type { FloatingProps, FlowbiteFloatingTheme } from "../Floating";
@@ -25,6 +25,7 @@ import { DropdownContext } from "./DropdownContext";
 import { DropdownDivider, type FlowbiteDropdownDividerTheme } from "./DropdownDivider";
 import { DropdownHeader, type FlowbiteDropdownHeaderTheme } from "./DropdownHeader";
 import { DropdownItem, type FlowbiteDropdownItemTheme } from "./DropdownItem";
+import { dropdownTheme } from "./theme";
 
 export interface FlowbiteDropdownFloatingTheme
   extends FlowbiteFloatingTheme,
@@ -108,7 +109,7 @@ const DropdownComponent: FC<DropdownProps> = ({
   children,
   className,
   dismissOnClick = true,
-  theme: customTheme = {},
+  theme: customTheme,
   enableTypeAhead = true,
   renderTrigger,
   ...props
@@ -120,7 +121,7 @@ const DropdownComponent: FC<DropdownProps> = ({
   const elementsRef = useRef<Array<HTMLElement | null>>([]);
   const labelsRef = useRef<Array<string | null>>([]);
 
-  const theme = mergeDeep(getTheme().dropdown, customTheme);
+  const theme = resolveTheme([dropdownTheme, getStore().theme?.dropdown, customTheme]);
   const theirProps = props as Omit<DropdownProps, "theme">;
   const dataTestId = props["data-testid"] || "flowbite-dropdown-target";
   const {
diff --git a/packages/ui/src/components/Dropdown/DropdownDivider.tsx b/packages/ui/src/components/Dropdown/DropdownDivider.tsx
index 230a9c6ef..b4b377492 100644
--- a/packages/ui/src/components/Dropdown/DropdownDivider.tsx
+++ b/packages/ui/src/components/Dropdown/DropdownDivider.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useDropdownContext } from "./DropdownContext";
 
@@ -13,10 +13,10 @@ export type DropdownDividerProps = {
   theme?: DeepPartial<FlowbiteDropdownDividerTheme>;
 } & ComponentProps<"div">;
 
-export const DropdownDivider: FC<DropdownDividerProps> = ({ className, theme: customTheme = {}, ...props }) => {
+export const DropdownDivider: FC<DropdownDividerProps> = ({ className, theme: customTheme, ...props }) => {
   const { theme: rootTheme } = useDropdownContext();
 
-  const theme = customTheme.divider ?? rootTheme.floating.divider;
+  const theme = customTheme?.divider ?? rootTheme.floating.divider;
 
   return <div className={twMerge(theme, className)} {...props} />;
 };
diff --git a/packages/ui/src/components/Dropdown/DropdownHeader.tsx b/packages/ui/src/components/Dropdown/DropdownHeader.tsx
index 9bf860574..c9c372248 100644
--- a/packages/ui/src/components/Dropdown/DropdownHeader.tsx
+++ b/packages/ui/src/components/Dropdown/DropdownHeader.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useDropdownContext } from "./DropdownContext";
 import { DropdownDivider } from "./DropdownDivider";
@@ -14,10 +14,10 @@ export interface DropdownHeaderProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteDropdownHeaderTheme>;
 }
 
-export const DropdownHeader: FC<DropdownHeaderProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const DropdownHeader: FC<DropdownHeaderProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme } = useDropdownContext();
 
-  const theme = customTheme.header ?? rootTheme.floating.header;
+  const theme = customTheme?.header ?? rootTheme.floating.header;
 
   return (
     <>
diff --git a/packages/ui/src/components/Dropdown/DropdownItem.tsx b/packages/ui/src/components/Dropdown/DropdownItem.tsx
index e4806ad9c..75e860640 100644
--- a/packages/ui/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/ui/src/components/Dropdown/DropdownItem.tsx
@@ -2,9 +2,9 @@
 
 import { useListItem, useMergeRefs } from "@floating-ui/react";
 import { forwardRef, type ComponentProps, type ElementType, type FC, type RefCallback } from "react";
-import { twMerge } from "tailwind-merge";
 import type { PolymorphicComponentPropWithRef, PolymorphicRef } from "../../helpers/generic-as-prop";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { ButtonBase, type ButtonBaseProps } from "../Button/ButtonBase";
 import { useDropdownContext } from "./DropdownContext";
@@ -31,14 +31,14 @@ type DropdownItemType = (<C extends ElementType = "button">(props: DropdownItemP
 
 export const DropdownItem = forwardRef(
   <T extends ElementType = "button">(
-    { children, className, icon: Icon, onClick, theme: customTheme = {}, ...props }: DropdownItemProps<T>,
+    { 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 theme = resolveTheme([rootTheme.floating.item, customTheme], { shouldPrefix: false });
 
     const theirProps = props as ButtonBaseProps<T>;
 
diff --git a/packages/ui/src/components/FileInput/FileInput.tsx b/packages/ui/src/components/FileInput/FileInput.tsx
index 5b1c640be..8b49ea967 100644
--- a/packages/ui/src/components/FileInput/FileInput.tsx
+++ b/packages/ui/src/components/FileInput/FileInput.tsx
@@ -1,11 +1,12 @@
 import type { ComponentProps, ReactNode } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import { HelperText } from "../HelperText";
 import type { FlowbiteTextInputColors, FlowbiteTextInputSizes } from "../TextInput";
+import { fileInputTheme } from "./theme";
 
 export interface FlowbiteFileInputTheme {
   root: FlowbiteFileInputRootTheme;
@@ -35,8 +36,8 @@ export interface FileInputProps extends Omit<ComponentProps<"input">, "type" | "
 }
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  ({ className, color = "gray", helperText, sizing = "md", theme: customTheme = {}, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().fileInput, customTheme);
+  ({ className, color = "gray", helperText, sizing = "md", theme: customTheme, ...props }, ref) => {
+    const theme = resolveTheme([fileInputTheme, getStore().theme?.fileInput, customTheme]);
 
     return (
       <>
diff --git a/packages/ui/src/components/Floating/Floating.tsx b/packages/ui/src/components/Floating/Floating.tsx
index 5f8facfe3..26c5a207d 100644
--- a/packages/ui/src/components/Floating/Floating.tsx
+++ b/packages/ui/src/components/Floating/Floating.tsx
@@ -4,7 +4,7 @@ import type { Placement } from "@floating-ui/core";
 import { autoUpdate, useFocus } from "@floating-ui/react";
 import type { ComponentProps, FC, ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../helpers/tailwind-merge";
 import { useBaseFLoating, useFloatingInteractions } from "../../hooks/use-floating";
 import { getArrowPlacement } from "./helpers";
 
diff --git a/packages/ui/src/components/FloatingLabel/FloatingLabel.tsx b/packages/ui/src/components/FloatingLabel/FloatingLabel.tsx
index f4b05328b..e55d5b306 100644
--- a/packages/ui/src/components/FloatingLabel/FloatingLabel.tsx
+++ b/packages/ui/src/components/FloatingLabel/FloatingLabel.tsx
@@ -1,10 +1,10 @@
 import type { ComponentPropsWithoutRef } from "react";
 import { forwardRef, useId } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteFloatingLabelTheme } from "./theme";
+import { floatingLabelTheme, type FlowbiteFloatingLabelTheme } from "./theme";
 
 export type FloatingLabelColor = "default" | "success" | "error";
 export type FloatingLabelSizing = "sm" | "md";
@@ -29,14 +29,14 @@ export const FloatingLabel = forwardRef<HTMLInputElement, FloatingLabelProps>(
       sizing = "md",
       variant,
       disabled = false,
-      theme: customTheme = {},
+      theme: customTheme,
       className,
       ...props
     },
     ref,
   ) => {
     const randomId = useId();
-    const theme = mergeDeep(getTheme().floatingLabel, customTheme);
+    const theme = resolveTheme([floatingLabelTheme, getStore().theme?.floatingLabel, customTheme]);
 
     return (
       <div>
diff --git a/packages/ui/src/components/Flowbite/Flowbite.spec.tsx b/packages/ui/src/components/Flowbite/Flowbite.spec.tsx
deleted file mode 100644
index 1de6b0ff1..000000000
--- a/packages/ui/src/components/Flowbite/Flowbite.spec.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { act, render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { useThemeMode } from "../../hooks/use-theme-mode";
-import { getTheme } from "../../theme-store";
-import { Flowbite } from "../Flowbite";
-
-describe("Components / Flowbite", () => {
-  describe("Flowbite", () => {
-    it("should return default values", () => {
-      render(
-        <Flowbite>
-          <TestComponent />
-        </Flowbite>,
-      );
-
-      const { mode, toggleMode } = themeMode;
-
-      expect(mode).toBe("light");
-      expect(toggleMode).not.toBeUndefined();
-    });
-
-    it("should return custom theme", () => {
-      render(
-        <Flowbite theme={{ theme: customTheme }}>
-          <TestComponent />
-        </Flowbite>,
-      );
-
-      const theme = getTheme();
-      const mergedTheme = mergeDeep(theme, customTheme);
-
-      expect(theme).toEqual(mergedTheme);
-    });
-
-    it("should toggle mode", () => {
-      render(
-        <Flowbite>
-          <TestComponent />
-        </Flowbite>,
-      );
-
-      const { mode, toggleMode } = themeMode;
-
-      expect(mode).toBe("light");
-      expect(documentEl()).not.toHaveClass("dark");
-
-      act(() => {
-        if (toggleMode) toggleMode();
-      });
-
-      const { mode: mode2 } = themeMode;
-
-      expect(mode2).toBe("dark");
-      expect(documentEl()).toHaveClass("dark");
-    });
-
-    it("should return darkmode", () => {
-      render(
-        <Flowbite theme={{ mode: "dark" }}>
-          <TestComponent />
-        </Flowbite>,
-      );
-
-      const { mode } = themeMode;
-
-      expect(mode).toBe("dark");
-      expect(documentEl()).toHaveClass("dark");
-    });
-  });
-});
-
-let themeMode: ReturnType<typeof useThemeMode>;
-
-const TestComponent = () => {
-  themeMode = useThemeMode();
-  return null;
-};
-
-const customTheme = {
-  avatar: {
-    root: {
-      size: {
-        xxl: "h-64 w-64",
-      },
-    },
-  },
-};
-
-const documentEl = () => document.documentElement;
diff --git a/packages/ui/src/components/Flowbite/Flowbite.tsx b/packages/ui/src/components/Flowbite/Flowbite.tsx
deleted file mode 100644
index ba906f18a..000000000
--- a/packages/ui/src/components/Flowbite/Flowbite.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { FC } from "react";
-import type { ThemeMode } from "../../hooks/use-theme-mode";
-import { ThemeInit } from "../../theme-store/init";
-import type { CustomFlowbiteTheme } from "./FlowbiteTheme";
-
-export interface ThemeProps {
-  mode?: ThemeMode;
-  theme?: CustomFlowbiteTheme;
-}
-
-interface FlowbiteProps {
-  children: React.ReactNode;
-  theme?: ThemeProps;
-}
-
-export const Flowbite: FC<FlowbiteProps> = ({ children, theme }) => {
-  return (
-    <>
-      <ThemeInit mode={theme?.mode} theme={theme?.theme} />
-      {children}
-    </>
-  );
-};
-
-Flowbite.displayName = "Flowbite";
diff --git a/packages/ui/src/components/Flowbite/index.ts b/packages/ui/src/components/Flowbite/index.ts
deleted file mode 100644
index 3b0f76218..000000000
--- a/packages/ui/src/components/Flowbite/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export { Flowbite } from "./Flowbite";
-export type { ThemeProps } from "./Flowbite";
-export type {
-  CustomFlowbiteTheme,
-  FlowbiteBoolean,
-  FlowbiteColors,
-  FlowbiteContentPositions,
-  FlowbiteGradientColors,
-  FlowbiteGradientDuoToneColors,
-  FlowbiteHeadingLevel,
-  FlowbitePositions,
-  FlowbiteSizes,
-  FlowbiteStateColors,
-  FlowbiteTheme,
-} from "./FlowbiteTheme";
diff --git a/packages/ui/src/components/Footer/Footer.spec.tsx b/packages/ui/src/components/Footer/Footer.spec.tsx
index 1af3fa617..7bdae1089 100644
--- a/packages/ui/src/components/Footer/Footer.spec.tsx
+++ b/packages/ui/src/components/Footer/Footer.spec.tsx
@@ -69,7 +69,7 @@ describe("Components / Footer", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestFooter />
         </Flowbite>,
       );
@@ -86,7 +86,7 @@ describe("Components / Footer", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestFooter />
         </Flowbite>,
       );
@@ -103,7 +103,7 @@ describe("Components / Footer", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestFooter />
         </Flowbite>,
       );
@@ -123,7 +123,7 @@ describe("Components / Footer", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer>
               <Footer.Brand alt="Flowbite" href="https://flowbite.com" src="">
                 Flowbite
@@ -137,7 +137,7 @@ describe("Components / Footer", () => {
 
         cleanup();
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer>
               <Footer.Brand href="/" src="">
                 Flowbite
@@ -162,7 +162,7 @@ describe("Components / Footer", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer>
               <Footer.Copyright by="Flowbite" year={2022}>
                 Test
@@ -176,7 +176,7 @@ describe("Components / Footer", () => {
 
         cleanup();
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer>
               <Footer.Copyright by="Flowbite" href="/" year={2022}>
                 Test
@@ -200,7 +200,7 @@ describe("Components / Footer", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer>
               <Footer.Icon ariaLabel="Icon" href="/" icon={BsFacebook} />
             </Footer>
@@ -211,7 +211,7 @@ describe("Components / Footer", () => {
 
         cleanup();
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer>
               <Footer.Icon ariaLabel="Icon" icon={BsFacebook} />
             </Footer>
@@ -232,7 +232,7 @@ describe("Components / Footer", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Footer.Title title="Flowbite" />
           </Flowbite>,
         );
diff --git a/packages/ui/src/components/Footer/Footer.tsx b/packages/ui/src/components/Footer/Footer.tsx
index 044e8bac7..1dfa8e0ba 100644
--- a/packages/ui/src/components/Footer/Footer.tsx
+++ b/packages/ui/src/components/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteFooterBrandTheme } from "./FooterBrand";
 import { FooterBrand } from "./FooterBrand";
@@ -16,6 +16,7 @@ import type { FlowbiteFooterLinkGroupTheme } from "./FooterLinkGroup";
 import { FooterLinkGroup } from "./FooterLinkGroup";
 import type { FlowbiteFooterTitleTheme } from "./FooterTitle";
 import { FooterTitle } from "./FooterTitle";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterTheme {
   brand: FlowbiteFooterBrandTheme;
@@ -44,10 +45,10 @@ export const FooterComponent: FC<FooterProps> = ({
   children,
   className,
   container = false,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().footer, customTheme);
+  const theme = resolveTheme([footerTheme, getStore().theme?.footer, customTheme]);
 
   return (
     <footer
diff --git a/packages/ui/src/components/Footer/FooterBrand.tsx b/packages/ui/src/components/Footer/FooterBrand.tsx
index 99028b7cf..37a2efe00 100644
--- a/packages/ui/src/components/Footer/FooterBrand.tsx
+++ b/packages/ui/src/components/Footer/FooterBrand.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC, PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterBrandTheme {
   base: string;
@@ -26,10 +27,10 @@ export const FooterBrand: FC<FooterBrandProps & ComponentProps<"a"> & ComponentP
   href,
   name,
   src,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().footer.brand, customTheme);
+  const theme = resolveTheme([footerTheme.brand, getStore().theme?.footer?.brand, customTheme]);
 
   return (
     <div>
diff --git a/packages/ui/src/components/Footer/FooterCopyright.tsx b/packages/ui/src/components/Footer/FooterCopyright.tsx
index 53787639f..5b134fbc9 100644
--- a/packages/ui/src/components/Footer/FooterCopyright.tsx
+++ b/packages/ui/src/components/Footer/FooterCopyright.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterCopyrightTheme {
   base: string;
@@ -17,15 +18,8 @@ export interface CopyrightProps extends ComponentProps<"div"> {
   year?: number;
 }
 
-export const FooterCopyright: FC<CopyrightProps> = ({
-  by,
-  className,
-  href,
-  theme: customTheme = {},
-  year,
-  ...props
-}) => {
-  const theme = mergeDeep(getTheme().footer.copyright, customTheme);
+export const FooterCopyright: FC<CopyrightProps> = ({ by, className, href, theme: customTheme, year, ...props }) => {
+  const theme = resolveTheme([footerTheme.copyright, getStore().theme?.footer?.copyright, customTheme]);
 
   return (
     <div data-testid="flowbite-footer-copyright" className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Footer/FooterDivider.tsx b/packages/ui/src/components/Footer/FooterDivider.tsx
index 888c59030..91b65f5ce 100644
--- a/packages/ui/src/components/Footer/FooterDivider.tsx
+++ b/packages/ui/src/components/Footer/FooterDivider.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterDividerTheme {
   base: string;
@@ -12,8 +13,8 @@ export interface FooterDividerProps extends ComponentProps<"hr"> {
   theme?: DeepPartial<FlowbiteFooterDividerTheme>;
 }
 
-export const FooterDivider: FC<FooterDividerProps> = ({ className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().footer.divider, customTheme);
+export const FooterDivider: FC<FooterDividerProps> = ({ className, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([footerTheme.divider, getStore().theme?.footer?.divider, customTheme]);
 
   return <hr data-testid="footer-divider" className={twMerge(theme.base, className)} {...props} />;
 };
diff --git a/packages/ui/src/components/Footer/FooterIcon.tsx b/packages/ui/src/components/Footer/FooterIcon.tsx
index bceb62aba..d821e0bcf 100644
--- a/packages/ui/src/components/Footer/FooterIcon.tsx
+++ b/packages/ui/src/components/Footer/FooterIcon.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC, PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterIconTheme {
   base: string;
@@ -22,10 +23,10 @@ export const FooterIcon: FC<FooterIconProps & ComponentProps<"a"> & ComponentPro
   className,
   href,
   icon: Icon,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().footer.icon, customTheme);
+  const theme = resolveTheme([footerTheme.icon, getStore().theme?.footer?.icon, customTheme]);
 
   return (
     <div>
diff --git a/packages/ui/src/components/Footer/FooterLink.tsx b/packages/ui/src/components/Footer/FooterLink.tsx
index 2864fd9fd..3b98bb852 100644
--- a/packages/ui/src/components/Footer/FooterLink.tsx
+++ b/packages/ui/src/components/Footer/FooterLink.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, ElementType, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterLinkTheme {
   base: string;
@@ -20,10 +21,10 @@ export const FooterLink: FC<FooterLinkProps> = ({
   children,
   className,
   href,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().footer.groupLink.link, customTheme);
+  const theme = resolveTheme([footerTheme.groupLink.link, getStore().theme?.footer?.groupLink?.link, customTheme]);
 
   return (
     <li className={twMerge(theme.base, className)}>
diff --git a/packages/ui/src/components/Footer/FooterLinkGroup.tsx b/packages/ui/src/components/Footer/FooterLinkGroup.tsx
index 8643fa18a..6767e0e77 100644
--- a/packages/ui/src/components/Footer/FooterLinkGroup.tsx
+++ b/packages/ui/src/components/Footer/FooterLinkGroup.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteFooterLinkTheme } from "./FooterLink";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterLinkGroupTheme {
   base: string;
@@ -20,10 +21,10 @@ export const FooterLinkGroup: FC<FooterLinkGroupProps> = ({
   children,
   className,
   col = false,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().footer.groupLink, customTheme);
+  const theme = resolveTheme([footerTheme.groupLink, getStore().theme?.footer?.groupLink, customTheme]);
 
   return (
     <ul data-testid="footer-groupLink" className={twMerge(theme.base, col && theme.col, className)} {...props}>
diff --git a/packages/ui/src/components/Footer/FooterTitle.tsx b/packages/ui/src/components/Footer/FooterTitle.tsx
index 2a737c037..8b2bafc91 100644
--- a/packages/ui/src/components/Footer/FooterTitle.tsx
+++ b/packages/ui/src/components/Footer/FooterTitle.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, ElementType, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { footerTheme } from "./theme";
 
 export interface FlowbiteFooterTitleTheme {
   base: string;
@@ -17,11 +18,11 @@ export interface FooterTitleProps extends ComponentProps<"h2"> {
 export const FooterTitle: FC<FooterTitleProps> = ({
   as: Component = "h2",
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   title,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().footer.title, customTheme);
+  const theme = resolveTheme([footerTheme.title, getStore().theme?.footer?.title, customTheme]);
 
   return (
     <Component data-testid="flowbite-footer-title" className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Footer/theme.ts b/packages/ui/src/components/Footer/theme.ts
index 2a4f417e0..1af52d0f6 100644
--- a/packages/ui/src/components/Footer/theme.ts
+++ b/packages/ui/src/components/Footer/theme.ts
@@ -3,7 +3,7 @@ import type { FlowbiteFooterTheme } from "./Footer";
 
 export const footerTheme: FlowbiteFooterTheme = createTheme({
   root: {
-    base: "w-full rounded-lg bg-white shadow dark:bg-gray-800 md:flex md:items-center md:justify-between",
+    base: "w-full rounded-lg bg-white shadow md:flex md:items-center md:justify-between dark:bg-gray-800",
     container: "w-full p-6",
     bgDark: "bg-gray-800",
   },
@@ -23,10 +23,10 @@ export const footerTheme: FlowbiteFooterTheme = createTheme({
     base: "mb-6 text-sm font-semibold uppercase text-gray-500 dark:text-white",
   },
   divider: {
-    base: "my-6 w-full border-gray-200 dark:border-gray-700 sm:mx-auto lg:my-8",
+    base: "my-6 w-full border-gray-200 sm:mx-auto lg:my-8 dark:border-gray-700",
   },
   copyright: {
-    base: "text-sm text-gray-500 dark:text-gray-400 sm:text-center",
+    base: "text-sm text-gray-500 sm:text-center dark:text-gray-400",
     href: "ml-1 hover:underline",
     span: "ml-1",
   },
diff --git a/packages/ui/src/components/HR/HR.tsx b/packages/ui/src/components/HR/HR.tsx
index baf1935d4..763f70ee0 100644
--- a/packages/ui/src/components/HR/HR.tsx
+++ b/packages/ui/src/components/HR/HR.tsx
@@ -1,17 +1,18 @@
-import { forwardRef } from "react";
 import type { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { forwardRef } from "react";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import { HRIcon } from "./HRIcon";
 import type { FlowbiteHRIconTheme } from "./HRIcon";
+import { HRIcon } from "./HRIcon";
 import type { FlowbiteHRSquareTheme } from "./HRSquare";
 import { HRSquare } from "./HRSquare";
-import { HRText } from "./HRText";
 import type { FlowbiteHRTextTheme } from "./HRText";
-import { HRTrimmed } from "./HRTrimmed";
+import { HRText } from "./HRText";
 import type { FlowbiteHRTrimmedTheme } from "./HRTrimmed";
+import { HRTrimmed } from "./HRTrimmed";
+import { hrTheme } from "./theme";
 
 export interface FlowbiteHRTheme {
   root: {
@@ -27,8 +28,8 @@ export interface HRProps extends Omit<ComponentProps<"hr">, "ref"> {
   theme?: DeepPartial<FlowbiteHRTheme>;
 }
 
-const HRComponent = forwardRef<HTMLHRElement, HRProps>(({ theme: customTheme = {}, className, ...props }, ref) => {
-  const theme = mergeDeep(getTheme().hr.root, customTheme);
+const HRComponent = forwardRef<HTMLHRElement, HRProps>(({ theme: customTheme, className, ...props }, ref) => {
+  const theme = resolveTheme([hrTheme.root, getStore().theme?.hr?.root, customTheme]);
 
   return (
     <hr className={twMerge(theme.base, className)} role="separator" data-testid="flowbite-hr" ref={ref} {...props} />
diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx
index 00007fcf6..7db3f0ba7 100644
--- a/packages/ui/src/components/HR/HRIcon.tsx
+++ b/packages/ui/src/components/HR/HRIcon.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC } from "react";
 import { forwardRef } from "react";
 import { FaQuoteRight } from "react-icons/fa6";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { hrTheme } from "./theme";
 
 export interface FlowbiteHRIconTheme {
   base: string;
@@ -21,8 +22,8 @@ export interface HRIconProps extends Omit<ComponentProps<"hr">, "ref"> {
 }
 
 export const HRIcon = forwardRef<HTMLHRElement, HRIconProps>(
-  ({ theme: customTheme = {}, icon: Icon = FaQuoteRight, className, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().hr.icon, customTheme);
+  ({ theme: customTheme, icon: Icon = FaQuoteRight, className, ...props }, ref) => {
+    const theme = resolveTheme([hrTheme.icon, getStore().theme?.hr?.icon, customTheme]);
 
     return (
       <div className={theme.base}>
diff --git a/packages/ui/src/components/HR/HRSquare.tsx b/packages/ui/src/components/HR/HRSquare.tsx
index 724ac3f4f..44332c985 100644
--- a/packages/ui/src/components/HR/HRSquare.tsx
+++ b/packages/ui/src/components/HR/HRSquare.tsx
@@ -1,9 +1,10 @@
-import { forwardRef } from "react";
 import type { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { forwardRef } from "react";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { hrTheme } from "./theme";
 
 export interface FlowbiteHRSquareTheme {
   base: string;
@@ -13,18 +14,16 @@ export interface HRSquareProps extends Omit<ComponentProps<"hr">, "ref"> {
   theme?: DeepPartial<FlowbiteHRSquareTheme>;
 }
 
-export const HRSquare = forwardRef<HTMLHRElement, HRSquareProps>(
-  ({ theme: customTheme = {}, className, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().hr.square, customTheme);
+export const HRSquare = forwardRef<HTMLHRElement, HRSquareProps>(({ theme: customTheme, className, ...props }, ref) => {
+  const theme = resolveTheme([hrTheme.square, getStore().theme?.hr?.square, customTheme]);
 
-    return (
-      <hr
-        className={twMerge(theme.base, className)}
-        role="separator"
-        data-testid="flowbite-hr-square"
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <hr
+      className={twMerge(theme.base, className)}
+      role="separator"
+      data-testid="flowbite-hr-square"
+      ref={ref}
+      {...props}
+    />
+  );
+});
diff --git a/packages/ui/src/components/HR/HRText.tsx b/packages/ui/src/components/HR/HRText.tsx
index 83dac7136..f3a5f2de0 100644
--- a/packages/ui/src/components/HR/HRText.tsx
+++ b/packages/ui/src/components/HR/HRText.tsx
@@ -1,9 +1,10 @@
-import { forwardRef } from "react";
 import type { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { forwardRef } from "react";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { hrTheme } from "./theme";
 
 export interface FlowbiteHRTextTheme {
   base: string;
@@ -17,8 +18,8 @@ export interface HRTextProps extends Omit<ComponentProps<"hr">, "ref"> {
 }
 
 export const HRText = forwardRef<HTMLHRElement, HRTextProps>(
-  ({ theme: customTheme = {}, text, className, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().hr.text, customTheme);
+  ({ theme: customTheme, text, className, ...props }, ref) => {
+    const theme = resolveTheme([hrTheme.text, getStore().theme?.hr?.text, customTheme]);
 
     return (
       <div className={theme.base}>
diff --git a/packages/ui/src/components/HR/HRTrimmed.tsx b/packages/ui/src/components/HR/HRTrimmed.tsx
index 6014615f3..dee4a7cee 100644
--- a/packages/ui/src/components/HR/HRTrimmed.tsx
+++ b/packages/ui/src/components/HR/HRTrimmed.tsx
@@ -1,9 +1,10 @@
-import { forwardRef } from "react";
 import type { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { forwardRef } from "react";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { hrTheme } from "./theme";
 
 export interface FlowbiteHRTrimmedTheme {
   base: string;
@@ -14,8 +15,8 @@ export interface HRTrimmedProps extends Omit<ComponentProps<"hr">, "ref"> {
 }
 
 export const HRTrimmed = forwardRef<HTMLHRElement, HRTrimmedProps>(
-  ({ theme: customTheme = {}, className, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().hr.trimmed, customTheme);
+  ({ theme: customTheme, className, ...props }, ref) => {
+    const theme = resolveTheme([hrTheme.trimmed, getStore().theme?.hr?.trimmed, customTheme]);
 
     return (
       <hr
diff --git a/packages/ui/src/components/HR/theme.ts b/packages/ui/src/components/HR/theme.ts
index 9f2979935..8f9807564 100644
--- a/packages/ui/src/components/HR/theme.ts
+++ b/packages/ui/src/components/HR/theme.ts
@@ -6,7 +6,7 @@ export const hrTheme: FlowbiteHRTheme = createTheme({
     base: "my-8 h-px border-0 bg-gray-200 dark:bg-gray-700",
   },
   trimmed: {
-    base: "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 dark:bg-gray-700 md:my-10",
+    base: "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 md:my-10 dark:bg-gray-700",
   },
   icon: {
     base: "inline-flex w-full items-center justify-center",
@@ -22,6 +22,6 @@ export const hrTheme: FlowbiteHRTheme = createTheme({
     text: "absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-gray-900 dark:text-white",
   },
   square: {
-    base: "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 dark:bg-gray-700 md:my-12",
+    base: "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 md:my-12 dark:bg-gray-700",
   },
 });
diff --git a/packages/ui/src/components/HelperText/HelperText.tsx b/packages/ui/src/components/HelperText/HelperText.tsx
index 98edcd029..bf8f5825b 100644
--- a/packages/ui/src/components/HelperText/HelperText.tsx
+++ b/packages/ui/src/components/HelperText/HelperText.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors } from "../Flowbite";
+import type { FlowbiteColors } from "../Flowbite/FlowbiteTheme";
+import { helperTextTheme } from "./theme";
 
 export interface FlowbiteHelperTextTheme {
   root: FlowbiteHelperTextRootTheme;
@@ -28,11 +29,11 @@ export const HelperText: FC<HelperTextProps> = ({
   children,
   className,
   color = "default",
-  theme: customTheme = {},
+  theme: customTheme,
   value,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().helperText, customTheme);
+  const theme = resolveTheme([helperTextTheme, getStore().theme?.helperText, customTheme]);
 
   return (
     <p className={twMerge(theme.root.base, theme.root.colors[color], className)} {...props}>
diff --git a/packages/ui/src/components/Kbd/Kbd.spec.tsx b/packages/ui/src/components/Kbd/Kbd.spec.tsx
index e7b2982ea..14e093b9c 100644
--- a/packages/ui/src/components/Kbd/Kbd.spec.tsx
+++ b/packages/ui/src/components/Kbd/Kbd.spec.tsx
@@ -15,7 +15,7 @@ describe("Components / Kbd", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Kbd />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Kbd/Kbd.tsx b/packages/ui/src/components/Kbd/Kbd.tsx
index 639075a77..260aa5b33 100644
--- a/packages/ui/src/components/Kbd/Kbd.tsx
+++ b/packages/ui/src/components/Kbd/Kbd.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { kbdTheme } from "./theme";
 
 export interface FlowbiteKbdTheme {
   root: FlowbiteKbdRootTheme;
@@ -18,8 +19,8 @@ export interface KbdProps extends ComponentProps<"span"> {
   theme?: DeepPartial<FlowbiteKbdTheme>;
 }
 
-export const Kbd: FC<KbdProps> = ({ children, className, icon: Icon, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().kbd, customTheme);
+export const Kbd: FC<KbdProps> = ({ children, className, icon: Icon, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([kbdTheme, getStore().theme?.kbd, customTheme]);
 
   return (
     <span className={twMerge(theme.root.base, className)} data-testid="flowbite-kbd" {...props}>
diff --git a/packages/ui/src/components/Label/Label.spec.tsx b/packages/ui/src/components/Label/Label.spec.tsx
index e4e7deea4..f7244232a 100644
--- a/packages/ui/src/components/Label/Label.spec.tsx
+++ b/packages/ui/src/components/Label/Label.spec.tsx
@@ -45,7 +45,7 @@ describe("Components / Label", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Label disabled data-testid="flowbite-label" />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Label/Label.tsx b/packages/ui/src/components/Label/Label.tsx
index cdc3611ba..a3223e66d 100644
--- a/packages/ui/src/components/Label/Label.tsx
+++ b/packages/ui/src/components/Label/Label.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteStateColors } from "../Flowbite";
+import type { FlowbiteStateColors } from "../Flowbite/FlowbiteTheme";
+import { labelTheme } from "./theme";
 
 export interface FlowbiteLabelTheme {
   root: FlowbiteLabelRootTheme;
@@ -32,11 +33,11 @@ export const Label: FC<LabelProps> = ({
   className,
   color = "default",
   disabled = false,
-  theme: customTheme = {},
+  theme: customTheme,
   value,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().label, customTheme);
+  const theme = resolveTheme([labelTheme, getStore().theme?.label, customTheme]);
 
   return (
     <label
diff --git a/packages/ui/src/components/List/List.spec.tsx b/packages/ui/src/components/List/List.spec.tsx
index 0d09b70b7..d8c699d56 100644
--- a/packages/ui/src/components/List/List.spec.tsx
+++ b/packages/ui/src/components/List/List.spec.tsx
@@ -15,7 +15,7 @@ describe("Components / List group", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestList />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/List/List.tsx b/packages/ui/src/components/List/List.tsx
index 59b9274a2..b06d17d6a 100644
--- a/packages/ui/src/components/List/List.tsx
+++ b/packages/ui/src/components/List/List.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC, PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
-import type { FlowbiteListItemTheme, FlowbiteStateColors } from "../..";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import { ListItem } from "./ListItem";
+import type { FlowbiteStateColors } from "../Flowbite/FlowbiteTheme";
+import { ListItem, type FlowbiteListItemTheme } from "./ListItem";
+import { listTheme } from "./theme";
 
 export interface FlowbiteListTheme {
   root: FlowbiteListRootTheme;
@@ -42,20 +43,20 @@ const ListComponent: FC<ListProps> = ({
   nested,
   ordered,
   horizontal,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().list, customTheme);
+  const theme = resolveTheme([listTheme.root, getStore().theme?.list?.root, customTheme]);
   const Component = ordered ? "ol" : "ul";
 
   return (
     <Component
       className={twMerge(
-        theme.root.base,
-        theme.root.ordered[ordered ? "on" : "off"],
-        unstyled && theme.root.unstyled,
-        nested && theme.root.nested,
-        horizontal && theme.root.horizontal,
+        theme.base,
+        theme.ordered[ordered ? "on" : "off"],
+        unstyled && theme.unstyled,
+        nested && theme.nested,
+        horizontal && theme.horizontal,
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/List/ListItem.tsx b/packages/ui/src/components/List/ListItem.tsx
index 0e5e2ad4a..903d5d64c 100644
--- a/packages/ui/src/components/List/ListItem.tsx
+++ b/packages/ui/src/components/List/ListItem.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { listTheme } from "./theme";
 
 export interface FlowbiteListItemTheme {
   icon: string;
@@ -18,8 +19,8 @@ export interface ListItemProps extends ComponentProps<"li"> {
   theme?: DeepPartial<FlowbiteListItemTheme>;
 }
 
-export const ListItem: FC<ListItemProps> = ({ children, className, icon: Icon, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().list.item, customTheme);
+export const ListItem: FC<ListItemProps> = ({ children, className, icon: Icon, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([listTheme.item, getStore().theme?.list?.item, customTheme]);
 
   return (
     <li className={twMerge(theme.withIcon[Icon ? "on" : "off"], className)} {...props}>
diff --git a/packages/ui/src/components/ListGroup/ListGroup.spec.tsx b/packages/ui/src/components/ListGroup/ListGroup.spec.tsx
index 38a910583..7f52556a8 100644
--- a/packages/ui/src/components/ListGroup/ListGroup.spec.tsx
+++ b/packages/ui/src/components/ListGroup/ListGroup.spec.tsx
@@ -64,7 +64,7 @@ describe("Components / List group", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestListGroup />
         </Flowbite>,
       );
@@ -92,7 +92,7 @@ describe("Components / List group", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestListGroup />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/ListGroup/ListGroup.tsx b/packages/ui/src/components/ListGroup/ListGroup.tsx
index 4921da5bc..55d646ed2 100644
--- a/packages/ui/src/components/ListGroup/ListGroup.tsx
+++ b/packages/ui/src/components/ListGroup/ListGroup.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteListGroupItemTheme } from "./ListGroupItem";
 import { ListGroupItem } from "./ListGroupItem";
+import { listGroupTheme } from "./theme";
 
 export interface FlowbiteListGroupTheme {
   root: FlowbiteListGroupRootTheme;
@@ -19,11 +20,11 @@ export interface ListGroupProps extends ComponentProps<"ul"> {
   theme?: DeepPartial<FlowbiteListGroupTheme>;
 }
 
-const ListGroupComponent: FC<ListGroupProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().listGroup, customTheme);
+const ListGroupComponent: FC<ListGroupProps> = ({ children, className, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([listGroupTheme.root, getStore().theme?.listGroup?.root, customTheme]);
 
   return (
-    <ul className={twMerge(theme.root.base, className)} {...props}>
+    <ul className={twMerge(theme.base, className)} {...props}>
       {children}
     </ul>
   );
diff --git a/packages/ui/src/components/ListGroup/ListGroupItem.tsx b/packages/ui/src/components/ListGroup/ListGroupItem.tsx
index dc11604a2..d715fd057 100644
--- a/packages/ui/src/components/ListGroup/ListGroupItem.tsx
+++ b/packages/ui/src/components/ListGroup/ListGroupItem.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, FC, PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
+import { listGroupTheme } from "./theme";
 
 export interface FlowbiteListGroupItemTheme {
   base: string;
@@ -32,11 +33,11 @@ export const ListGroupItem: FC<ListGroupItemProps & ComponentProps<"a"> & Compon
   href,
   icon: Icon,
   onClick,
-  theme: customTheme = {},
+  theme: customTheme,
   disabled,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().listGroup.item, customTheme);
+  const theme = resolveTheme([listGroupTheme.item, getStore().theme?.listGroup?.item, customTheme]);
 
   const isLink = typeof href !== "undefined";
   const Component = isLink ? "a" : "button";
diff --git a/packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx b/packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx
index 78149c704..c3c1b1b7c 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx
@@ -19,7 +19,7 @@ const Template: StoryFn<MegaMenuProps> = (args) => (
     <div className="order-2 hidden items-center md:flex">
       <a
         href="#"
-        className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5"
+        className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 md:mr-2 md:px-5 md:py-2.5 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
       >
         Login
       </a>
diff --git a/packages/ui/src/components/MegaMenu/MegaMenu.tsx b/packages/ui/src/components/MegaMenu/MegaMenu.tsx
index 18db8c762..4ba8e615e 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenu.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenu.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import type { FC } from "react";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { FlowbiteNavbarTheme, NavbarComponentProps } from "../Navbar";
 import { Navbar } from "../Navbar";
 import { FlowbiteMegaMenuDropdownTheme, MegaMenuDropdown } from "./MegaMenuDropdown";
 import { FlowbiteMegaMenuDropdownToggleTheme, MegaMenuDropdownToggle } from "./MegaMenuDropdownToggle";
+import { megaMenuTheme } from "./theme";
 
 export interface FlowbiteMegaMenuTheme extends FlowbiteNavbarTheme {
   dropdown: FlowbiteMegaMenuDropdownTheme;
@@ -15,11 +16,11 @@ export interface FlowbiteMegaMenuTheme extends FlowbiteNavbarTheme {
 
 export type MegaMenuProps = NavbarComponentProps;
 
-const MegaMenuComponent: FC<MegaMenuProps> = ({ children, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().megaMenu, customTheme);
+const MegaMenuComponent: FC<MegaMenuProps> = ({ children, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([megaMenuTheme, getStore().theme?.megaMenu, customTheme]);
 
   return (
-    <Navbar fluid theme={theme} {...props}>
+    <Navbar theme={theme} fluid {...props}>
       {children}
     </Navbar>
   );
diff --git a/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx b/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx
index 4fc1f8f54..9bdf35e4c 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useEffect, useId, useRef, useState, type ComponentProps, type FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import { Dropdown, FlowbiteDropdownTheme } from "../Dropdown";
+import { megaMenuTheme } from "./theme";
 
 export interface FlowbiteMegaMenuDropdownTheme {
   base: string;
@@ -19,13 +20,13 @@ export interface MegaMenuDropdownProps extends ComponentProps<"div"> {
 export const MegaMenuDropdown: FC<MegaMenuDropdownProps> = ({
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   toggle,
   ...props
 }) => {
   const [labelledBy, setLabelledBy] = useState<string | undefined>(undefined);
 
-  const theme = mergeDeep(getTheme().megaMenu.dropdown, customTheme);
+  const theme = resolveTheme([megaMenuTheme.dropdown, getStore().theme?.megaMenu?.dropdown, customTheme]);
 
   if (toggle) {
     return (
diff --git a/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx b/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
index a8b93cf5c..dc032b3ae 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useEffect, useId, useRef, useState, type ComponentProps, type FC, type MouseEventHandler } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import { DeepPartial } from "../../types";
+import { megaMenuTheme } from "./theme";
 
 export interface FlowbiteMegaMenuDropdownToggleTheme {
   base: string;
@@ -17,7 +18,7 @@ export interface MegaMenuDropdownToggleProps extends ComponentProps<"button"> {
 export const MegaMenuDropdownToggle: FC<MegaMenuDropdownToggleProps> = ({
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const id = useId();
@@ -25,7 +26,7 @@ export const MegaMenuDropdownToggle: FC<MegaMenuDropdownToggleProps> = ({
   const [controls, setControls] = useState<string | undefined>(undefined);
   const [isExpanded, setExpanded] = useState<boolean | undefined>(undefined);
 
-  const theme = mergeDeep(getTheme().megaMenu.dropdownToggle, customTheme);
+  const theme = resolveTheme([megaMenuTheme.dropdownToggle, getStore().theme?.megaMenu?.dropdownToggle, customTheme]);
 
   const findDropdown = function () {
     const megaMenu = ref.current?.closest("nav");
diff --git a/packages/ui/src/components/MegaMenu/theme.ts b/packages/ui/src/components/MegaMenu/theme.ts
index 3bdb42f02..75488c87c 100644
--- a/packages/ui/src/components/MegaMenu/theme.ts
+++ b/packages/ui/src/components/MegaMenu/theme.ts
@@ -1,5 +1,5 @@
-import { twMerge } from "tailwind-merge";
 import { createTheme } from "../../helpers/create-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import { dropdownTheme } from "../Dropdown/theme";
 import { navbarTheme } from "../Navbar/theme";
 import type { FlowbiteMegaMenuTheme } from "./MegaMenu";
diff --git a/packages/ui/src/components/Modal/Modal.tsx b/packages/ui/src/components/Modal/Modal.tsx
index 0813a6ac7..cf4e6a697 100644
--- a/packages/ui/src/components/Modal/Modal.tsx
+++ b/packages/ui/src/components/Modal/Modal.tsx
@@ -13,11 +13,11 @@ import {
 } from "@floating-ui/react";
 import type { MutableRefObject } from "react";
 import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbitePositions, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteModalBodyTheme } from "./ModalBody";
 import { ModalBody } from "./ModalBody";
 import { ModalContext } from "./ModalContext";
@@ -25,6 +25,7 @@ import type { FlowbiteModalFooterTheme } from "./ModalFooter";
 import { ModalFooter } from "./ModalFooter";
 import type { FlowbiteModalHeaderTheme } from "./ModalHeader";
 import { ModalHeader } from "./ModalHeader";
+import { modalTheme } from "./theme";
 
 export interface FlowbiteModalTheme {
   root: FlowbiteModalRootTheme;
@@ -78,14 +79,14 @@ const ModalComponent = forwardRef<HTMLDivElement, ModalProps>(
       root,
       show,
       size = "2xl",
-      theme: customTheme = {},
+      theme: customTheme,
       initialFocus,
       ...props
     },
     theirRef,
   ) => {
     const [headerId, setHeaderId] = useState<string | undefined>(undefined);
-    const theme = mergeDeep(getTheme().modal, customTheme);
+    const theme = resolveTheme([modalTheme, getStore().theme?.modal, customTheme]);
 
     const { context } = useFloating({
       open: show,
diff --git a/packages/ui/src/components/Modal/ModalBody.tsx b/packages/ui/src/components/Modal/ModalBody.tsx
index a3770d3f8..e6a1d4501 100644
--- a/packages/ui/src/components/Modal/ModalBody.tsx
+++ b/packages/ui/src/components/Modal/ModalBody.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useModalContext } from "./ModalContext";
 
@@ -15,10 +15,10 @@ export interface ModalBodyProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteModalBodyTheme>;
 }
 
-export const ModalBody: FC<ModalBodyProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const ModalBody: FC<ModalBodyProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme, popup } = useModalContext();
 
-  const theme = mergeDeep(rootTheme.body, customTheme);
+  const theme = resolveTheme([rootTheme.body, customTheme], { shouldPrefix: false });
 
   return (
     <div className={twMerge(theme.base, popup && [theme.popup], className)} {...props}>
diff --git a/packages/ui/src/components/Modal/ModalFooter.tsx b/packages/ui/src/components/Modal/ModalFooter.tsx
index 6eef95b2e..34981d3a4 100644
--- a/packages/ui/src/components/Modal/ModalFooter.tsx
+++ b/packages/ui/src/components/Modal/ModalFooter.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useModalContext } from "./ModalContext";
 
@@ -15,10 +15,10 @@ export interface ModalFooterProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteModalFooterTheme>;
 }
 
-export const ModalFooter: FC<ModalFooterProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const ModalFooter: FC<ModalFooterProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme, popup } = useModalContext();
 
-  const theme = mergeDeep(rootTheme.footer, customTheme);
+  const theme = resolveTheme([rootTheme.footer, customTheme], { shouldPrefix: false });
 
   return (
     <div className={twMerge(theme.base, !popup && theme.popup, className)} {...props}>
diff --git a/packages/ui/src/components/Modal/ModalHeader.tsx b/packages/ui/src/components/Modal/ModalHeader.tsx
index 1b6375715..5f7c8f419 100644
--- a/packages/ui/src/components/Modal/ModalHeader.tsx
+++ b/packages/ui/src/components/Modal/ModalHeader.tsx
@@ -2,8 +2,8 @@
 
 import { useId, useLayoutEffect, type ComponentProps, type ElementType, type FC } from "react";
 import { HiOutlineX } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useModalContext } from "./ModalContext";
 
@@ -26,7 +26,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   as: Component = "h3",
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   id,
   ...props
 }) => {
@@ -35,7 +35,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
 
   const { theme: rootTheme, popup, onClose, setHeaderId } = useModalContext();
 
-  const theme = mergeDeep(rootTheme.header, customTheme);
+  const theme = resolveTheme([rootTheme.header, customTheme], { shouldPrefix: false });
 
   useLayoutEffect(() => {
     setHeaderId(headerId);
diff --git a/packages/ui/src/components/Navbar/Navbar.tsx b/packages/ui/src/components/Navbar/Navbar.tsx
index 88b18a629..dc1bc5e45 100644
--- a/packages/ui/src/components/Navbar/Navbar.tsx
+++ b/packages/ui/src/components/Navbar/Navbar.tsx
@@ -2,11 +2,11 @@
 
 import type { ComponentProps, FC } from "react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteNavbarBrandTheme } from "./NavbarBrand";
 import { NavbarBrand } from "./NavbarBrand";
 import type { FlowbiteNavbarCollapseTheme } from "./NavbarCollapse";
@@ -16,6 +16,7 @@ import type { FlowbiteNavbarLinkTheme } from "./NavbarLink";
 import { NavbarLink } from "./NavbarLink";
 import type { FlowbiteNavbarToggleTheme } from "./NavbarToggle";
 import { NavbarToggle } from "./NavbarToggle";
+import { navbarTheme } from "./theme";
 
 export interface FlowbiteNavbarTheme {
   root: FlowbiteNavbarRootTheme;
@@ -50,12 +51,12 @@ const NavbarComponent: FC<NavbarComponentProps> = ({
   fluid = false,
   menuOpen,
   rounded,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(menuOpen);
 
-  const theme = mergeDeep(getTheme().navbar, customTheme);
+  const theme = resolveTheme([navbarTheme, getStore().theme?.navbar, customTheme]);
 
   return (
     <NavbarContext.Provider value={{ theme, isOpen, setIsOpen }}>
diff --git a/packages/ui/src/components/Navbar/NavbarBrand.tsx b/packages/ui/src/components/Navbar/NavbarBrand.tsx
index 3612946cc..acb09602e 100644
--- a/packages/ui/src/components/Navbar/NavbarBrand.tsx
+++ b/packages/ui/src/components/Navbar/NavbarBrand.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, ElementType, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useNavbarContext } from "./NavbarContext";
 
@@ -20,12 +20,12 @@ export const NavbarBrand: FC<NavbarBrandProps> = ({
   as: Component = "a",
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { theme: rootTheme } = useNavbarContext();
 
-  const theme = mergeDeep(rootTheme.brand, customTheme);
+  const theme = resolveTheme([rootTheme.brand, customTheme], { shouldPrefix: false });
 
   return (
     <Component className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Navbar/NavbarCollapse.tsx b/packages/ui/src/components/Navbar/NavbarCollapse.tsx
index f6f5be14b..c579f2175 100644
--- a/packages/ui/src/components/Navbar/NavbarCollapse.tsx
+++ b/packages/ui/src/components/Navbar/NavbarCollapse.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { useNavbarContext } from "./NavbarContext";
 
 export interface FlowbiteNavbarCollapseTheme {
@@ -17,10 +17,10 @@ export interface NavbarCollapseProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteNavbarCollapseTheme>;
 }
 
-export const NavbarCollapse: FC<NavbarCollapseProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const NavbarCollapse: FC<NavbarCollapseProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme, isOpen } = useNavbarContext();
 
-  const theme = mergeDeep(rootTheme.collapse, customTheme);
+  const theme = resolveTheme([rootTheme.collapse, customTheme], { shouldPrefix: false });
 
   return (
     <div
diff --git a/packages/ui/src/components/Navbar/NavbarLink.tsx b/packages/ui/src/components/Navbar/NavbarLink.tsx
index f067cec73..7ccce6151 100644
--- a/packages/ui/src/components/Navbar/NavbarLink.tsx
+++ b/packages/ui/src/components/Navbar/NavbarLink.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import type { ComponentProps, ElementType, FC, MouseEvent } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { useNavbarContext } from "./NavbarContext";
 
 export interface FlowbiteNavbarLinkTheme {
@@ -27,13 +27,13 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
   disabled,
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   onClick,
   ...props
 }) => {
   const { theme: rootTheme, setIsOpen } = useNavbarContext();
 
-  const theme = mergeDeep(rootTheme.link, customTheme);
+  const theme = resolveTheme([rootTheme.link, customTheme], { shouldPrefix: false });
 
   const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
     setIsOpen(false);
diff --git a/packages/ui/src/components/Navbar/NavbarToggle.tsx b/packages/ui/src/components/Navbar/NavbarToggle.tsx
index 3c1b58159..32d78e3ab 100644
--- a/packages/ui/src/components/Navbar/NavbarToggle.tsx
+++ b/packages/ui/src/components/Navbar/NavbarToggle.tsx
@@ -2,8 +2,8 @@
 
 import type { ComponentProps, FC } from "react";
 import { FaBars } from "react-icons/fa";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useNavbarContext } from "./NavbarContext";
 
@@ -20,12 +20,12 @@ export interface NavbarToggleProps extends ComponentProps<"button"> {
 export const NavbarToggle: FC<NavbarToggleProps> = ({
   barIcon: BarIcon = FaBars,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { theme: rootTheme, isOpen, setIsOpen } = useNavbarContext();
 
-  const theme = mergeDeep(rootTheme.toggle, customTheme);
+  const theme = resolveTheme([rootTheme.toggle, customTheme], { shouldPrefix: false });
 
   const handleClick = () => {
     setIsOpen(!isOpen);
diff --git a/packages/ui/src/components/Navbar/theme.ts b/packages/ui/src/components/Navbar/theme.ts
index ad68ecf64..bc19ae0a9 100644
--- a/packages/ui/src/components/Navbar/theme.ts
+++ b/packages/ui/src/components/Navbar/theme.ts
@@ -3,7 +3,7 @@ import type { FlowbiteNavbarTheme } from "./Navbar";
 
 export const navbarTheme: FlowbiteNavbarTheme = createTheme({
   root: {
-    base: "bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4",
+    base: "bg-white px-2 py-2.5 sm:px-4 dark:border-gray-700 dark:bg-gray-800",
     rounded: {
       on: "rounded",
       off: "",
@@ -34,8 +34,8 @@ export const navbarTheme: FlowbiteNavbarTheme = createTheme({
   link: {
     base: "block py-2 pl-3 pr-4 md:p-0",
     active: {
-      on: "bg-cyan-700 text-white dark:text-white md:bg-transparent md:text-cyan-700",
-      off: "border-b border-gray-100 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:hover:bg-transparent md:hover:text-cyan-700 md:dark:hover:bg-transparent md:dark:hover:text-white",
+      on: "bg-cyan-700 text-white md:bg-transparent md:text-cyan-700 dark:text-white",
+      off: "border-b border-gray-100 text-gray-700 hover:bg-gray-50 md:border-0 md:hover:bg-transparent md:hover:text-cyan-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-white",
     },
     disabled: {
       on: "text-gray-400 hover:cursor-not-allowed dark:text-gray-600",
@@ -43,7 +43,7 @@ export const navbarTheme: FlowbiteNavbarTheme = createTheme({
     },
   },
   toggle: {
-    base: "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden",
+    base: "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
     icon: "h-6 w-6 shrink-0",
   },
 });
diff --git a/packages/ui/src/components/Pagination/Pagination.tsx b/packages/ui/src/components/Pagination/Pagination.tsx
index 36258387a..b163b3af6 100644
--- a/packages/ui/src/components/Pagination/Pagination.tsx
+++ b/packages/ui/src/components/Pagination/Pagination.tsx
@@ -1,12 +1,13 @@
 import type { ComponentProps, FC, ReactNode } from "react";
 import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { range } from "./helpers";
 import type { FlowbitePaginationButtonTheme, PaginationButtonProps } from "./PaginationButton";
 import { PaginationButton, PaginationNavigation } from "./PaginationButton";
+import { paginationTheme } from "./theme";
 
 export interface FlowbitePaginationTheme {
   base: string;
@@ -59,11 +60,11 @@ const PaginationComponent: FC<PaginationProps> = ({
   previousLabel = "Previous",
   renderPaginationButton = (props) => <PaginationButton {...props} />,
   showIcons: showIcon = false,
-  theme: customTheme = {},
+  theme: customTheme,
   totalPages,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().pagination, customTheme);
+  const theme = resolveTheme([paginationTheme, getStore().theme?.pagination, customTheme]);
 
   const lastPage = Math.min(Math.max(layout === "pagination" ? currentPage + 2 : currentPage + 4, 5), totalPages);
   const firstPage = Math.max(1, lastPage - 4);
diff --git a/packages/ui/src/components/Pagination/PaginationButton.tsx b/packages/ui/src/components/Pagination/PaginationButton.tsx
index 105d03ea8..06d8ad312 100644
--- a/packages/ui/src/components/Pagination/PaginationButton.tsx
+++ b/packages/ui/src/components/Pagination/PaginationButton.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC, ReactEventHandler, ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { paginationTheme } from "./theme";
 
 export interface FlowbitePaginationButtonTheme {
   base: string;
@@ -27,10 +28,10 @@ export const PaginationButton: FC<PaginationButtonProps> = ({
   children,
   className,
   onClick,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().pagination, customTheme);
+  const theme = resolveTheme([paginationTheme, getStore().theme?.pagination, customTheme]);
 
   return (
     <button
@@ -50,11 +51,11 @@ export const PaginationNavigation: FC<PaginationPrevButtonProps> = ({
   children,
   className,
   onClick,
-  theme: customTheme = {},
+  theme: customTheme,
   disabled = false,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().pagination, customTheme);
+  const theme = resolveTheme([paginationTheme, getStore().theme?.pagination, customTheme]);
 
   return (
     <button
diff --git a/packages/ui/src/components/Popover/Popover.tsx b/packages/ui/src/components/Popover/Popover.tsx
index 8936ac324..c62828e5a 100644
--- a/packages/ui/src/components/Popover/Popover.tsx
+++ b/packages/ui/src/components/Popover/Popover.tsx
@@ -4,12 +4,13 @@ import type { Placement } from "@floating-ui/react";
 import { FloatingFocusManager, useMergeRefs } from "@floating-ui/react";
 import type { ComponentProps, ComponentPropsWithRef, Dispatch, ReactNode, SetStateAction } from "react";
 import { cloneElement, isValidElement, useMemo, useRef, useState } from "react";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
 import { useBaseFLoating, useFloatingInteractions } from "../../hooks/use-floating";
-import { getTheme } from "../../theme-store";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteFloatingArrowTheme } from "../Floating";
 import { getArrowPlacement } from "../Floating/helpers";
+import { popoverTheme } from "./theme";
 
 export interface FlowbitePopoverTheme {
   arrow: Omit<FlowbiteFloatingArrowTheme, "style">;
@@ -31,7 +32,7 @@ export interface PopoverProps extends Omit<ComponentProps<"div">, "content" | "s
 export function Popover({
   children,
   content,
-  theme: customTheme = {},
+  theme: customTheme,
   arrow = true,
   trigger = "click",
   initialOpen,
@@ -43,7 +44,7 @@ export function Popover({
   const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(Boolean(initialOpen));
   const arrowRef = useRef<HTMLDivElement>(null);
 
-  const theme = mergeDeep(getTheme().popover, customTheme);
+  const theme = resolveTheme([popoverTheme, getStore().theme?.popover, customTheme]);
 
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
diff --git a/packages/ui/src/components/Popover/theme.ts b/packages/ui/src/components/Popover/theme.ts
index 039165277..5c8172d08 100644
--- a/packages/ui/src/components/Popover/theme.ts
+++ b/packages/ui/src/components/Popover/theme.ts
@@ -1,10 +1,11 @@
+import { createTheme } from "../../helpers/create-theme";
 import type { FlowbitePopoverTheme } from "./Popover";
 
-export const popoverTheme: FlowbitePopoverTheme = {
-  base: "absolute z-20 inline-block w-max max-w-[100vw] bg-white outline-none border border-gray-200 rounded-lg shadow-sm dark:border-gray-600 dark:bg-gray-800",
+export const popoverTheme: FlowbitePopoverTheme = createTheme({
+  base: "absolute z-20 inline-block w-max max-w-[100vw] rounded-lg border border-gray-200 bg-white shadow-sm outline-none dark:border-gray-600 dark:bg-gray-800",
   content: "z-10 overflow-hidden rounded-[7px]",
   arrow: {
-    base: "absolute h-2 w-2 z-0 rotate-45 mix-blend-lighten bg-white border border-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:mix-blend-color",
+    base: "absolute z-0 h-2 w-2 rotate-45 border border-gray-200 bg-white mix-blend-lighten dark:border-gray-600 dark:bg-gray-800 dark:mix-blend-color",
     placement: "-4px",
   },
-};
+});
diff --git a/packages/ui/src/components/Progress/Progress.tsx b/packages/ui/src/components/Progress/Progress.tsx
index ead8c1a11..982a1db8b 100644
--- a/packages/ui/src/components/Progress/Progress.tsx
+++ b/packages/ui/src/components/Progress/Progress.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC } from "react";
 import { useId } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
+import { progressTheme } from "./theme";
 
 export interface FlowbiteProgressTheme {
   base: string;
@@ -47,11 +48,11 @@ export const Progress: FC<ProgressProps> = ({
   size = "md",
   textLabel = "progressbar",
   textLabelPosition = "inside",
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const id = useId();
-  const theme = mergeDeep(getTheme().progress, customTheme);
+  const theme = resolveTheme([progressTheme, getStore().theme?.progress, customTheme]);
 
   return (
     <>
diff --git a/packages/ui/src/components/Radio/Radio.spec.tsx b/packages/ui/src/components/Radio/Radio.spec.tsx
index 3c91bed18..ea2d040d5 100644
--- a/packages/ui/src/components/Radio/Radio.spec.tsx
+++ b/packages/ui/src/components/Radio/Radio.spec.tsx
@@ -23,7 +23,7 @@ describe("Components / Radio", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Radio />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Radio/Radio.tsx b/packages/ui/src/components/Radio/Radio.tsx
index 61399750d..12fce37c5 100644
--- a/packages/ui/src/components/Radio/Radio.tsx
+++ b/packages/ui/src/components/Radio/Radio.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { radioTheme } from "./theme";
 
 export interface FlowbiteRadioTheme {
   root: FlowbiteRadioRootTheme;
@@ -17,12 +18,10 @@ export interface RadioProps extends Omit<ComponentProps<"input">, "ref" | "type"
   theme?: DeepPartial<FlowbiteRadioTheme>;
 }
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ className, theme: customTheme = {}, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().radio, customTheme);
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(({ className, theme: customTheme, ...props }, ref) => {
+  const theme = resolveTheme([radioTheme, getStore().theme?.radio, customTheme]);
 
-    return <input ref={ref} type="radio" className={twMerge(theme.root.base, className)} {...props} />;
-  },
-);
+  return <input ref={ref} type="radio" className={twMerge(theme.root.base, className)} {...props} />;
+});
 
 Radio.displayName = "Radio";
diff --git a/packages/ui/src/components/RangeSlider/RangeSlider.spec.tsx b/packages/ui/src/components/RangeSlider/RangeSlider.spec.tsx
index a41c40274..c61abe031 100644
--- a/packages/ui/src/components/RangeSlider/RangeSlider.spec.tsx
+++ b/packages/ui/src/components/RangeSlider/RangeSlider.spec.tsx
@@ -146,7 +146,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <RangeSlider />
         </Flowbite>,
       );
@@ -164,7 +164,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <RangeSlider />
         </Flowbite>,
       );
@@ -184,7 +184,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <RangeSlider />
         </Flowbite>,
       );
@@ -206,7 +206,7 @@ describe("Components / Button", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <RangeSlider sizing="lg" />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/RangeSlider/RangeSlider.tsx b/packages/ui/src/components/RangeSlider/RangeSlider.tsx
index 2ca8cf818..ad202baa3 100644
--- a/packages/ui/src/components/RangeSlider/RangeSlider.tsx
+++ b/packages/ui/src/components/RangeSlider/RangeSlider.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteTextInputSizes } from "../TextInput";
+import { rangeSliderTheme } from "./theme";
 
 export interface FlowbiteRangeSliderTheme {
   root: FlowbiteRangeSliderRootTheme;
@@ -29,8 +30,8 @@ export interface RangeSliderProps extends Omit<ComponentProps<"input">, "ref" |
 }
 
 export const RangeSlider = forwardRef<HTMLInputElement, RangeSliderProps>(
-  ({ className, sizing = "md", theme: customTheme = {}, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().rangeSlider, customTheme);
+  ({ className, sizing = "md", theme: customTheme, ...props }, ref) => {
+    const theme = resolveTheme([rangeSliderTheme, getStore().theme?.rangeSlider, customTheme]);
 
     return (
       <>
diff --git a/packages/ui/src/components/Rating/Rating.tsx b/packages/ui/src/components/Rating/Rating.tsx
index 867b7355b..e681ca1c7 100644
--- a/packages/ui/src/components/Rating/Rating.tsx
+++ b/packages/ui/src/components/Rating/Rating.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import { RatingAdvanced } from "./RatingAdvanced";
 import { RatingContext } from "./RatingContext";
 import type { FlowbiteRatingStarTheme, FlowbiteStarSizes } from "./RatingStar";
 import { RatingStar } from "./RatingStar";
+import { ratingTheme } from "./theme";
 
 export interface FlowbiteRatingTheme {
   root: {
@@ -22,8 +23,8 @@ export interface RatingProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteRatingTheme>;
 }
 
-const RatingComponent: FC<RatingProps> = ({ children, className, size = "sm", theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().rating, customTheme);
+const RatingComponent: FC<RatingProps> = ({ children, className, size = "sm", theme: customTheme, ...props }) => {
+  const theme = resolveTheme([ratingTheme, getStore().theme?.rating, customTheme]);
 
   return (
     <RatingContext.Provider value={{ theme, size }}>
diff --git a/packages/ui/src/components/Rating/RatingAdvanced.tsx b/packages/ui/src/components/Rating/RatingAdvanced.tsx
index 61f955d88..0a9a250b7 100644
--- a/packages/ui/src/components/Rating/RatingAdvanced.tsx
+++ b/packages/ui/src/components/Rating/RatingAdvanced.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { ratingAdvancedTheme } from "./theme";
 
 export interface FlowbiteRatingAdvancedTheme {
   base: string;
@@ -23,10 +24,10 @@ export const RatingAdvanced: FC<RatingAdvancedProps> = ({
   children,
   className,
   percentFilled = 0,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().ratingAdvanced, customTheme);
+  const theme = resolveTheme([ratingAdvancedTheme, getStore().theme?.ratingAdvanced, customTheme]);
 
   return (
     <div className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Rating/RatingStar.tsx b/packages/ui/src/components/Rating/RatingStar.tsx
index 3c58596ba..17607aa14 100644
--- a/packages/ui/src/components/Rating/RatingStar.tsx
+++ b/packages/ui/src/components/Rating/RatingStar.tsx
@@ -2,10 +2,10 @@
 
 import type { ComponentProps, FC } from "react";
 import { HiStar } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
 import { useRatingContext } from "./RatingContext";
 
 export interface FlowbiteRatingStarTheme {
@@ -28,12 +28,12 @@ export const RatingStar: FC<RatingStarProps> = ({
   className,
   filled = true,
   starIcon: Icon = HiStar,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { theme: rootTheme, size = "sm" } = useRatingContext();
 
-  const theme = mergeDeep(rootTheme.star, customTheme);
+  const theme = resolveTheme([rootTheme.star, customTheme], { shouldPrefix: false });
 
   return (
     <Icon
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index 6dcb23584..600945c82 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -1,11 +1,12 @@
 import type { ComponentProps, FC, ReactNode } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
 import { HelperText } from "../HelperText";
+import { selectTheme } from "./theme";
 
 export interface FlowbiteSelectTheme {
   base: string;
@@ -56,12 +57,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       icon: Icon,
       shadow,
       sizing = "md",
-      theme: customTheme = {},
+      theme: customTheme,
       ...props
     },
     ref,
   ) => {
-    const theme = mergeDeep(getTheme().select, customTheme);
+    const theme = resolveTheme([selectTheme, getStore().theme?.select, customTheme]);
 
     return (
       <div className={twMerge(theme.base, className)}>
diff --git a/packages/ui/src/components/Sidebar/Sidebar.spec.tsx b/packages/ui/src/components/Sidebar/Sidebar.spec.tsx
index 3f360f672..a6de4979b 100644
--- a/packages/ui/src/components/Sidebar/Sidebar.spec.tsx
+++ b/packages/ui/src/components/Sidebar/Sidebar.spec.tsx
@@ -136,7 +136,7 @@ describe("Theme", () => {
     };
 
     const { getByLabelText } = render(
-      <Flowbite theme={{ theme }}>
+      <Flowbite theme={theme}>
         <TestSidebar aria-label="not-collapsed" />
         <TestSidebar aria-label="collapsed" collapsed />
       </Flowbite>,
@@ -181,7 +181,7 @@ describe("Theme", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestSidebar />
         </Flowbite>,
       );
@@ -214,7 +214,7 @@ describe("Theme", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestSidebar />
         </Flowbite>,
       );
@@ -245,7 +245,7 @@ describe("Theme", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestSidebar collapsed />
         </Flowbite>,
       );
@@ -279,7 +279,7 @@ describe("Theme", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestSidebar />
         </Flowbite>,
       );
@@ -299,7 +299,7 @@ describe("Theme", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestSidebar />
         </Flowbite>,
       );
@@ -323,7 +323,7 @@ describe("Theme", () => {
       };
 
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestSidebar />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Sidebar/Sidebar.tsx b/packages/ui/src/components/Sidebar/Sidebar.tsx
index 04e2364fa..c5b165063 100644
--- a/packages/ui/src/components/Sidebar/Sidebar.tsx
+++ b/packages/ui/src/components/Sidebar/Sidebar.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import type { ComponentProps, ElementType, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { SidebarCollapse, type FlowbiteSidebarCollapseTheme } from "./SidebarCollapse";
 import { SidebarContext } from "./SidebarContext";
 import { SidebarCTA, type FlowbiteSidebarCTATheme } from "./SidebarCTA";
@@ -13,6 +13,7 @@ import { SidebarItem, type FlowbiteSidebarItemTheme } from "./SidebarItem";
 import { SidebarItemGroup, type FlowbiteSidebarItemGroupTheme } from "./SidebarItemGroup";
 import { SidebarItems, type FlowbiteSidebarItemsTheme } from "./SidebarItems";
 import { SidebarLogo, type FlowbiteSidebarLogoTheme } from "./SidebarLogo";
+import { sidebarTheme } from "./theme";
 
 export interface FlowbiteSidebarTheme {
   root: {
@@ -40,11 +41,11 @@ const SidebarComponent: FC<SidebarProps> = ({
   as: Component = "nav",
   collapseBehavior = "collapse",
   collapsed: isCollapsed = false,
-  theme: customTheme = {},
+  theme: customTheme,
   className,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().sidebar, customTheme);
+  const theme = resolveTheme([sidebarTheme, getStore().theme?.sidebar, customTheme]);
 
   return (
     <SidebarContext.Provider value={{ theme, isCollapsed }}>
diff --git a/packages/ui/src/components/Sidebar/SidebarCTA.tsx b/packages/ui/src/components/Sidebar/SidebarCTA.tsx
index 1462fdab7..8fa9d3c6f 100644
--- a/packages/ui/src/components/Sidebar/SidebarCTA.tsx
+++ b/packages/ui/src/components/Sidebar/SidebarCTA.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors } from "../Flowbite";
+import type { FlowbiteColors } from "../Flowbite/FlowbiteTheme";
 import { useSidebarContext } from "./SidebarContext";
 
 export interface FlowbiteSidebarCTATheme {
@@ -29,12 +29,12 @@ export const SidebarCTA: FC<SidebarCTAProps> = ({
   children,
   color = "info",
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { theme: rootTheme, isCollapsed } = useSidebarContext();
 
-  const theme = mergeDeep(rootTheme.cta, customTheme);
+  const theme = resolveTheme([rootTheme.cta, customTheme], { shouldPrefix: false });
 
   return (
     <div
diff --git a/packages/ui/src/components/Sidebar/SidebarCollapse.tsx b/packages/ui/src/components/Sidebar/SidebarCollapse.tsx
index 45604d36d..c1c426caa 100644
--- a/packages/ui/src/components/Sidebar/SidebarCollapse.tsx
+++ b/packages/ui/src/components/Sidebar/SidebarCollapse.tsx
@@ -3,10 +3,10 @@
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from "react";
 import { useEffect, useId, useState } from "react";
 import { HiChevronDown } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { Tooltip } from "../Tooltip";
 import { useSidebarContext } from "./SidebarContext";
 import type { SidebarItemProps } from "./SidebarItem";
@@ -46,14 +46,14 @@ export const SidebarCollapse: FC<SidebarCollapseProps> = ({
   chevronIcon: ChevronIcon = HiChevronDown,
   renderChevronIcon,
   open = false,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const id = useId();
   const [isOpen, setOpen] = useState(open);
   const { theme: rootTheme, isCollapsed } = useSidebarContext();
 
-  const theme = mergeDeep(rootTheme.collapse, customTheme);
+  const theme = resolveTheme([rootTheme.collapse, customTheme], { shouldPrefix: false });
 
   useEffect(() => setOpen(open), [open]);
 
diff --git a/packages/ui/src/components/Sidebar/SidebarItem.tsx b/packages/ui/src/components/Sidebar/SidebarItem.tsx
index 60fbe41ac..cefe8332d 100644
--- a/packages/ui/src/components/Sidebar/SidebarItem.tsx
+++ b/packages/ui/src/components/Sidebar/SidebarItem.tsx
@@ -2,11 +2,11 @@
 
 import type { ComponentProps, ElementType, FC, PropsWithChildren, ReactNode } from "react";
 import { forwardRef, useId } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import { Badge } from "../Badge";
-import type { FlowbiteColors } from "../Flowbite";
+import type { FlowbiteColors } from "../Flowbite/FlowbiteTheme";
 import { Tooltip } from "../Tooltip";
 import { useSidebarContext } from "./SidebarContext";
 import { useSidebarItemContext } from "./SidebarItemContext";
@@ -92,7 +92,7 @@ export const SidebarItem = forwardRef<Element, SidebarItemProps>(
       icon: Icon,
       label,
       labelColor = "info",
-      theme: customTheme = {},
+      theme: customTheme,
       ...props
     },
     ref,
@@ -101,7 +101,7 @@ export const SidebarItem = forwardRef<Element, SidebarItemProps>(
     const { theme: rootTheme, isCollapsed } = useSidebarContext();
     const { isInsideCollapse } = useSidebarItemContext();
 
-    const theme = mergeDeep(rootTheme.item, customTheme);
+    const theme = resolveTheme([rootTheme.item, customTheme], { shouldPrefix: false });
 
     return (
       <ListItem theme={theme} className={theme.listItem} id={id} isCollapsed={isCollapsed} tooltipChildren={children}>
diff --git a/packages/ui/src/components/Sidebar/SidebarItemGroup.tsx b/packages/ui/src/components/Sidebar/SidebarItemGroup.tsx
index a0145e73a..53c1a6411 100644
--- a/packages/ui/src/components/Sidebar/SidebarItemGroup.tsx
+++ b/packages/ui/src/components/Sidebar/SidebarItemGroup.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useSidebarContext } from "./SidebarContext";
 import { SidebarItemContext } from "./SidebarItemContext";
@@ -15,15 +15,10 @@ export interface SidebarItemGroupProps extends ComponentProps<"ul"> {
   theme?: DeepPartial<FlowbiteSidebarItemGroupTheme>;
 }
 
-export const SidebarItemGroup: FC<SidebarItemGroupProps> = ({
-  children,
-  className,
-  theme: customTheme = {},
-  ...props
-}) => {
+export const SidebarItemGroup: FC<SidebarItemGroupProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme } = useSidebarContext();
 
-  const theme = mergeDeep(rootTheme.itemGroup, customTheme);
+  const theme = resolveTheme([rootTheme.itemGroup, customTheme], { shouldPrefix: false });
 
   return (
     <ul data-testid="flowbite-sidebar-item-group" className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Sidebar/SidebarItems.tsx b/packages/ui/src/components/Sidebar/SidebarItems.tsx
index 88d879886..c9a820c8e 100644
--- a/packages/ui/src/components/Sidebar/SidebarItems.tsx
+++ b/packages/ui/src/components/Sidebar/SidebarItems.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useSidebarContext } from "./SidebarContext";
 
@@ -14,10 +14,10 @@ export interface SidebarItemsProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteSidebarItemsTheme>;
 }
 
-export const SidebarItems: FC<SidebarItemsProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const SidebarItems: FC<SidebarItemsProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme } = useSidebarContext();
 
-  const theme = mergeDeep(rootTheme.items, customTheme);
+  const theme = resolveTheme([rootTheme.items, customTheme], { shouldPrefix: false });
 
   return (
     <div className={twMerge(theme.base, className)} data-testid="flowbite-sidebar-items" {...props}>
diff --git a/packages/ui/src/components/Sidebar/SidebarLogo.tsx b/packages/ui/src/components/Sidebar/SidebarLogo.tsx
index 3832c03ee..231cbe5a2 100644
--- a/packages/ui/src/components/Sidebar/SidebarLogo.tsx
+++ b/packages/ui/src/components/Sidebar/SidebarLogo.tsx
@@ -2,10 +2,10 @@
 
 import type { ComponentProps, FC } from "react";
 import { useId } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import { useSidebarContext } from "./SidebarContext";
 
 export interface FlowbiteSidebarLogoTheme {
@@ -27,13 +27,13 @@ export const SidebarLogo: FC<SidebarLogoProps> = ({
   href,
   img,
   imgAlt = "",
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const id = useId();
   const { theme: rootTheme, isCollapsed } = useSidebarContext();
 
-  const theme = mergeDeep(rootTheme.logo, customTheme);
+  const theme = resolveTheme([rootTheme.logo, customTheme], { shouldPrefix: false });
 
   return (
     <a
diff --git a/packages/ui/src/components/Spinner/Spinner.spec.tsx b/packages/ui/src/components/Spinner/Spinner.spec.tsx
index b3a762d61..7b5deb05a 100644
--- a/packages/ui/src/components/Spinner/Spinner.spec.tsx
+++ b/packages/ui/src/components/Spinner/Spinner.spec.tsx
@@ -31,7 +31,7 @@ describe("Components / Spinner", () => {
 
       const spinner = getSpinner(
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Spinner />
           </Flowbite>,
         ),
@@ -51,7 +51,7 @@ describe("Components / Spinner", () => {
 
       const spinner = getSpinner(
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Spinner color="primary" />
           </Flowbite>,
         ),
@@ -75,7 +75,7 @@ describe("Components / Spinner", () => {
 
       const spinner = getSpinner(
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <Spinner color="success" light />
           </Flowbite>,
         ),
diff --git a/packages/ui/src/components/Spinner/Spinner.tsx b/packages/ui/src/components/Spinner/Spinner.tsx
index 3b3017005..6bacec5e7 100644
--- a/packages/ui/src/components/Spinner/Spinner.tsx
+++ b/packages/ui/src/components/Spinner/Spinner.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
+import { spinnerTheme } from "./theme";
 
 export interface FlowbiteSpinnerTheme {
   base: string;
@@ -42,10 +43,10 @@ export const Spinner: FC<SpinnerProps> = ({
   color = "info",
   light,
   size = "md",
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().spinner, customTheme);
+  const theme = resolveTheme([spinnerTheme, getStore().theme?.spinner, customTheme]);
 
   return (
     <span role="status" {...props}>
diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx
index 2bae70bdb..bd9408aa6 100644
--- a/packages/ui/src/components/Table/Table.tsx
+++ b/packages/ui/src/components/Table/Table.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { forwardRef, type ComponentPropsWithRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { TableBody, type FlowbiteTableBodyTheme } from "./TableBody";
 import { TableCell } from "./TableCell";
@@ -11,6 +11,7 @@ import { TableContext } from "./TableContext";
 import { TableHead, type FlowbiteTableHeadTheme } from "./TableHead";
 import { TableHeadCell } from "./TableHeadCell";
 import { TableRow, type FlowbiteTableRowTheme } from "./TableRow";
+import { tableTheme } from "./theme";
 
 export interface FlowbiteTableTheme {
   root: FlowbiteTableRootTheme;
@@ -32,8 +33,8 @@ export interface TableProps extends ComponentPropsWithRef<"table"> {
 }
 
 const TableComponent = forwardRef<HTMLTableElement, TableProps>(
-  ({ children, className, striped, hoverable, theme: customTheme = {}, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().table, customTheme);
+  ({ children, className, striped, hoverable, theme: customTheme, ...props }, ref) => {
+    const theme = resolveTheme([tableTheme, getStore().theme?.table, customTheme]);
 
     return (
       <div data-testid="table-element" className={twMerge(theme.root.wrapper)}>
diff --git a/packages/ui/src/components/Table/TableBody.tsx b/packages/ui/src/components/Table/TableBody.tsx
index eb2836a43..25d9f7605 100644
--- a/packages/ui/src/components/Table/TableBody.tsx
+++ b/packages/ui/src/components/Table/TableBody.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef, type ComponentPropsWithRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { TableBodyContext } from "./TableBodyContext";
 import type { FlowbiteTableCellTheme } from "./TableCell";
@@ -18,10 +18,10 @@ export interface TableBodyProps extends ComponentPropsWithRef<"tbody"> {
 }
 
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+  ({ children, className, theme: customTheme, ...props }, ref) => {
     const { theme: rootTheme } = useTableContext();
 
-    const theme = mergeDeep(rootTheme.body, customTheme);
+    const theme = resolveTheme([rootTheme.body, customTheme], { shouldPrefix: false });
 
     return (
       <TableBodyContext.Provider value={{ theme }}>
diff --git a/packages/ui/src/components/Table/TableCell.tsx b/packages/ui/src/components/Table/TableCell.tsx
index b099aba74..104c85836 100644
--- a/packages/ui/src/components/Table/TableCell.tsx
+++ b/packages/ui/src/components/Table/TableCell.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef, type ComponentPropsWithRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTableBodyContext } from "./TableBodyContext";
 
@@ -15,10 +15,10 @@ export interface TableCellProps extends ComponentPropsWithRef<"td"> {
 }
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+  ({ children, className, theme: customTheme, ...props }, ref) => {
     const { theme: bodyTheme } = useTableBodyContext();
 
-    const theme = mergeDeep(bodyTheme.cell, customTheme);
+    const theme = resolveTheme([bodyTheme.cell, customTheme], { shouldPrefix: false });
 
     return (
       <td className={twMerge(theme.base, className)} ref={ref} {...props}>
diff --git a/packages/ui/src/components/Table/TableHead.tsx b/packages/ui/src/components/Table/TableHead.tsx
index 5c5c5de86..58bbdc559 100644
--- a/packages/ui/src/components/Table/TableHead.tsx
+++ b/packages/ui/src/components/Table/TableHead.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef, type ComponentPropsWithRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTableContext } from "./TableContext";
 import type { FlowbiteTableHeadCellTheme } from "./TableHeadCell";
@@ -18,10 +18,10 @@ export interface TableHeadProps extends ComponentPropsWithRef<"thead"> {
 }
 
 export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
-  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+  ({ children, className, theme: customTheme, ...props }, ref) => {
     const { theme: rootTheme } = useTableContext();
 
-    const theme = mergeDeep(rootTheme.head, customTheme);
+    const theme = resolveTheme([rootTheme.head, customTheme], { shouldPrefix: false });
 
     return (
       <TableHeadContext.Provider value={{ theme }}>
diff --git a/packages/ui/src/components/Table/TableHeadCell.tsx b/packages/ui/src/components/Table/TableHeadCell.tsx
index d9ec19833..cb9041b7b 100644
--- a/packages/ui/src/components/Table/TableHeadCell.tsx
+++ b/packages/ui/src/components/Table/TableHeadCell.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef, type ComponentPropsWithRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTableHeadContext } from "./TableHeadContext";
 
@@ -15,10 +15,10 @@ export interface TableHeadCellProps extends ComponentPropsWithRef<"th"> {
 }
 
 export const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(
-  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+  ({ children, className, theme: customTheme, ...props }, ref) => {
     const { theme: headTheme } = useTableHeadContext();
 
-    const theme = mergeDeep(headTheme.cell, customTheme);
+    const theme = resolveTheme([headTheme.cell, customTheme], { shouldPrefix: false });
 
     return (
       <th className={twMerge(theme.base, className)} ref={ref} {...props}>
diff --git a/packages/ui/src/components/Table/TableRow.tsx b/packages/ui/src/components/Table/TableRow.tsx
index 96ee18c27..a5964f224 100644
--- a/packages/ui/src/components/Table/TableRow.tsx
+++ b/packages/ui/src/components/Table/TableRow.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef, type ComponentPropsWithRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTableContext } from "./TableContext";
 
@@ -17,10 +17,10 @@ export interface TableRowProps extends ComponentPropsWithRef<"tr"> {
 }
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+  ({ children, className, theme: customTheme, ...props }, ref) => {
     const { theme: rootTheme, hoverable, striped } = useTableContext();
 
-    const theme = mergeDeep(rootTheme.row, customTheme);
+    const theme = resolveTheme([rootTheme.row, customTheme], { shouldPrefix: false });
 
     return (
       <tr
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index c4b9f9dfd..25ce7e3d1 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -2,13 +2,14 @@
 
 import type { ComponentProps, ForwardedRef, KeyboardEvent, PropsWithChildren, ReactElement } from "react";
 import { Children, forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import type { TabItemProps } from "./TabItem";
 import { TabItem } from "./TabItem";
+import { tabsTheme } from "./theme";
 
 export interface FlowbiteTabsTheme {
   base: string;
@@ -66,10 +67,10 @@ export interface TabsRef {
 
 const TabsComponent = forwardRef<TabsRef, TabsProps>(
   (
-    { children, className, onActiveTabChange, variant = "default", theme: customTheme = {}, ...props },
+    { children, className, onActiveTabChange, variant = "default", theme: customTheme, ...props },
     ref: ForwardedRef<TabsRef>,
   ) => {
-    const theme = mergeDeep(getTheme().tabs, customTheme);
+    const theme = resolveTheme([tabsTheme, getStore().theme?.tabs, customTheme]);
 
     const id = useId();
     const tabs = useMemo(
diff --git a/packages/ui/src/components/Tabs/theme.ts b/packages/ui/src/components/Tabs/theme.ts
index a031cffd0..d908bce59 100644
--- a/packages/ui/src/components/Tabs/theme.ts
+++ b/packages/ui/src/components/Tabs/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { FlowbiteTabsTheme } from "./Tabs";
 
-export const tabTheme: FlowbiteTabsTheme = createTheme({
+export const tabsTheme: FlowbiteTabsTheme = createTheme({
   base: "flex flex-col gap-2",
   tablist: {
     base: "flex text-center",
diff --git a/packages/ui/src/components/TextInput/TextInput.tsx b/packages/ui/src/components/TextInput/TextInput.tsx
index b651c852d..b2421300e 100644
--- a/packages/ui/src/components/TextInput/TextInput.tsx
+++ b/packages/ui/src/components/TextInput/TextInput.tsx
@@ -1,11 +1,12 @@
 import type { ComponentProps, FC, ReactNode } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
 import { HelperText } from "../HelperText";
+import { textInputTheme } from "./theme";
 
 export interface FlowbiteTextInputTheme {
   base: string;
@@ -63,13 +64,13 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       rightIcon: RightIcon,
       shadow,
       sizing = "md",
-      theme: customTheme = {},
+      theme: customTheme,
       type = "text",
       ...props
     },
     ref,
   ) => {
-    const theme = mergeDeep(getTheme().textInput, customTheme);
+    const theme = resolveTheme([textInputTheme, getStore().theme?.textInput, customTheme]);
 
     return (
       <>
diff --git a/packages/ui/src/components/Textarea/Textarea.tsx b/packages/ui/src/components/Textarea/Textarea.tsx
index 1a4d6703f..bf6f04d98 100644
--- a/packages/ui/src/components/Textarea/Textarea.tsx
+++ b/packages/ui/src/components/Textarea/Textarea.tsx
@@ -1,11 +1,12 @@
 import type { ComponentProps, ReactNode } from "react";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors } from "../Flowbite/FlowbiteTheme";
 import { HelperText } from "../HelperText";
+import { textareaTheme } from "./theme";
 
 export interface FlowbiteTextareaTheme {
   base: string;
@@ -25,8 +26,8 @@ export interface TextareaProps extends Omit<ComponentProps<"textarea">, "color"
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, color = "gray", helperText, shadow, theme: customTheme = {}, ...props }, ref) => {
-    const theme = mergeDeep(getTheme().textarea, customTheme);
+  ({ className, color = "gray", helperText, shadow, theme: customTheme, ...props }, ref) => {
+    const theme = resolveTheme([textareaTheme, getStore().theme?.textarea, customTheme]);
 
     return (
       <>
diff --git a/packages/ui/src/components/ThemeModeScript/ThemeModeScript.spec.tsx b/packages/ui/src/components/ThemeModeScript/ThemeModeScript.spec.tsx
deleted file mode 100644
index 7fb76e808..000000000
--- a/packages/ui/src/components/ThemeModeScript/ThemeModeScript.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { ThemeModeScript } from "./ThemeModeScript";
-
-describe("Components / ThemeModeScript", () => {
-  it("should insert `<script>`", () => {
-    render(
-      <>
-        <ThemeModeScript />
-      </>,
-    );
-
-    expect(document.querySelector("script")).toBeDefined();
-  });
-});
diff --git a/packages/ui/src/components/ThemeModeScript/index.ts b/packages/ui/src/components/ThemeModeScript/index.ts
deleted file mode 100644
index 9894d0396..000000000
--- a/packages/ui/src/components/ThemeModeScript/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ThemeModeScript } from "./ThemeModeScript";
-export type { ThemeModeScriptProps } from "./ThemeModeScript";
diff --git a/packages/ui/src/components/Timeline/Timeline.spec.tsx b/packages/ui/src/components/Timeline/Timeline.spec.tsx
index ed9f27730..2518f3a64 100644
--- a/packages/ui/src/components/Timeline/Timeline.spec.tsx
+++ b/packages/ui/src/components/Timeline/Timeline.spec.tsx
@@ -23,7 +23,7 @@ describe("Components / Timeline", () => {
 
     it("should use `horizontal` classes of content if provided", () => {
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestTimelineNoIcon horizontal={true} />
         </Flowbite>,
       );
@@ -33,7 +33,7 @@ describe("Components / Timeline", () => {
 
     it("should not use `vertical` classes of content if provided", () => {
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestTimelineNoIcon horizontal={true} />
         </Flowbite>,
       );
@@ -58,7 +58,7 @@ describe("Components / Timeline", () => {
 
     it("should use `vertical` classes of content if provided", () => {
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestTimelineNoIcon />
         </Flowbite>,
       );
@@ -68,7 +68,7 @@ describe("Components / Timeline", () => {
 
     it("should not use `horizontal` classes of content if provided", () => {
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestTimelineNoIcon />
         </Flowbite>,
       );
@@ -79,7 +79,7 @@ describe("Components / Timeline", () => {
   describe("Theme", () => {
     it("should use `base` classes of content in horizontal mode", () => {
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestTimelineNoIcon horizontal={true} />
         </Flowbite>,
       );
@@ -89,7 +89,7 @@ describe("Components / Timeline", () => {
 
     it("should use `base` classes of content in vertical mode", () => {
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <TestTimelineNoIcon />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/Timeline/Timeline.tsx b/packages/ui/src/components/Timeline/Timeline.tsx
index d0151a2da..81cd62aa1 100644
--- a/packages/ui/src/components/Timeline/Timeline.tsx
+++ b/packages/ui/src/components/Timeline/Timeline.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { timelineTheme } from "./theme";
 import { TimelineBody } from "./TimelineBody";
 import { TimelineContent } from "./TimelineContent";
 import { TimelineContext } from "./TimelineContext";
@@ -28,14 +29,8 @@ export interface TimelineProps extends ComponentProps<"ol"> {
   theme?: DeepPartial<FlowbiteTimelineTheme>;
 }
 
-const TimelineComponent: FC<TimelineProps> = ({
-  children,
-  className,
-  horizontal,
-  theme: customTheme = {},
-  ...props
-}) => {
-  const theme = mergeDeep(getTheme().timeline, customTheme);
+const TimelineComponent: FC<TimelineProps> = ({ children, className, horizontal, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([timelineTheme, getStore().theme?.timeline, customTheme]);
 
   return (
     <TimelineContext.Provider value={{ theme, horizontal }}>
diff --git a/packages/ui/src/components/Timeline/TimelineBody.tsx b/packages/ui/src/components/Timeline/TimelineBody.tsx
index 313223469..b54406afe 100644
--- a/packages/ui/src/components/Timeline/TimelineBody.tsx
+++ b/packages/ui/src/components/Timeline/TimelineBody.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTimelineContentContext } from "./TimelineContentContext";
 
@@ -14,10 +14,10 @@ export interface TimelineBodyProps extends ComponentProps<"p"> {
   theme?: DeepPartial<FlowbiteTimelineBodyTheme>;
 }
 
-export const TimelineBody: FC<TimelineBodyProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const TimelineBody: FC<TimelineBodyProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: contentTheme } = useTimelineContentContext();
 
-  const theme = mergeDeep(contentTheme.body, customTheme);
+  const theme = resolveTheme([contentTheme.body, customTheme], { shouldPrefix: false });
 
   return (
     <div className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Timeline/TimelineContent.tsx b/packages/ui/src/components/Timeline/TimelineContent.tsx
index ce286b8f2..24b1ca2a1 100644
--- a/packages/ui/src/components/Timeline/TimelineContent.tsx
+++ b/packages/ui/src/components/Timeline/TimelineContent.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteTimelineBodyTheme } from "./TimelineBody";
 import { TimelineContentContext } from "./TimelineContentContext";
@@ -26,16 +26,11 @@ export interface TimelineContentProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteTimelineContentTheme>;
 }
 
-export const TimelineContent: FC<TimelineContentProps> = ({
-  children,
-  className,
-  theme: customTheme = {},
-  ...props
-}) => {
+export const TimelineContent: FC<TimelineContentProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { horizontal } = useTimelineContext();
   const { theme: itemTheme } = useTimelineItemContext();
 
-  const theme = mergeDeep(itemTheme.content, customTheme);
+  const theme = resolveTheme([itemTheme.content, customTheme], { shouldPrefix: false });
 
   return (
     <TimelineContentContext.Provider value={{ theme }}>
diff --git a/packages/ui/src/components/Timeline/TimelineItem.tsx b/packages/ui/src/components/Timeline/TimelineItem.tsx
index 6a709be82..61de06975 100644
--- a/packages/ui/src/components/Timeline/TimelineItem.tsx
+++ b/packages/ui/src/components/Timeline/TimelineItem.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import type { FlowbiteTimelineContentTheme } from "./TimelineContent";
 import { useTimelineContext } from "./TimelineContext";
@@ -22,10 +22,10 @@ export interface TimelineItemProps extends ComponentProps<"li"> {
   theme?: DeepPartial<FlowbiteTimelineItemTheme>;
 }
 
-export const TimelineItem: FC<TimelineItemProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const TimelineItem: FC<TimelineItemProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: rootTheme, horizontal } = useTimelineContext();
 
-  const theme = mergeDeep(rootTheme.item, customTheme);
+  const theme = resolveTheme([rootTheme.item, customTheme], { shouldPrefix: false });
 
   return (
     <TimelineItemContext.Provider value={{ theme }}>
diff --git a/packages/ui/src/components/Timeline/TimelinePoint.tsx b/packages/ui/src/components/Timeline/TimelinePoint.tsx
index 17112af06..cbf7c9bae 100644
--- a/packages/ui/src/components/Timeline/TimelinePoint.tsx
+++ b/packages/ui/src/components/Timeline/TimelinePoint.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTimelineContext } from "./TimelineContext";
 import { useTimelineItemContext } from "./TimelineItemContext";
@@ -32,13 +32,13 @@ export const TimelinePoint: FC<TimelnePointProps> = ({
   children,
   className,
   icon: Icon,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { horizontal } = useTimelineContext();
   const { theme: itemTheme } = useTimelineItemContext();
 
-  const theme = mergeDeep(itemTheme.point, customTheme);
+  const theme = resolveTheme([itemTheme.point, customTheme], { shouldPrefix: false });
 
   return (
     <div
diff --git a/packages/ui/src/components/Timeline/TimelineTime.tsx b/packages/ui/src/components/Timeline/TimelineTime.tsx
index f0e384c7b..125f2515c 100644
--- a/packages/ui/src/components/Timeline/TimelineTime.tsx
+++ b/packages/ui/src/components/Timeline/TimelineTime.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useTimelineContentContext } from "./TimelineContentContext";
 
@@ -14,10 +14,10 @@ export interface TimelineTimeProps extends ComponentProps<"time"> {
   theme?: DeepPartial<FlowbiteTimelineTimeTheme>;
 }
 
-export const TimelineTime: FC<TimelineTimeProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+export const TimelineTime: FC<TimelineTimeProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { theme: contentTheme } = useTimelineContentContext();
 
-  const theme = mergeDeep(contentTheme.time, customTheme);
+  const theme = resolveTheme([contentTheme.time, customTheme], { shouldPrefix: false });
 
   return (
     <time className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Timeline/TimelineTitle.tsx b/packages/ui/src/components/Timeline/TimelineTitle.tsx
index 9006e22e5..8582acbc9 100644
--- a/packages/ui/src/components/Timeline/TimelineTitle.tsx
+++ b/packages/ui/src/components/Timeline/TimelineTitle.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteHeadingLevel } from "../Flowbite";
+import type { FlowbiteHeadingLevel } from "../Flowbite/FlowbiteTheme";
 import { useTimelineContentContext } from "./TimelineContentContext";
 
 export interface FlowbiteTimelineTitleTheme {
@@ -20,12 +20,12 @@ export const TimelineTitle: FC<TimelineTitleProps> = ({
   as: Tag = "h3",
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { theme: contentTheme } = useTimelineContentContext();
 
-  const theme = mergeDeep(contentTheme.title, customTheme);
+  const theme = resolveTheme([contentTheme.title, customTheme], { shouldPrefix: false });
 
   return (
     <Tag className={twMerge(theme.base, className)} {...props}>
diff --git a/packages/ui/src/components/Timeline/theme.ts b/packages/ui/src/components/Timeline/theme.ts
index b9fc290f6..12dba3ac8 100644
--- a/packages/ui/src/components/Timeline/theme.ts
+++ b/packages/ui/src/components/Timeline/theme.ts
@@ -31,7 +31,7 @@ export const timelineTheme: FlowbiteTimelineTheme = createTheme({
     },
     point: {
       horizontal: "flex items-center",
-      line: "hidden h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",
+      line: "hidden h-0.5 w-full bg-gray-200 sm:flex dark:bg-gray-700",
       marker: {
         base: {
           horizontal:
diff --git a/packages/ui/src/components/Toast/Toast.tsx b/packages/ui/src/components/Toast/Toast.tsx
index be8d77c47..5805fd41b 100644
--- a/packages/ui/src/components/Toast/Toast.tsx
+++ b/packages/ui/src/components/Toast/Toast.tsx
@@ -2,10 +2,11 @@
 
 import type { ComponentProps, FC } from "react";
 import { useState } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { toastTheme } from "./theme";
 import type { Duration } from "./ToastContext";
 import { ToastContext } from "./ToastContext";
 import { ToastToggle } from "./ToastToggle";
@@ -37,11 +38,11 @@ const durationClasses: Record<Duration, string> = {
   1000: "duration-1000",
 };
 
-const ToastComponent: FC<ToastProps> = ({ children, className, duration = 300, theme: customTheme = {}, ...props }) => {
+const ToastComponent: FC<ToastProps> = ({ children, className, duration = 300, theme: customTheme, ...props }) => {
   const [isClosed, setIsClosed] = useState(false);
   const [isRemoved, setIsRemoved] = useState(false);
 
-  const theme = mergeDeep(getTheme().toast, customTheme);
+  const theme = resolveTheme([toastTheme, getStore().theme?.toast, customTheme]);
 
   if (isRemoved) {
     return null;
diff --git a/packages/ui/src/components/Toast/ToastToggle.tsx b/packages/ui/src/components/Toast/ToastToggle.tsx
index 904589957..547145d22 100644
--- a/packages/ui/src/components/Toast/ToastToggle.tsx
+++ b/packages/ui/src/components/Toast/ToastToggle.tsx
@@ -2,8 +2,8 @@
 
 import type { ComponentProps, FC, MouseEvent } from "react";
 import { HiX } from "react-icons/hi";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
 import type { DeepPartial } from "../../types";
 import { useToastContext } from "./ToastContext";
 
@@ -21,16 +21,16 @@ export interface ToastToggleProps extends ComponentProps<"button"> {
 export const ToastToggle: FC<ToastToggleProps> = ({
   className,
   onClick,
-  theme: customTheme = {},
+  theme: customTheme,
   xIcon: XIcon = HiX,
   onDismiss,
   ...props
 }) => {
   const { theme: rootTheme, duration, isClosed, isRemoved, setIsClosed, setIsRemoved } = useToastContext();
 
-  const theme = mergeDeep(rootTheme.toggle, customTheme);
+  const theme = resolveTheme([rootTheme.toggle, customTheme], { shouldPrefix: false });
 
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+  function handleClick(e: MouseEvent<HTMLButtonElement>) {
     if (onClick) onClick(e);
 
     if (onDismiss) {
@@ -40,7 +40,7 @@ export const ToastToggle: FC<ToastToggleProps> = ({
 
     setIsClosed(!isClosed);
     setTimeout(() => setIsRemoved(!isRemoved), duration);
-  };
+  }
 
   return (
     <button
diff --git a/packages/ui/src/components/ToggleSwitch/ToggleSwitch.spec.tsx b/packages/ui/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
index 25abbd99c..fcdafcadd 100644
--- a/packages/ui/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
+++ b/packages/ui/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
@@ -140,7 +140,7 @@ describe("Components / Toggle switch", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <ToggleSwitch checked={false} label="Enable" onChange={console.log} type="submit" />
         </Flowbite>,
       );
@@ -160,7 +160,7 @@ describe("Components / Toggle switch", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <ToggleSwitch checked={false} label="Enable" onChange={console.log} type="submit" />
           <ToggleSwitch disabled checked={false} label="Enable" onChange={console.log} type="submit" />
         </Flowbite>,
@@ -181,7 +181,7 @@ describe("Components / Toggle switch", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <ToggleSwitch checked={false} label="Enable" onChange={console.log} type="submit" />
         </Flowbite>,
       );
@@ -203,7 +203,7 @@ describe("Components / Toggle switch", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <ToggleSwitch checked label="Enable" onChange={console.log} type="submit" />
         </Flowbite>,
       );
diff --git a/packages/ui/src/components/ToggleSwitch/ToggleSwitch.tsx b/packages/ui/src/components/ToggleSwitch/ToggleSwitch.tsx
index 97a67f233..779cf966a 100644
--- a/packages/ui/src/components/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/ui/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -1,11 +1,12 @@
 import type { ComponentProps, KeyboardEvent } from "react";
 import { forwardRef, useId } from "react";
-import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { twMerge } from "../../helpers/tailwind-merge";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteTextInputSizes } from "../TextInput";
+import { toggleSwitchTheme } from "./theme";
 
 export interface FlowbiteToggleSwitchTheme {
   root: FlowbiteToggleSwitchRootTheme;
@@ -46,13 +47,13 @@ export const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(
       label,
       name,
       onChange,
-      theme: customTheme = {},
+      theme: customTheme,
       ...props
     },
     ref,
   ) => {
     const id = useId();
-    const theme = mergeDeep(getTheme().toggleSwitch, customTheme);
+    const theme = resolveTheme([toggleSwitchTheme, getStore().theme?.toggleSwitch, customTheme]);
 
     const toggle = (): void => onChange(!checked);
 
diff --git a/packages/ui/src/components/Tooltip/Tooltip.tsx b/packages/ui/src/components/Tooltip/Tooltip.tsx
index 74e2d3c5e..7a7e0cd82 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/components/Tooltip/Tooltip.tsx
@@ -1,9 +1,10 @@
 import type { Placement } from "@floating-ui/core";
 import type { ComponentProps, FC, ReactNode } from "react";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { Floating, type FlowbiteFloatingTheme } from "../Floating";
+import { tooltipTheme } from "./theme";
 
 export type FlowbiteTooltipTheme = FlowbiteFloatingTheme;
 
@@ -28,11 +29,11 @@ export const Tooltip: FC<TooltipProps> = ({
   content,
   placement = "top",
   style = "dark",
-  theme: customTheme = {},
+  theme: customTheme,
   trigger = "hover",
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().tooltip, customTheme);
+  const theme = resolveTheme([tooltipTheme, getStore().theme?.tooltip, customTheme]);
 
   return (
     <Floating
diff --git a/packages/ui/src/helpers/apply-prefix.ts b/packages/ui/src/helpers/apply-prefix.ts
new file mode 100644
index 000000000..399570001
--- /dev/null
+++ b/packages/ui/src/helpers/apply-prefix.ts
@@ -0,0 +1,45 @@
+export function applyPrefix(classNames: string, prefix: string, separator = ":"): string {
+  classNames = classNames.trim();
+  prefix = prefix.trim();
+  separator = separator.trim();
+
+  if (!classNames.length || !prefix.length) {
+    return classNames;
+  }
+
+  return classNames
+    .split(/\s+/)
+    .map((className) => {
+      className = className.trim();
+
+      if (!className.length) {
+        return className;
+      }
+
+      if (className.startsWith("[") && className.endsWith("]")) {
+        return className;
+      }
+
+      const parts = className.split(separator);
+      const baseClass = parts.pop() ?? "";
+
+      let prefixedBaseClass = baseClass;
+
+      const modifiers = ["!", "-"].reduce<string[]>((acc, modifier) => {
+        if (prefixedBaseClass.startsWith(modifier)) {
+          acc.push(modifier);
+          prefixedBaseClass = prefixedBaseClass.replace(modifier, "");
+        }
+        return acc;
+      }, []);
+
+      if (prefixedBaseClass.startsWith(prefix)) {
+        return className;
+      }
+
+      prefixedBaseClass = modifiers.join("") + prefix + prefixedBaseClass;
+
+      return `${parts.join(separator)}${parts.length > 0 ? separator : ""}${prefixedBaseClass}`;
+    })
+    .join(" ");
+}
diff --git a/packages/ui/src/helpers/clone-deep.spec.ts b/packages/ui/src/helpers/clone-deep.spec.ts
deleted file mode 100644
index 5610d3a21..000000000
--- a/packages/ui/src/helpers/clone-deep.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { cloneDeep } from "./clone-deep";
-
-describe("Helpers / cloneDeep", () => {
-  it("should clone a simple object", () => {
-    const source = { key: "value" };
-    const cloned = cloneDeep(source);
-    expect(cloned).toEqual(source); // Check for deep equality
-    expect(cloned).not.toBe(source); // Ensure it's a deep clone, not the same reference
-  });
-
-  it("should handle null gracefully", () => {
-    const source = null;
-    const cloned = cloneDeep(source);
-    expect(cloned).toBeNull();
-  });
-
-  it("should handle undefined gracefully", () => {
-    const source = undefined;
-    const cloned = cloneDeep(source);
-    expect(cloned).toBeUndefined();
-  });
-});
diff --git a/packages/ui/src/helpers/clone-deep.ts b/packages/ui/src/helpers/clone-deep.ts
deleted file mode 100644
index fd7a5fb98..000000000
--- a/packages/ui/src/helpers/clone-deep.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { isObject } from "./is-object";
-
-export function cloneDeep<T>(source: T): T {
-  if (!isObject(source)) {
-    return source;
-  }
-
-  const output: Record<string, unknown> = {};
-
-  for (const key in source) {
-    output[key] = cloneDeep(source[key]);
-  }
-
-  return output as T;
-}
diff --git a/packages/ui/src/helpers/deep-merge.ts b/packages/ui/src/helpers/deep-merge.ts
new file mode 100644
index 000000000..32bb636b8
--- /dev/null
+++ b/packages/ui/src/helpers/deep-merge.ts
@@ -0,0 +1,27 @@
+import { deepmergeCustom } from "deepmerge-ts";
+
+export function deepMergeStrings(merge: (values: string[]) => string) {
+  return deepmergeCustom({
+    mergeOthers: (values, utils) => {
+      if (values.some((value) => typeof value === "string")) {
+        const strings = values.filter((value) => typeof value === "string");
+        const stringMap = new Set<string>();
+        const uniqueStrings: string[] = [];
+
+        for (const string of strings) {
+          const parts = [...new Set(string.split(/\s+/))];
+
+          uniqueStrings.push(parts.filter((part) => !stringMap.has(part)).join(" "));
+
+          for (const part of parts) {
+            stringMap.add(part);
+          }
+        }
+
+        return merge(uniqueStrings);
+      }
+
+      return utils.actions.defaultMerge;
+    },
+  });
+}
diff --git a/packages/ui/src/helpers/is-object.spec.ts b/packages/ui/src/helpers/is-object.spec.ts
deleted file mode 100644
index bbf5c9a04..000000000
--- a/packages/ui/src/helpers/is-object.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { isObject } from "./is-object";
-
-describe("isObject function", () => {
-  it("should return true for an empty object", () => {
-    expect(isObject({})).toBe(true);
-  });
-
-  it("should return true for a non-empty object", () => {
-    expect(isObject({ key: "value" })).toBe(true);
-  });
-
-  it("should return false for a string", () => {
-    expect(isObject("string")).toBe(false);
-  });
-
-  it("should return false for an array", () => {
-    expect(isObject([1, 2, 3])).toBe(false);
-  });
-
-  it("should return false for null", () => {
-    expect(isObject(null)).toBe(false);
-  });
-
-  it("should return false for undefined", () => {
-    expect(isObject(undefined)).toBe(false);
-  });
-});
diff --git a/packages/ui/src/helpers/is-object.ts b/packages/ui/src/helpers/is-object.ts
deleted file mode 100644
index bee9cdbe0..000000000
--- a/packages/ui/src/helpers/is-object.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Check if provided parameter is plain object
- * @param item
- * @returns boolean
- */
-export function isObject(item: unknown): item is Record<string, unknown> {
-  return item !== null && typeof item === "object" && item.constructor === Object;
-}
diff --git a/packages/ui/src/helpers/merge-deep.spec.ts b/packages/ui/src/helpers/merge-deep.spec.ts
deleted file mode 100644
index a53021f70..000000000
--- a/packages/ui/src/helpers/merge-deep.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mergeDeep } from "./merge-deep";
-
-describe("Helpers / Merge deep", () => {
-  it("should merge keys that do not exist in target", () => {
-    const target = {};
-    const source = { foo: "bar" };
-
-    const result = mergeDeep(target, source);
-
-    expect(result).toEqual({ foo: "bar" });
-  });
-
-  it("should merge keys that do not exist in source", () => {
-    const target = { foo: "bar" };
-    const source = {};
-
-    const result = mergeDeep(target, source);
-
-    expect(result).toEqual({ foo: "bar" });
-  });
-
-  it("should override target key if source key is identical", () => {
-    const target = { foo: { bar: "baz" } };
-    const source = { foo: { bar: "foobar" } };
-
-    const result = mergeDeep(target, source);
-
-    expect(result).toEqual({ foo: { bar: "foobar" } });
-  });
-
-  it("should merge keys and do not mutate target and source", () => {
-    const target = {
-      foo: { a: 1, b: { c: 2, f: { g: 3 } } },
-      baz: 5,
-    };
-
-    const source = {
-      foo: { b: { c: 3, d: 3 } },
-      bar: { a: 1 },
-    };
-
-    const result = mergeDeep(target, source);
-
-    expect(result).toEqual({ foo: { a: 1, b: { c: 3, d: 3, f: { g: 3 } } }, baz: 5, bar: { a: 1 } });
-
-    expect(target).toEqual({
-      foo: { a: 1, b: { c: 2, f: { g: 3 } } },
-      baz: 5,
-    });
-
-    expect(source).toEqual({
-      foo: { b: { c: 3, d: 3 } },
-      bar: { a: 1 },
-    });
-
-    result.foo.b.c = 97;
-    result.baz = 98;
-    result.bar.a = 99;
-
-    expect(result).toEqual({ foo: { a: 1, b: { c: 97, d: 3, f: { g: 3 } } }, baz: 98, bar: { a: 99 } });
-
-    expect(target).toEqual({
-      foo: { a: 1, b: { c: 2, f: { g: 3 } } },
-      baz: 5,
-    });
-
-    expect(source).toEqual({
-      foo: { b: { c: 3, d: 3 } },
-      bar: { a: 1 },
-    });
-  });
-});
diff --git a/packages/ui/src/helpers/merge-deep.ts b/packages/ui/src/helpers/merge-deep.ts
deleted file mode 100644
index 858890af8..000000000
--- a/packages/ui/src/helpers/merge-deep.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cloneDeep } from "./clone-deep";
-import { isObject } from "./is-object";
-
-/**
- * Merge and deep copy the values of all of the enumerable own properties of target object from source object to a new object
- * @param target The target object to get properties from.
- * @param source The source object from which to copy properties.
- * @return A new merged and deep copied object.
- */
-export function mergeDeep<T extends object, S extends object>(target: T, source: S): T & S {
-  if (isObject(source) && Object.keys(source).length === 0) {
-    return cloneDeep({ ...target, ...source });
-  }
-
-  const output = { ...target, ...source };
-
-  if (isObject(source) && isObject(target)) {
-    for (const key in source) {
-      if (isObject(source[key]) && key in target && isObject(target[key])) {
-        (output as Record<string, unknown>)[key] = mergeDeep(target[key] as object, source[key] as object);
-      } else {
-        (output as Record<string, unknown>)[key] = isObject(source[key]) ? cloneDeep(source[key]) : source[key];
-      }
-    }
-  }
-
-  return output;
-}
diff --git a/packages/ui/src/helpers/resolve-theme.ts b/packages/ui/src/helpers/resolve-theme.ts
new file mode 100644
index 000000000..ca86622d4
--- /dev/null
+++ b/packages/ui/src/helpers/resolve-theme.ts
@@ -0,0 +1,66 @@
+import { getStore } from "../store";
+import { applyPrefix } from "./apply-prefix";
+import { deepMergeStrings } from "./deep-merge";
+import { twMerge } from "./tailwind-merge";
+
+const cache = new Map();
+
+/**
+ * Adds prefix to `base` and merges the result with `...custom`
+ *
+ * @param base base theme
+ * @param custom custom themes
+ * @returns merged `[base, ...custom]`
+ */
+export function resolveTheme<T>(
+  [base, ...custom]: [
+    /** base theme */
+    T,
+    /** custom themes */
+    ...unknown[],
+  ],
+  options: Partial<{
+    shouldPrefix: boolean;
+  }> = {},
+): T {
+  const { prefix } = getStore();
+  const { shouldPrefix = true } = options ?? {};
+
+  const cacheKey = JSON.stringify({ base, custom, options, prefix });
+  const cacheValue = cache.get(cacheKey);
+
+  if (cacheValue) {
+    return cacheValue;
+  }
+
+  const baseTheme = structuredClone(base);
+
+  if (prefix && shouldPrefix) {
+    stringIterator(baseTheme, (value) => (value ? applyPrefix(value, prefix) : value));
+  }
+
+  const theme = deepMergeStrings(twMerge)(baseTheme, ...custom) as T;
+  cache.set(cacheKey, theme);
+
+  return theme;
+}
+
+function stringIterator<T>(input: T, callback: (value: string) => string): void {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function iterate(value: any) {
+    if (typeof value === "string") {
+      return callback(value) as T;
+    } else if (Array.isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        value[i] = iterate(value[i]);
+      }
+    } else if (typeof value === "object" && value !== null) {
+      for (const key in value) {
+        value[key] = iterate(value[key]);
+      }
+    }
+    return value;
+  }
+
+  iterate(input);
+}
diff --git a/packages/ui/src/helpers/tailwind-merge.ts b/packages/ui/src/helpers/tailwind-merge.ts
new file mode 100644
index 000000000..ffdc2043e
--- /dev/null
+++ b/packages/ui/src/helpers/tailwind-merge.ts
@@ -0,0 +1,20 @@
+import { ClassNameValue, extendTailwindMerge } from "tailwind-merge";
+import { getStore } from "../store";
+
+const cache = new Map<string | undefined, ReturnType<typeof extendTailwindMerge>>();
+
+export function twMerge(...classLists: ClassNameValue[]) {
+  const { prefix } = getStore();
+
+  const cacheKey = prefix;
+  const cacheValue = cache.get(cacheKey);
+
+  if (cacheValue) {
+    return cacheValue(...classLists);
+  }
+
+  const twMergeFn = extendTailwindMerge({ prefix });
+  cache.set(cacheKey, twMergeFn);
+
+  return twMergeFn(...classLists);
+}
diff --git a/packages/ui/src/hooks/use-is-mounted.ts b/packages/ui/src/hooks/use-is-mounted.ts
deleted file mode 100644
index 18d6e43ab..000000000
--- a/packages/ui/src/hooks/use-is-mounted.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-export function useIsMounted() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
-  return mounted;
-}
diff --git a/packages/ui/src/hooks/use-theme-mode.ts b/packages/ui/src/hooks/use-theme-mode.ts
index d3bbce0f6..9bceeea1d 100644
--- a/packages/ui/src/hooks/use-theme-mode.ts
+++ b/packages/ui/src/hooks/use-theme-mode.ts
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { isClient } from "../helpers/is-client";
 import { useWatchLocalStorageValue } from "../hooks/use-watch-localstorage-value";
-import { getThemeMode } from "../theme-store";
+import { getStore } from "../store";
 
 const DEFAULT_MODE: ThemeMode = "light";
 const LS_THEME_MODE = "flowbite-theme-mode";
@@ -11,15 +11,16 @@ const SYNC_THEME_MODE = "flowbite-theme-mode-sync";
 
 export type ThemeMode = "light" | "dark" | "auto";
 
-export const useThemeMode = () => {
-  const [mode, setMode] = useState<ThemeMode>(getInitialMode(getThemeMode()));
+export function useThemeMode() {
+  const store = getStore();
+  const [mode, setMode] = useState<ThemeMode>(getInitialMode(store.mode));
 
   /**
    * Persist `mode` in local storage and add/remove `dark` class on `html`
    */
   useEffect(() => {
     setModeInLS(mode);
-    setModeInDOM(mode);
+    setModeInDOM(mode, store.prefix);
   }, []);
 
   /**
@@ -28,7 +29,7 @@ export const useThemeMode = () => {
   useWatchLocalStorageValue({
     key: LS_THEME_MODE,
     onChange(newValue) {
-      if (newValue) return handleSetMode(newValue as ThemeMode);
+      if (newValue) handleSetMode(newValue as ThemeMode);
     },
   });
 
@@ -40,17 +41,17 @@ export const useThemeMode = () => {
   /**
    * Sets `mode` to a given value: `light | dark` | `auto`
    */
-  const handleSetMode = (mode: ThemeMode) => {
+  function handleSetMode(mode: ThemeMode) {
     setMode(mode);
     setModeInLS(mode);
-    setModeInDOM(mode);
+    setModeInDOM(mode, store.prefix);
     document.dispatchEvent(new CustomEvent(SYNC_THEME_MODE, { detail: mode }));
-  };
+  }
 
   /**
    * Toggles between: `light | dark`
    */
-  const toggleMode = () => {
+  function toggleMode() {
     let newMode = mode;
 
     if (newMode === "auto") newMode = computeModeValue(newMode);
@@ -58,24 +59,24 @@ export const useThemeMode = () => {
     newMode = newMode === "dark" ? "light" : "dark";
 
     handleSetMode(newMode);
-  };
+  }
 
   /**
    * Sets the value to `<Flowbite theme={{ mode }}>` prop
    */
-  const clearMode = () => {
-    const newMode = getThemeMode() ?? DEFAULT_MODE;
+  function clearMode() {
+    const newMode = mode ?? DEFAULT_MODE;
 
     handleSetMode(newMode);
-  };
+  }
 
   return { mode, computedMode: computeModeValue(mode), setMode: handleSetMode, toggleMode, clearMode };
-};
+}
 
 /**
  * Custom event listener on `SYNC_THEME_MODE`
  */
-const useSyncMode = (onChange: (mode: ThemeMode) => void) => {
+function useSyncMode(onChange: (mode: ThemeMode) => void) {
   useEffect(() => {
     function handleSync(e: Event) {
       const mode = (e as CustomEvent<ThemeMode>).detail;
@@ -86,46 +87,48 @@ const useSyncMode = (onChange: (mode: ThemeMode) => void) => {
     document.addEventListener(SYNC_THEME_MODE, handleSync);
     return () => document.removeEventListener(SYNC_THEME_MODE, handleSync);
   }, []);
-};
+}
 
 /**
  * Sets the give value in local storage
  */
-const setModeInLS = (mode: ThemeMode) => localStorage.setItem(LS_THEME_MODE, mode);
+function setModeInLS(mode: ThemeMode) {
+  localStorage.setItem(LS_THEME_MODE, mode);
+}
 
 /**
  * Add or remove class `dark` on `html` element
  */
-const setModeInDOM = (mode: ThemeMode) => {
+function setModeInDOM(mode: ThemeMode, prefix = "") {
   const computedMode = computeModeValue(mode);
 
   if (computedMode === "dark") {
-    document.documentElement.classList.add("dark");
+    document.documentElement.classList.add(`${prefix}dark`);
   } else {
-    document.documentElement.classList.remove("dark");
+    document.documentElement.classList.remove(`${prefix}dark`);
   }
-};
+}
 
-const getInitialMode = (defaultMode?: ThemeMode): ThemeMode => {
+function getInitialMode(defaultMode?: ThemeMode): ThemeMode {
   if (!isClient()) return DEFAULT_MODE;
 
   const LSMode = localStorage.getItem(LS_THEME_MODE) as ThemeMode | undefined;
 
   return LSMode ?? defaultMode ?? DEFAULT_MODE;
-};
+}
 
 /**
  * Parse `auto` mode value to either `light` or `dark`
  * @returns `light` | `dark`
  */
-const computeModeValue = (mode: ThemeMode): ThemeMode => {
+function computeModeValue(mode: ThemeMode): ThemeMode {
   return mode === "auto" ? prefersColorScheme() : mode;
-};
+}
 
 /**
  * Get browser prefered color scheme
  * @returns `light` | `dark`
  */
-const prefersColorScheme = (): ThemeMode => {
+function prefersColorScheme(): ThemeMode {
   return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-};
+}
diff --git a/packages/ui/src/hooks/use-watch-localstorage-value.ts b/packages/ui/src/hooks/use-watch-localstorage-value.ts
index c05203a0d..2c99aed61 100644
--- a/packages/ui/src/hooks/use-watch-localstorage-value.ts
+++ b/packages/ui/src/hooks/use-watch-localstorage-value.ts
@@ -5,13 +5,13 @@ import { useEffect } from "react";
 /**
  * Triggers `onChange` when another browser tab instance mutates the LS value.
  */
-export const useWatchLocalStorageValue = ({
+export function useWatchLocalStorageValue({
   key: watchKey,
   onChange,
 }: {
   key: string;
   onChange(newValue: string | null): void;
-}) => {
+}) {
   function handleStorageChange({ key, newValue }: StorageEvent) {
     if (key === watchKey) onChange(newValue);
   }
@@ -20,4 +20,4 @@ export const useWatchLocalStorageValue = ({
     window.addEventListener("storage", handleStorageChange);
     return () => window.removeEventListener("storage", handleStorageChange);
   }, []);
-};
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 96cf95a5f..fb16565bb 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -17,7 +17,6 @@ export * from "./components/Drawer";
 export * from "./components/Dropdown";
 export * from "./components/FileInput";
 export * from "./components/FloatingLabel";
-export * from "./components/Flowbite";
 export * from "./components/Footer";
 export * from "./components/HelperText";
 export * from "./components/HR";
@@ -39,22 +38,18 @@ export * from "./components/Sidebar";
 export * from "./components/Spinner";
 export * from "./components/Table";
 export * from "./components/Tabs";
-export * from "./components/TextInput";
 export * from "./components/Textarea";
-export * from "./components/ThemeModeScript";
+export * from "./components/TextInput";
 export * from "./components/Timeline";
 export * from "./components/Toast";
 export * from "./components/ToggleSwitch";
 export * from "./components/Tooltip";
 
+// helpers
+export { createTheme } from "./helpers/create-theme";
+
 // hooks
 export * from "./hooks/use-theme-mode";
 
 // theme
 export * from "./theme";
-
-// helpers
-export { createTheme } from "./helpers/create-theme";
-
-// theme store
-export { getTheme, getThemeMode } from "./theme-store";
diff --git a/packages/ui/src/store/index.ts b/packages/ui/src/store/index.ts
new file mode 100644
index 000000000..df10099ac
--- /dev/null
+++ b/packages/ui/src/store/index.ts
@@ -0,0 +1,41 @@
+import type { FlowbiteTheme } from "../components/Flowbite/FlowbiteTheme";
+import { deepMergeStrings } from "../helpers/deep-merge";
+import { twMerge } from "../helpers/tailwind-merge";
+import type { ThemeMode } from "../hooks/use-theme-mode";
+import type { DeepPartial } from "../types";
+
+export type StoreProps = DeepPartial<{
+  mode: ThemeMode;
+  prefix: string;
+  theme: FlowbiteTheme;
+}>;
+
+interface Store {
+  data: StoreProps;
+}
+
+const store: Store = {
+  data: {},
+};
+
+export function setStore(data: StoreProps = {}, options: { override?: boolean } = {}) {
+  const { mode, prefix, theme } = data;
+
+  if (mode) {
+    store.data.mode = mode;
+  }
+  if (prefix) {
+    store.data.prefix = prefix.trim();
+  }
+  if ("theme" in data) {
+    if (options.override) {
+      store.data.theme = theme;
+    } else {
+      store.data.theme = deepMergeStrings(twMerge)(store.data.theme, theme);
+    }
+  }
+}
+
+export function getStore(): StoreProps {
+  return structuredClone(store.data);
+}
diff --git a/packages/ui/src/store/init/client.tsx b/packages/ui/src/store/init/client.tsx
new file mode 100644
index 000000000..301e81451
--- /dev/null
+++ b/packages/ui/src/store/init/client.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import type { StoreInitProps } from ".";
+import { setStore } from "..";
+
+export function StoreInitClient({ override, ...props }: StoreInitProps) {
+  setStore(props, { override });
+
+  return null;
+}
diff --git a/packages/ui/src/store/init/index.tsx b/packages/ui/src/store/init/index.tsx
new file mode 100644
index 000000000..66c03a6cb
--- /dev/null
+++ b/packages/ui/src/store/init/index.tsx
@@ -0,0 +1,16 @@
+import { StoreProps } from "..";
+import { StoreInitClient } from "./client";
+import { StoreInitServer } from "./server";
+
+export interface StoreInitProps extends StoreProps {
+  override?: boolean;
+}
+
+export function StoreInit(props: StoreInitProps) {
+  return (
+    <>
+      <StoreInitServer {...props} />
+      <StoreInitClient {...props} />
+    </>
+  );
+}
diff --git a/packages/ui/src/store/init/server.tsx b/packages/ui/src/store/init/server.tsx
new file mode 100644
index 000000000..c90e38cd5
--- /dev/null
+++ b/packages/ui/src/store/init/server.tsx
@@ -0,0 +1,8 @@
+import type { StoreInitProps } from ".";
+import { setStore } from "..";
+
+export function StoreInitServer({ override, ...props }: StoreInitProps) {
+  setStore(props, { override });
+
+  return null;
+}
diff --git a/packages/ui/src/tailwind.ts b/packages/ui/src/tailwind.ts
deleted file mode 100644
index 3450756b0..000000000
--- a/packages/ui/src/tailwind.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import flowbitePlugin from "flowbite/plugin";
-
-interface Content {
-  /**
-   * Path to `node_modules` where `flowbite-react` is installed
-   *
-   * ===============================================
-   *
-   * For monorepo setup where `flowbite-react` is installed in the root `node_modules` but used in `apps/web` directory
-   * @example
-   * ```
-   * // tailwind.config.(js|cjs|mjs) file
-   *
-   * // cjs
-   * const flowbite = require("flowbite-react/tailwind");
-   * // esm
-   * import flowbite from "flowbite-react/tailwind";
-   *
-   * {
-   *   content: [
-   *     // ...
-   *     flowbite.content({ base: "../../" })
-   *   ],
-   *   plugins: [
-   *     // ...
-   *     flowbite.plugin()
-   *   ]
-   * }
-   * ```
-   *
-   * @default "./"
-   */
-  base?: string;
-}
-
-export function content({ base = "./" }: Content = {}) {
-  const path = "node_modules/flowbite-react/dist/esm/**/*.mjs";
-
-  return `${base}${path}`;
-}
-
-export function plugin() {
-  return flowbitePlugin;
-}
diff --git a/packages/ui/src/tailwind/config.ts b/packages/ui/src/tailwind/config.ts
new file mode 100644
index 000000000..da5ba9d45
--- /dev/null
+++ b/packages/ui/src/tailwind/config.ts
@@ -0,0 +1,18 @@
+import { theme } from "./theme";
+import type { PluginOptions } from "./types";
+import { resolveClassList, resolvePrefix } from "./utils";
+
+import type { Config } from "tailwindcss";
+
+export function getConfig(options: PluginOptions = {}): Partial<Config> {
+  return {
+    safelist: getSafelist(options),
+    theme: {
+      extend: theme,
+    },
+  };
+}
+
+export function getSafelist(options: PluginOptions = {}): Config["safelist"] {
+  return resolvePrefix(resolveClassList(options.components), options.prefix, options.separator);
+}
diff --git a/packages/ui/src/tailwind/index.ts b/packages/ui/src/tailwind/index.ts
new file mode 100644
index 000000000..54b677d96
--- /dev/null
+++ b/packages/ui/src/tailwind/index.ts
@@ -0,0 +1,10 @@
+import plugin from "tailwindcss/plugin";
+import { getConfig } from "./config";
+import type { PluginOptions } from "./types";
+
+export default plugin.withOptions<PluginOptions>(
+  // plugin
+  () => () => {},
+  // config
+  (options) => getConfig(options),
+);
diff --git a/packages/ui/src/tailwind/theme.ts b/packages/ui/src/tailwind/theme.ts
new file mode 100644
index 000000000..acfd922b7
--- /dev/null
+++ b/packages/ui/src/tailwind/theme.ts
@@ -0,0 +1,153 @@
+import type { Config } from "tailwindcss";
+
+export const boxShadow = {
+  "sm-light": "0 2px 5px 0px rgba(255, 255, 255, 0.08)",
+} as const;
+
+export const baseColors = {
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827",
+  },
+  red: {
+    50: "#FDF2F2",
+    100: "#FDE8E8",
+    200: "#FBD5D5",
+    300: "#F8B4B4",
+    400: "#F98080",
+    500: "#F05252",
+    600: "#E02424",
+    700: "#C81E1E",
+    800: "#9B1C1C",
+    900: "#771D1D",
+  },
+  orange: {
+    50: "#FFF8F1",
+    100: "#FEECDC",
+    200: "#FCD9BD",
+    300: "#FDBA8C",
+    400: "#FF8A4C",
+    500: "#FF5A1F",
+    600: "#D03801",
+    700: "#B43403",
+    800: "#8A2C0D",
+    900: "#771D1D",
+  },
+  yellow: {
+    50: "#FDFDEA",
+    100: "#FDF6B2",
+    200: "#FCE96A",
+    300: "#FACA15",
+    400: "#E3A008",
+    500: "#C27803",
+    600: "#9F580A",
+    700: "#8E4B10",
+    800: "#723B13",
+    900: "#633112",
+  },
+  green: {
+    50: "#F3FAF7",
+    100: "#DEF7EC",
+    200: "#BCF0DA",
+    300: "#84E1BC",
+    400: "#31C48D",
+    500: "#0E9F6E",
+    600: "#057A55",
+    700: "#046C4E",
+    800: "#03543F",
+    900: "#014737",
+  },
+  teal: {
+    50: "#EDFAFA",
+    100: "#D5F5F6",
+    200: "#AFECEF",
+    300: "#7EDCE2",
+    400: "#16BDCA",
+    500: "#0694A2",
+    600: "#047481",
+    700: "#036672",
+    800: "#05505C",
+    900: "#014451",
+  },
+  blue: {
+    50: "#EBF5FF",
+    100: "#E1EFFE",
+    200: "#C3DDFD",
+    300: "#A4CAFE",
+    400: "#76A9FA",
+    500: "#3F83F8",
+    600: "#1C64F2",
+    700: "#1A56DB",
+    800: "#1E429F",
+    900: "#233876",
+  },
+  indigo: {
+    50: "#F0F5FF",
+    100: "#E5EDFF",
+    200: "#CDDBFE",
+    300: "#B4C6FC",
+    400: "#8DA2FB",
+    500: "#6875F5",
+    600: "#5850EC",
+    700: "#5145CD",
+    800: "#42389D",
+    900: "#362F78",
+  },
+  purple: {
+    50: "#F6F5FF",
+    100: "#EDEBFE",
+    200: "#DCD7FE",
+    300: "#CABFFD",
+    400: "#AC94FA",
+    500: "#9061F9",
+    600: "#7E3AF2",
+    700: "#6C2BD9",
+    800: "#5521B5",
+    900: "#4A1D96",
+  },
+  pink: {
+    50: "#FDF2F8",
+    100: "#FCE8F3",
+    200: "#FAD1E8",
+    300: "#F8B4D9",
+    400: "#F17EB8",
+    500: "#E74694",
+    600: "#D61F69",
+    700: "#BF125D",
+    800: "#99154B",
+    900: "#751A3D",
+  },
+} as const;
+
+export const semanticColors = {
+  primary: {
+    50: "#EBF5FF",
+    100: "#E1EFFE",
+    200: "#C3DDFD",
+    300: "#A4CAFE",
+    400: "#76A9FA",
+    500: "#3F83F8",
+    600: "#1C64F2",
+    700: "#1A56DB",
+    800: "#1E429F",
+    900: "#233876",
+  },
+} as const;
+
+export const colors = {
+  ...baseColors,
+  ...semanticColors,
+} as const;
+
+export const theme: Config["theme"] = {
+  boxShadow,
+  colors,
+};
diff --git a/packages/ui/src/tailwind/types.ts b/packages/ui/src/tailwind/types.ts
new file mode 100644
index 000000000..05e9d9c01
--- /dev/null
+++ b/packages/ui/src/tailwind/types.ts
@@ -0,0 +1,20 @@
+import type { CLASS_LIST_MAP } from "./class-list";
+
+export type ClassList = string[];
+
+export type ComponentName = keyof typeof CLASS_LIST_MAP;
+
+export type PluginOptions = Partial<{
+  /**
+   * Prefix to apply to base class list
+   */
+  prefix: string;
+  /**
+   * Separator to apply to base class list
+   */
+  separator: string;
+  /**
+   * Components to compile class list
+   */
+  components: ComponentName[];
+}>;
diff --git a/packages/ui/src/tailwind/utils.ts b/packages/ui/src/tailwind/utils.ts
new file mode 100644
index 000000000..b4279b795
--- /dev/null
+++ b/packages/ui/src/tailwind/utils.ts
@@ -0,0 +1,36 @@
+import { applyPrefix } from "../helpers/apply-prefix";
+import { CLASS_LIST_MAP } from "./class-list";
+import type { ClassList, ComponentName } from "./types";
+
+export function resolvePrefix(classList: ClassList, prefix?: string, separator?: string) {
+  prefix = prefix?.trim();
+
+  return prefix ? classList.map((className) => applyPrefix(className, prefix, separator)) : classList;
+}
+
+export function resolveClassList(components?: ComponentName[]): ClassList {
+  let resolvedClassList: string[] = [];
+
+  if (components?.length) {
+    const invalidNames: string[] = [];
+
+    for (const name of components) {
+      if (name in CLASS_LIST_MAP) {
+        resolvedClassList.push(...CLASS_LIST_MAP[name]);
+      } else {
+        invalidNames.push(name);
+      }
+    }
+
+    if (invalidNames.length) {
+      console.error(
+        `\nflowbite-react/tailwind - invalid component${invalidNames.length ? "s" : ""}:\n"${invalidNames.join(", ")}"`,
+      );
+      console.info(`\nAvailable components:\n${Object.keys(CLASS_LIST_MAP).join(", ")}\n`);
+    }
+  } else {
+    resolvedClassList = [...new Set(Object.values(CLASS_LIST_MAP).flat())];
+  }
+
+  return resolvedClassList;
+}
diff --git a/packages/ui/src/theme-store/index.tsx b/packages/ui/src/theme-store/index.tsx
deleted file mode 100644
index 258a4477a..000000000
--- a/packages/ui/src/theme-store/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { CustomFlowbiteTheme, FlowbiteTheme } from "../components/Flowbite";
-import { cloneDeep } from "../helpers/clone-deep";
-import { mergeDeep } from "../helpers/merge-deep";
-import type { ThemeMode } from "../hooks/use-theme-mode";
-import { theme as defaultTheme } from "../theme";
-
-interface ThemeStore {
-  mode?: ThemeMode;
-  theme: FlowbiteTheme;
-}
-
-const store: ThemeStore = {
-  theme: cloneDeep(defaultTheme),
-};
-
-export function setThemeMode(mode?: ThemeMode) {
-  store.mode = mode;
-}
-
-export function getThemeMode(): ThemeMode | undefined {
-  return store.mode;
-}
-
-export function setTheme(theme?: CustomFlowbiteTheme) {
-  if (theme) store.theme = mergeDeep(defaultTheme, theme);
-}
-
-export function getTheme(): FlowbiteTheme {
-  return cloneDeep(store.theme);
-}
diff --git a/packages/ui/src/theme-store/init/client.tsx b/packages/ui/src/theme-store/init/client.tsx
deleted file mode 100644
index 9de52115e..000000000
--- a/packages/ui/src/theme-store/init/client.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-"use client";
-
-import { setTheme } from "..";
-import type { CustomFlowbiteTheme } from "../../components/Flowbite";
-
-interface Props {
-  theme?: CustomFlowbiteTheme;
-}
-
-export function ThemeClientInit({ theme }: Props) {
-  setTheme(theme);
-
-  return null;
-}
diff --git a/packages/ui/src/theme-store/init/index.tsx b/packages/ui/src/theme-store/init/index.tsx
deleted file mode 100644
index d2e88fe29..000000000
--- a/packages/ui/src/theme-store/init/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { CustomFlowbiteTheme } from "../../components/Flowbite";
-import type { ThemeMode } from "../../hooks/use-theme-mode";
-import { ThemeClientInit } from "./client";
-import { ThemeModeInit } from "./mode";
-import { ThemeServerInit } from "./server";
-
-interface Props {
-  mode?: ThemeMode;
-  theme?: CustomFlowbiteTheme;
-}
-
-export function ThemeInit({ mode, theme }: Props) {
-  return (
-    <>
-      <ThemeModeInit mode={mode} />
-      <ThemeServerInit theme={theme} />
-      <ThemeClientInit theme={theme} />
-    </>
-  );
-}
diff --git a/packages/ui/src/theme-store/init/mode.tsx b/packages/ui/src/theme-store/init/mode.tsx
deleted file mode 100644
index df4ccc380..000000000
--- a/packages/ui/src/theme-store/init/mode.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { setThemeMode } from "..";
-import { useThemeMode, type ThemeMode } from "../../hooks/use-theme-mode";
-
-interface Props {
-  mode?: ThemeMode;
-}
-
-export function ThemeModeInit({ mode }: Props) {
-  if (mode) setThemeMode(mode);
-
-  useThemeMode();
-
-  return null;
-}
diff --git a/packages/ui/src/theme-store/init/server.tsx b/packages/ui/src/theme-store/init/server.tsx
deleted file mode 100644
index 4dbdaff73..000000000
--- a/packages/ui/src/theme-store/init/server.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { setTheme } from "..";
-import type { CustomFlowbiteTheme } from "../../components/Flowbite";
-
-interface Props {
-  theme?: CustomFlowbiteTheme;
-}
-
-export function ThemeServerInit({ theme }: Props) {
-  setTheme(theme);
-
-  return null;
-}
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
deleted file mode 100644
index e4027d669..000000000
--- a/packages/ui/src/theme.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { FlowbiteTheme } from ".";
-import { accordionTheme } from "./components/Accordion/theme";
-import { alertTheme } from "./components/Alert/theme";
-import { avatarTheme } from "./components/Avatar/theme";
-import { badgeTheme } from "./components/Badge/theme";
-import { blockquoteTheme } from "./components/Blockquote/theme";
-import { breadcrumbTheme } from "./components/Breadcrumb/theme";
-import { buttonGroupTheme, buttonTheme } from "./components/Button/theme";
-import { cardTheme } from "./components/Card/theme";
-import { carouselTheme } from "./components/Carousel/theme";
-import { checkboxTheme } from "./components/Checkbox/theme";
-import { clipboardTheme } from "./components/Clipboard/theme";
-import { darkThemeToggleTheme } from "./components/DarkThemeToggle/theme";
-import { datePickerTheme } from "./components/Datepicker/theme";
-import { drawerTheme } from "./components/Drawer/theme";
-import { dropdownTheme } from "./components/Dropdown/theme";
-import { fileInputTheme } from "./components/FileInput/theme";
-import { floatingLabelTheme } from "./components/FloatingLabel/theme";
-import { footerTheme } from "./components/Footer/theme";
-import { helperTextTheme } from "./components/HelperText/theme";
-import { hrTheme } from "./components/HR/theme";
-import { kbdTheme } from "./components/Kbd/theme";
-import { labelTheme } from "./components/Label/theme";
-import { listTheme } from "./components/List/theme";
-import { listGroupTheme } from "./components/ListGroup/theme";
-import { megaMenuTheme } from "./components/MegaMenu/theme";
-import { modalTheme } from "./components/Modal/theme";
-import { navbarTheme } from "./components/Navbar/theme";
-import { paginationTheme } from "./components/Pagination/theme";
-import { popoverTheme } from "./components/Popover/theme";
-import { progressTheme } from "./components/Progress/theme";
-import { radioTheme } from "./components/Radio/theme";
-import { rangeSliderTheme } from "./components/RangeSlider/theme";
-import { ratingAdvancedTheme, ratingTheme } from "./components/Rating/theme";
-import { selectTheme } from "./components/Select/theme";
-import { sidebarTheme } from "./components/Sidebar/theme";
-import { spinnerTheme } from "./components/Spinner/theme";
-import { tableTheme } from "./components/Table/theme";
-import { tabTheme } from "./components/Tabs/theme";
-import { textareaTheme } from "./components/Textarea/theme";
-import { textInputTheme } from "./components/TextInput/theme";
-import { timelineTheme } from "./components/Timeline/theme";
-import { toastTheme } from "./components/Toast/theme";
-import { toggleSwitchTheme } from "./components/ToggleSwitch/theme";
-import { tooltipTheme } from "./components/Tooltip/theme";
-
-export const theme: FlowbiteTheme = {
-  accordion: accordionTheme,
-  alert: alertTheme,
-  avatar: avatarTheme,
-  badge: badgeTheme,
-  blockquote: blockquoteTheme,
-  breadcrumb: breadcrumbTheme,
-  button: buttonTheme,
-  buttonGroup: buttonGroupTheme,
-  card: cardTheme,
-  carousel: carouselTheme,
-  checkbox: checkboxTheme,
-  clipboard: clipboardTheme,
-  datepicker: datePickerTheme,
-  darkThemeToggle: darkThemeToggleTheme,
-  drawer: drawerTheme,
-  dropdown: dropdownTheme,
-  fileInput: fileInputTheme,
-  floatingLabel: floatingLabelTheme,
-  footer: footerTheme,
-  helperText: helperTextTheme,
-  hr: hrTheme,
-  kbd: kbdTheme,
-  label: labelTheme,
-  listGroup: listGroupTheme,
-  list: listTheme,
-  megaMenu: megaMenuTheme,
-  modal: modalTheme,
-  navbar: navbarTheme,
-  pagination: paginationTheme,
-  popover: popoverTheme,
-  progress: progressTheme,
-  radio: radioTheme,
-  rangeSlider: rangeSliderTheme,
-  rating: ratingTheme,
-  ratingAdvanced: ratingAdvancedTheme,
-  select: selectTheme,
-  textInput: textInputTheme,
-  textarea: textareaTheme,
-  toggleSwitch: toggleSwitchTheme,
-  sidebar: sidebarTheme,
-  spinner: spinnerTheme,
-  table: tableTheme,
-  tabs: tabTheme,
-  timeline: timelineTheme,
-  toast: toastTheme,
-  tooltip: tooltipTheme,
-};
diff --git a/packages/ui/src/theme/config.tsx b/packages/ui/src/theme/config.tsx
new file mode 100644
index 000000000..087331a3d
--- /dev/null
+++ b/packages/ui/src/theme/config.tsx
@@ -0,0 +1,8 @@
+import { type StoreProps } from "../store";
+import { StoreInit } from "../store/init";
+
+export type ThemeConfigProps = Pick<StoreProps, "mode" | "prefix">;
+
+export function ThemeConfig({ mode, prefix }: ThemeConfigProps) {
+  return <StoreInit mode={mode} prefix={prefix} />;
+}
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
new file mode 100644
index 000000000..49b7dc366
--- /dev/null
+++ b/packages/ui/src/theme/index.ts
@@ -0,0 +1,98 @@
+import { accordionTheme } from "../components/Accordion/theme";
+import { alertTheme } from "../components/Alert/theme";
+import { avatarTheme } from "../components/Avatar/theme";
+import { badgeTheme } from "../components/Badge/theme";
+import { blockquoteTheme } from "../components/Blockquote/theme";
+import { breadcrumbTheme } from "../components/Breadcrumb/theme";
+import { buttonGroupTheme, buttonTheme } from "../components/Button/theme";
+import { cardTheme } from "../components/Card/theme";
+import { carouselTheme } from "../components/Carousel/theme";
+import { checkboxTheme } from "../components/Checkbox/theme";
+import { clipboardTheme } from "../components/Clipboard/theme";
+import { darkThemeToggleTheme } from "../components/DarkThemeToggle/theme";
+import { datePickerTheme } from "../components/Datepicker/theme";
+import { drawerTheme } from "../components/Drawer/theme";
+import { dropdownTheme } from "../components/Dropdown/theme";
+import { fileInputTheme } from "../components/FileInput/theme";
+import { floatingLabelTheme } from "../components/FloatingLabel/theme";
+import type { FlowbiteTheme } from "../components/Flowbite/FlowbiteTheme";
+import { footerTheme } from "../components/Footer/theme";
+import { helperTextTheme } from "../components/HelperText/theme";
+import { hrTheme } from "../components/HR/theme";
+import { kbdTheme } from "../components/Kbd/theme";
+import { labelTheme } from "../components/Label/theme";
+import { listTheme } from "../components/List/theme";
+import { listGroupTheme } from "../components/ListGroup/theme";
+import { megaMenuTheme } from "../components/MegaMenu/theme";
+import { modalTheme } from "../components/Modal/theme";
+import { navbarTheme } from "../components/Navbar/theme";
+import { paginationTheme } from "../components/Pagination/theme";
+import { popoverTheme } from "../components/Popover/theme";
+import { progressTheme } from "../components/Progress/theme";
+import { radioTheme } from "../components/Radio/theme";
+import { rangeSliderTheme } from "../components/RangeSlider/theme";
+import { ratingAdvancedTheme, ratingTheme } from "../components/Rating/theme";
+import { selectTheme } from "../components/Select/theme";
+import { sidebarTheme } from "../components/Sidebar/theme";
+import { spinnerTheme } from "../components/Spinner/theme";
+import { tableTheme } from "../components/Table/theme";
+import { tabsTheme } from "../components/Tabs/theme";
+import { textareaTheme } from "../components/Textarea/theme";
+import { textInputTheme } from "../components/TextInput/theme";
+import { timelineTheme } from "../components/Timeline/theme";
+import { toastTheme } from "../components/Toast/theme";
+import { toggleSwitchTheme } from "../components/ToggleSwitch/theme";
+import { tooltipTheme } from "../components/Tooltip/theme";
+
+export const theme: FlowbiteTheme = {
+  accordion: accordionTheme,
+  alert: alertTheme,
+  avatar: avatarTheme,
+  badge: badgeTheme,
+  blockquote: blockquoteTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  buttonGroup: buttonGroupTheme,
+  card: cardTheme,
+  carousel: carouselTheme,
+  checkbox: checkboxTheme,
+  clipboard: clipboardTheme,
+  darkThemeToggle: darkThemeToggleTheme,
+  datepicker: datePickerTheme,
+  drawer: drawerTheme,
+  dropdown: dropdownTheme,
+  fileInput: fileInputTheme,
+  floatingLabel: floatingLabelTheme,
+  footer: footerTheme,
+  helperText: helperTextTheme,
+  hr: hrTheme,
+  kbd: kbdTheme,
+  label: labelTheme,
+  list: listTheme,
+  listGroup: listGroupTheme,
+  megaMenu: megaMenuTheme,
+  modal: modalTheme,
+  navbar: navbarTheme,
+  pagination: paginationTheme,
+  popover: popoverTheme,
+  progress: progressTheme,
+  radio: radioTheme,
+  rangeSlider: rangeSliderTheme,
+  rating: ratingTheme,
+  ratingAdvanced: ratingAdvancedTheme,
+  select: selectTheme,
+  sidebar: sidebarTheme,
+  spinner: spinnerTheme,
+  table: tableTheme,
+  tabs: tabsTheme,
+  textarea: textareaTheme,
+  textInput: textInputTheme,
+  timeline: timelineTheme,
+  toast: toastTheme,
+  toggleSwitch: toggleSwitchTheme,
+  tooltip: tooltipTheme,
+};
+
+export { ThemeConfig, type ThemeConfigProps } from "./config";
+export { ThemeModeScript, type ThemeModeScriptProps } from "./mode-script";
+export { ThemeProvider, type ThemeProviderProps } from "./provider";
diff --git a/packages/ui/src/components/ThemeModeScript/ThemeModeScript.tsx b/packages/ui/src/theme/mode-script.tsx
similarity index 54%
rename from packages/ui/src/components/ThemeModeScript/ThemeModeScript.tsx
rename to packages/ui/src/theme/mode-script.tsx
index ad207482c..b4e430854 100644
--- a/packages/ui/src/components/ThemeModeScript/ThemeModeScript.tsx
+++ b/packages/ui/src/theme/mode-script.tsx
@@ -1,30 +1,46 @@
 import React from "react";
-import type { ThemeMode } from "../../hooks/use-theme-mode";
+import type { ThemeMode } from "../hooks/use-theme-mode";
+import { getStore } from "../store";
 
 export interface ThemeModeScriptProps extends React.ComponentPropsWithoutRef<"script"> {
   mode?: ThemeMode;
+  /**
+   * "light" | "dark" | "auto"
+   */
+  defaultMode?: ThemeMode;
+  /**
+   * @default "flowbite-theme-mode"
+   */
+  localStorageKey?: string;
 }
 
-export const ThemeModeScript = ({ mode, ...others }: ThemeModeScriptProps) => {
+export function ThemeModeScript({
+  mode,
+  defaultMode = "light",
+  localStorageKey = "flowbite-theme-mode",
+  ...others
+}: ThemeModeScriptProps) {
   return (
     <script
       {...others}
       data-flowbite-theme-mode-script
       dangerouslySetInnerHTML={{
-        __html: getScript({ mode, defaultMode: "light", localStorageKey: "flowbite-theme-mode" }),
+        __html: getScript({ mode, defaultMode, localStorageKey, prefix: getStore().prefix ?? "" }),
       }}
     />
   );
-};
+}
 
 function getScript({
   mode,
   defaultMode,
   localStorageKey,
+  prefix,
 }: {
   mode?: ThemeMode;
   defaultMode: ThemeMode;
   localStorageKey: string;
+  prefix: string;
 }) {
   return `
     try {
@@ -33,9 +49,9 @@ function getScript({
         mode === "auto" ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : mode;
 
       if (computedMode === "dark") {
-        document.documentElement.classList.add("dark");
+        document.documentElement.classList.add("${prefix}dark");
       } else {
-        document.documentElement.classList.remove("dark");
+        document.documentElement.classList.remove("${prefix}dark");
       }
     } catch (e) {}
   `;
diff --git a/packages/ui/src/theme/provider.tsx b/packages/ui/src/theme/provider.tsx
new file mode 100644
index 000000000..dac94e571
--- /dev/null
+++ b/packages/ui/src/theme/provider.tsx
@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from "react";
+import { getStore, type StoreProps } from "../store";
+import { StoreInit } from "../store/init";
+
+export type ThemeProviderProps = PropsWithChildren<Pick<StoreProps, "theme">>;
+
+export function ThemeProvider({ children, theme }: ThemeProviderProps) {
+  const { theme: prevTheme } = getStore();
+
+  return (
+    <>
+      <StoreInit theme={theme} />
+      {children}
+      <StoreInit theme={prevTheme} override />
+    </>
+  );
+}
diff --git a/packages/ui/tailwind.config.cjs b/packages/ui/tailwind.config.cjs
index 95acabaf8..2a9dda3b6 100644
--- a/packages/ui/tailwind.config.cjs
+++ b/packages/ui/tailwind.config.cjs
@@ -1,8 +1,10 @@
+const { theme } = require("./src/tailwind/theme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {},
+    extend: theme,
   },
-  plugins: [require("flowbite/plugin")],
+  plugins: [],
 };