diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml
index 72d92d65..074d4ec2 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yaml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yaml
@@ -1,6 +1,6 @@
 name: '🐞 Bug Report'
 description: Report a bug
-title: '[Bug] '
+title: '[Bug] {SCOPE} - '
 labels: 'Type: bug'
 assignees: MGREMY
 
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yaml b/.github/ISSUE_TEMPLATE/feature_request.yaml
index f2d22640..378b739d 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yaml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yaml
@@ -1,6 +1,6 @@
 name: '🚀 Feature Request'
 description: Suggest a feature
-title: '[Feature] '
+title: '[Feature] {SCOPE} - '
 labels: 'Type: enhancement'
 assignees: MGREMY
 
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ae653028..8c303548 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -34,7 +34,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Release new version 🛠
-        run: pnpm lib:release -- --ci --verbose --skip-nx-cache --dryRyn=${{ github.event.inputs.dryRun }}
+        run: pnpm lib:release -- --ci --verbose --skip-nx-cache --dryRun=${{ github.event.inputs.dryRun }}
         env:
           GH_TOKEN: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100755
index 00000000..0a4b97de
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100644
new mode 100755
index 73f8ac46..47d64bbb
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm all:lint
+pnpm dlx lint-staged --concurrent false --relative
\ No newline at end of file
diff --git a/apps/docs/docs/components/accordion/_always-open.component.html b/apps/docs/docs/components/accordion/_always-open.component.html
index 81dae317..34bb2fca 100644
--- a/apps/docs/docs/components/accordion/_always-open.component.html
+++ b/apps/docs/docs/components/accordion/_always-open.component.html
@@ -2,33 +2,37 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is an open-source library of interactive components built on top of Tailwind CSS
-        including buttons, dropdowns, modals, navbars, and more.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out this guide to learn how to
-        <a
-          class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-          href="https://flowbite.com/docs/getting-started/introduction/">
-          Get started
-        </a>
-        and start developing websites even faster with components on top of Tailwind CSS.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is first conceptualized and designed using the Figma software so everything you see
-        in the library has a design equivalent in our Figma file.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out the
-        <a href="https://flowbite.com/figma/">Figma design system</a>
-        based on the utility classes from Tailwind CSS and components from Flowbite.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -36,35 +40,37 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        The main difference is that the core components from Flowbite are open source under the MIT
-        license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies
-        on smaller and standalone components, whereas Tailwind UI offers sections of pages.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
-        there is no technical reason stopping you from using the best of two worlds.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Learn more about these technologies :
-      </p>
-      <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://flowbite.com/pro/">
-            Flowbite Pro
-          </a>
-        </li>
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://tailwindui.com/"
-            rel="nofollow">
-            Tailwind UI
-          </a>
-        </li>
-      </ul>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/accordion/_color-option.component.html b/apps/docs/docs/components/accordion/_color-option.component.html
index e189a1ce..70a8b5c4 100644
--- a/apps/docs/docs/components/accordion/_color-option.component.html
+++ b/apps/docs/docs/components/accordion/_color-option.component.html
@@ -2,33 +2,37 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is an open-source library of interactive components built on top of Tailwind CSS
-        including buttons, dropdowns, modals, navbars, and more.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out this guide to learn how to
-        <a
-          class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-          href="https://flowbite.com/docs/getting-started/introduction/">
-          Get started
-        </a>
-        and start developing websites even faster with components on top of Tailwind CSS.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is first conceptualized and designed using the Figma software so everything you see
-        in the library has a design equivalent in our Figma file.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out the
-        <a href="https://flowbite.com/figma/">Figma design system</a>
-        based on the utility classes from Tailwind CSS and components from Flowbite.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -36,35 +40,37 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        The main difference is that the core components from Flowbite are open source under the MIT
-        license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies
-        on smaller and standalone components, whereas Tailwind UI offers sections of pages.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
-        there is no technical reason stopping you from using the best of two worlds.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Learn more about these technologies :
-      </p>
-      <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://flowbite.com/pro/">
-            Flowbite Pro
-          </a>
-        </li>
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://tailwindui.com/"
-            rel="nofollow">
-            Tailwind UI
-          </a>
-        </li>
-      </ul>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/accordion/_default.component.html b/apps/docs/docs/components/accordion/_default.component.html
index 5addbcf3..e8a49f73 100644
--- a/apps/docs/docs/components/accordion/_default.component.html
+++ b/apps/docs/docs/components/accordion/_default.component.html
@@ -2,33 +2,37 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is an open-source library of interactive components built on top of Tailwind CSS
-        including buttons, dropdowns, modals, navbars, and more.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out this guide to learn how to
-        <a
-          class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-          href="https://flowbite.com/docs/getting-started/introduction/">
-          Get started
-        </a>
-        and start developing websites even faster with components on top of Tailwind CSS.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is first conceptualized and designed using the Figma software so everything you see
-        in the library has a design equivalent in our Figma file.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out the
-        <a href="https://flowbite.com/figma/">Figma design system</a>
-        based on the utility classes from Tailwind CSS and components from Flowbite.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -36,35 +40,37 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        The main difference is that the core components from Flowbite are open source under the MIT
-        license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies
-        on smaller and standalone components, whereas Tailwind UI offers sections of pages.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
-        there is no technical reason stopping you from using the best of two worlds.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Learn more about these technologies :
-      </p>
-      <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://flowbite.com/pro/">
-            Flowbite Pro
-          </a>
-        </li>
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://tailwindui.com/"
-            rel="nofollow">
-            Tailwind UI
-          </a>
-        </li>
-      </ul>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/accordion/_flush.component.html b/apps/docs/docs/components/accordion/_flush.component.html
index d1ab051b..7fcac230 100644
--- a/apps/docs/docs/components/accordion/_flush.component.html
+++ b/apps/docs/docs/components/accordion/_flush.component.html
@@ -2,33 +2,37 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is an open-source library of interactive components built on top of Tailwind CSS
-        including buttons, dropdowns, modals, navbars, and more.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out this guide to learn how to
-        <a
-          class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-          href="https://flowbite.com/docs/getting-started/introduction/">
-          Get started
-        </a>
-        and start developing websites even faster with components on top of Tailwind CSS.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Flowbite is first conceptualized and designed using the Figma software so everything you see
-        in the library has a design equivalent in our Figma file.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Check out the
-        <a href="https://flowbite.com/figma/">Figma design system</a>
-        based on the utility classes from Tailwind CSS and components from Flowbite.
-      </p>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -36,35 +40,37 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        The main difference is that the core components from Flowbite are open source under the MIT
-        license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies
-        on smaller and standalone components, whereas Tailwind UI offers sections of pages.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
-        there is no technical reason stopping you from using the best of two worlds.
-      </p>
-      <p class="text-base font-normal text-gray-600 dark:text-gray-400">
-        Learn more about these technologies :
-      </p>
-      <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://flowbite.com/pro/">
-            Flowbite Pro
-          </a>
-        </li>
-        <li>
-          <a
-            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
-            href="https://tailwindui.com/"
-            rel="nofollow">
-            Tailwind UI
-          </a>
-        </li>
-      </ul>
+      <span class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </span>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/src/app/app.component.html b/apps/docs/src/app/app.component.html
index 805d7dc2..61c470da 100644
--- a/apps/docs/src/app/app.component.html
+++ b/apps/docs/src/app/app.component.html
@@ -4,19 +4,17 @@
   [footerContent]="footerContent">
   <flowbite-navbar
     ngDocCustomNavbar
-    [isFixed]="true"
-    [customStyle]="{
-      root: { base: 'flex flex-wrap items-center 2xl:justify-between p-4 2xl:px-60' },
-    }">
+    [isFixed]="true">
     <div class="flex flex-row flex-1 items-center gap-2">
-      <flowbite-navbar-icon-button
-        *ngIf="!isLandingPage"
-        class="block lg:hidden"
-        (click)="sidebarService.toggle()">
-        <flowbite-icon
-          svgIcon="outline:bars"
-          class="h-5 w-5 block" />
-      </flowbite-navbar-icon-button>
+      @if (!isLandingPage) {
+        <flowbite-navbar-icon-button
+          class="block lg:hidden"
+          (click)="sidebarService.toggle()">
+          <flowbite-icon
+            svgIcon="outline:bars"
+            class="h-5 w-5 block" />
+        </flowbite-navbar-icon-button>
+      }
       <flowbite-navbar-brand
         flowbiteRouterLink
         routerLink="/">
@@ -31,7 +29,7 @@
       </flowbite-navbar-brand>
       <ng-doc-search class="hidden lg:block pl-2" />
     </div>
-    <flowbite-navbar-content class="hidden xl:block pr-1">
+    <flowbite-navbar-content>
       <flowbite-navbar-item
         flowbiteRouterLink
         flowbiteRouterLinkActive
@@ -111,9 +109,11 @@
     </div>
   </flowbite-navbar>
 
-  <ng-doc-sidebar />
+  <ng-doc-sidebar class="mt-2" />
 
-  <router-outlet></router-outlet>
+  <div class="mt-2">
+    <router-outlet />
+  </div>
 
   <ng-template #footerContent>
     <section class="flex flex-col items-center">
diff --git a/apps/docs/src/app/app.component.ts b/apps/docs/src/app/app.component.ts
index 57cab91a..2ab231c0 100644
--- a/apps/docs/src/app/app.component.ts
+++ b/apps/docs/src/app/app.component.ts
@@ -15,7 +15,7 @@ import {
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
 
-import { Location, NgIf } from '@angular/common';
+import { Location } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import {
@@ -30,7 +30,6 @@ import {
   standalone: true,
   imports: [
     RouterOutlet,
-    NgIf,
     NgDocRootComponent,
     NgDocSidebarComponent,
     NgDocThemeToggleComponent,
diff --git a/libs/flowbite-angular/accordion/accordion-content.component.ts b/libs/flowbite-angular/accordion/accordion-content.component.ts
index 0b3bb71a..27551e22 100644
--- a/libs/flowbite-angular/accordion/accordion-content.component.ts
+++ b/libs/flowbite-angular/accordion/accordion-content.component.ts
@@ -6,7 +6,7 @@ import type { AccordionColors } from './accordion.theme';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import type { DeepPartial } from 'flowbite-angular';
 
-import { NgClass, NgIf } from '@angular/common';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,13 +20,18 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass],
   selector: 'flowbite-accordion-content',
-  template: `
-    <ng-container *ngIf="accordionPanelComponent.isOpen()">
-      <ng-content />
-    </ng-container>
-  `,
+  template: `<ng-content />`,
+  host: {
+    '[@isOpenAnimation]': 'accordionPanelComponent.isOpen()',
+  },
+  animations: [
+    trigger('isOpenAnimation', [
+      state('true', style({ height: '*' })),
+      state('false', style({ height: '0px' })),
+      transition('true <=> false', animate('300ms')),
+    ]),
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -57,7 +62,6 @@ export class AccordionContentComponent extends BaseComponent<AccordionContentCla
   public override fetchClass(): AccordionContentClass {
     return this.themeService.getClasses({
       color: this.accordionPanelComponent.accordionComponent.color(),
-      isOpen: booleanToFlowbiteBoolean(this.accordionPanelComponent.isOpen()),
       isFlush: booleanToFlowbiteBoolean(this.accordionPanelComponent.accordionComponent.isFlush()),
       customStyle: this.customStyle(),
     });
diff --git a/libs/flowbite-angular/accordion/accordion-content.theme.service.ts b/libs/flowbite-angular/accordion/accordion-content.theme.service.ts
index 416e1f1e..210913b7 100644
--- a/libs/flowbite-angular/accordion/accordion-content.theme.service.ts
+++ b/libs/flowbite-angular/accordion/accordion-content.theme.service.ts
@@ -37,7 +37,6 @@ export class AccordionContentThemeService
       rootClass: twMerge(
         theme.root.base,
         theme.root.color[properties.color],
-        theme.root.isOpen[properties.isOpen],
         theme.root.isFlush[properties.isFlush]
       ),
     };
diff --git a/libs/flowbite-angular/accordion/accordion-content.theme.ts b/libs/flowbite-angular/accordion/accordion-content.theme.ts
index 16b8f68f..67c6631b 100644
--- a/libs/flowbite-angular/accordion/accordion-content.theme.ts
+++ b/libs/flowbite-angular/accordion/accordion-content.theme.ts
@@ -8,7 +8,6 @@ import { createTheme } from 'flowbite-angular/utils';
  */
 export interface AccordionContentProperties {
   color: keyof AccordionColors;
-  isOpen: keyof FlowbiteBoolean;
   isFlush: keyof FlowbiteBoolean;
   customStyle: DeepPartial<AccordionContentTheme>;
 }
@@ -20,7 +19,6 @@ export interface AccordionContentTheme {
   root: {
     base: string;
     color: AccordionColors;
-    isOpen: FlowbiteBoolean;
     isFlush: FlowbiteBoolean;
   };
 }
@@ -30,7 +28,7 @@ export interface AccordionContentTheme {
  */
 export const accordionContentTheme: AccordionContentTheme = createTheme({
   root: {
-    base: 'flex flex-col',
+    base: 'flex flex-col overflow-hidden',
     color: {
       primary: 'border-primary-200 dark:border-primary-700',
       light: 'border-gray-200 dark:border-gray-700',
@@ -39,10 +37,6 @@ export const accordionContentTheme: AccordionContentTheme = createTheme({
       green: 'border-green-200 dark:border-green-700',
       yellow: 'border-yellow-200 dark:border-yellow-700',
     },
-    isOpen: {
-      enabled: 'p-5',
-      disabled: '',
-    },
     isFlush: {
       enabled: '',
       disabled: 'border-x border-t group-last:border-b',
diff --git a/libs/flowbite-angular/accordion/accordion-panel.component.ts b/libs/flowbite-angular/accordion/accordion-panel.component.ts
index 519d1dbd..5630f6fa 100644
--- a/libs/flowbite-angular/accordion/accordion-panel.component.ts
+++ b/libs/flowbite-angular/accordion/accordion-panel.component.ts
@@ -24,7 +24,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [],
   selector: 'flowbite-accordion-panel',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/accordion/accordion-title.component.ts b/libs/flowbite-angular/accordion/accordion-title.component.ts
index 6038cee9..88963e64 100644
--- a/libs/flowbite-angular/accordion/accordion-title.component.ts
+++ b/libs/flowbite-angular/accordion/accordion-title.component.ts
@@ -8,7 +8,6 @@ import type { DeepPartial } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass } from '@angular/common';
 import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -24,10 +23,10 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 @Component({
   standalone: true,
-  imports: [NgClass, IconComponent],
+  imports: [IconComponent],
   selector: 'flowbite-accordion-title',
   template: `
-    <h2 [ngClass]="contentClasses().textClass">
+    <h2 [class]="contentClasses().textClass">
       <ng-content />
     </h2>
     <flowbite-icon
diff --git a/libs/flowbite-angular/accordion/accordion.component.ts b/libs/flowbite-angular/accordion/accordion.component.ts
index f2be15dd..521eb10c 100644
--- a/libs/flowbite-angular/accordion/accordion.component.ts
+++ b/libs/flowbite-angular/accordion/accordion.component.ts
@@ -5,7 +5,6 @@ import { AccordionThemeService } from './accordion.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,7 +19,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-accordion',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/alert/alert.component.ts b/libs/flowbite-angular/alert/alert.component.ts
index 048020b7..38e65995 100644
--- a/libs/flowbite-angular/alert/alert.component.ts
+++ b/libs/flowbite-angular/alert/alert.component.ts
@@ -3,11 +3,11 @@ import { AlertThemeService } from './alert.theme.service';
 
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import type { DeepPartial } from 'flowbite-angular';
-import { ButtonComponent } from 'flowbite-angular/button';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CLOSE_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { NgTemplateOutlet } from '@angular/common';
 import type { OnInit, TemplateRef } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -23,7 +23,7 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, NgTemplateOutlet, IconComponent, ButtonComponent],
+  imports: [NgTemplateOutlet, IconComponent],
   selector: 'flowbite-alert',
   template: `
     <div class="flex items-center">
@@ -31,23 +31,31 @@ import { DomSanitizer } from '@angular/platform-browser';
       <div>
         <ng-content />
       </div>
-      <button
-        type="button"
-        [ngClass]="contentClasses()!.closeButtonClass"
-        *ngIf="isDismissable()"
-        aria-label="Close"
-        (click)="onDismissClick()">
-        <span class="sr-only">Close</span>
-        <flowbite-icon
-          svgIcon="flowbite-angular:close"
-          class="h-5 w-5" />
-      </button>
+      @if (isDismissable()) {
+        <button
+          type="button"
+          [class]="contentClasses()!.closeButtonClass"
+          aria-label="Close"
+          (click)="onDismissClick()">
+          <span class="sr-only">Close</span>
+          <flowbite-icon
+            svgIcon="flowbite-angular:close"
+            class="h-5 w-5" />
+        </button>
+      }
     </div>
     <ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
   `,
   host: {
     '[attr.role]': 'alert',
+    '[@onDestroyAnimation]': '',
   },
+  animations: [
+    trigger('onDestroyAnimation', [
+      transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),
+      transition(':leave', [animate('300ms', style({ opacity: 0 }))]),
+    ]),
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/libs/flowbite-angular/badge/badge.component.ts b/libs/flowbite-angular/badge/badge.component.ts
index 06069cb2..9198783f 100644
--- a/libs/flowbite-angular/badge/badge.component.ts
+++ b/libs/flowbite-angular/badge/badge.component.ts
@@ -5,7 +5,6 @@ import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -19,7 +18,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-badge',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts b/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts
index 17b97369..dbfb8337 100644
--- a/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts
+++ b/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts
@@ -9,7 +9,6 @@ import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { CHEVRON_RIGHT_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -25,11 +24,11 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, NgTemplateOutlet, IconComponent],
+  imports: [IconComponent],
   selector: 'flowbite-breadcrumb-item',
   template: `
     <flowbite-icon
-      [ngClass]="contentClasses().breadcrumbIconClass"
+      [class]="contentClasses().breadcrumbIconClass"
       svgIcon="flowbite-angular:chevron-right" />
     <ng-content />
   `,
diff --git a/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts b/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts
index f5a8c4d7..5f997c05 100644
--- a/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts
+++ b/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts
@@ -5,7 +5,6 @@ import { BreadcrumbThemeService } from './breadcrumb.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,7 +19,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-breadcrumb',
   template: `<ng-content />`,
   host: {
diff --git a/libs/flowbite-angular/button/button.component.ts b/libs/flowbite-angular/button/button.component.ts
index 0c63ff75..834fc6b0 100644
--- a/libs/flowbite-angular/button/button.component.ts
+++ b/libs/flowbite-angular/button/button.component.ts
@@ -12,7 +12,7 @@ import { ButtonThemeService } from './button.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -26,20 +26,18 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, NgTemplateOutlet],
+  imports: [NgTemplateOutlet],
   selector: 'flowbite-button',
   template: `
-    <span
-      *ngIf="gradientDuoTone() && fill() === 'outline'; else default"
-      [ngClass]="contentClasses().spanClass">
-      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
-    </span>
+    @if (gradientDuoTone() && fill() === 'outline') {
+      <span [class]="contentClasses().spanClass">
+        <ng-content *ngTemplateOutlet="content" />
+      </span>
+    } @else {
+      <ng-content *ngTemplateOutlet="content" />
+    }
 
-    <ng-template #default>
-      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
-    </ng-template>
-
-    <ng-template #contentOutlet>
+    <ng-template #content>
       <ng-content />
     </ng-template>
   `,
diff --git a/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts b/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts
index c52e1825..32400c52 100644
--- a/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts
+++ b/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts
@@ -6,7 +6,6 @@ import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { MOON_SVG_ICON, SUN_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass, NgIf } from '@angular/common';
 import {
   afterNextRender,
   ChangeDetectionStrategy,
@@ -22,7 +21,7 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, IconComponent],
+  imports: [IconComponent],
   selector: 'flowbite-dark-theme-toggle',
   template: `
     <flowbite-icon
diff --git a/libs/flowbite-angular/dropdown/dropdown-divider.component.ts b/libs/flowbite-angular/dropdown/dropdown-divider.component.ts
index 9dd0cab9..37c04633 100644
--- a/libs/flowbite-angular/dropdown/dropdown-divider.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-divider.component.ts
@@ -4,7 +4,6 @@ import { DropdownComponent } from './dropdown.component';
 
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,7 +17,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-dropdown-divider',
   template: ``,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/dropdown/dropdown-header.component.ts b/libs/flowbite-angular/dropdown/dropdown-header.component.ts
index 438c38a3..aad69190 100644
--- a/libs/flowbite-angular/dropdown/dropdown-header.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-header.component.ts
@@ -4,7 +4,6 @@ import { DropdownComponent } from './dropdown.component';
 
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,10 +17,9 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-dropdown-header',
   template: `
-    <div [ngClass]="contentClasses().root">
+    <div [class]="contentClasses().root">
       <ng-content />
     </div>
     <div class="my-1 h-px bg-gray-100 dark:bg-gray-600"></div>
diff --git a/libs/flowbite-angular/dropdown/dropdown-item.component.ts b/libs/flowbite-angular/dropdown/dropdown-item.component.ts
index 48b1ba5a..ec9d0314 100644
--- a/libs/flowbite-angular/dropdown/dropdown-item.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-item.component.ts
@@ -5,7 +5,6 @@ import { DropdownComponent } from './dropdown.component';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -19,7 +18,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-dropdown-item',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/dropdown/dropdown.component.ts b/libs/flowbite-angular/dropdown/dropdown.component.ts
index 907d6a0d..9df1cda4 100644
--- a/libs/flowbite-angular/dropdown/dropdown.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown.component.ts
@@ -9,36 +9,32 @@ import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass } from '@angular/common';
-import type { AfterViewInit } from '@angular/core';
+import type { ElementRef } from '@angular/core';
 import {
   ChangeDetectionStrategy,
   Component,
   contentChildren,
-  ElementRef,
   inject,
   model,
-  ViewChild,
+  viewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import type { Placement } from '@floating-ui/dom';
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
 @Component({
   standalone: true,
-  imports: [NgClass, IconComponent],
+  imports: [IconComponent],
   selector: 'flowbite-dropdown',
   template: `
     <button
       type="button"
-      [ngClass]="contentClasses().dropdownClass"
+      [class]="contentClasses().dropdownClass"
       (click)="toggle()"
       #button>
-      <span [ngClass]="contentClasses().spanClass">
+      <span [class]="contentClasses().spanClass">
         {{ label() }}
         <flowbite-icon
           svgIcon="flowbite-angular:chevron-down"
@@ -46,11 +42,12 @@ import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/d
       </span>
     </button>
     <div
-      [ngClass]="contentClasses().containerClass"
+      [class]="contentClasses().containerClass"
       #dropdown
-      [style.display]="isOpen() ? 'block' : 'none'">
-      <div [ngClass]="contentClasses().contentClass">
-        <ul [ngClass]="contentClasses().subContentClass">
+      [style.display]="isOpen() ? 'block' : 'none'"
+      [style.minWidth.px]="button.clientWidth">
+      <div [class]="contentClasses().contentClass">
+        <ul [class]="contentClasses().subContentClass">
           <ng-content />
         </ul>
       </div>
@@ -62,9 +59,9 @@ import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/d
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DropdownComponent extends BaseComponent<DropdownClass> implements AfterViewInit {
-  @ViewChild('dropdown') dropdown!: ElementRef;
-  @ViewChild('button') button!: ElementRef;
+export class DropdownComponent extends BaseComponent<DropdownClass> {
+  dropdown = viewChild.required<ElementRef>('dropdown');
+  button = viewChild.required<ElementRef>('button');
 
   /**
    * Service injected used to generate class
@@ -141,10 +138,6 @@ export class DropdownComponent extends BaseComponent<DropdownClass> implements A
   }
   //#endregion
 
-  x = 0;
-  y = 0;
-  width = 0;
-
   /**
    * Toggle dropdown isOpen
    */
@@ -152,47 +145,14 @@ export class DropdownComponent extends BaseComponent<DropdownClass> implements A
     this.isOpen.set(!this.isOpen());
   }
 
-  calculatePosition() {
-    computePosition(this.button.nativeElement, this.dropdown.nativeElement, {
-      placement: this.convertPosition(this.position()),
-      middleware: [offset(8), flip(), shift()],
-    }).then(({ x, y }: { x: number; y: number }) => {
-      this.dropdown.nativeElement.style.left = x + 'px';
-      this.dropdown.nativeElement.style.top = y + 'px';
-      this.width = this.button.nativeElement.offsetWidth;
-    });
-  }
-
-  ngAfterViewInit() {
-    // todo : Fix ERROR ReferenceError: ResizeObserver is not defined
-    // Append when runing command 'pnpm lib:build'
-    autoUpdate(this.button.nativeElement, this.dropdown.nativeElement, () => {
-      if (!this.isOpen()) return;
-      this.calculatePosition();
-    });
-  }
-
   // Onclick outside the dropdown, close it
   clickout(event: Event) {
     if (
-      !this.dropdown.nativeElement.contains(event.target) &&
+      !this.dropdown().nativeElement.contains(event.target) &&
       this.isOpen() &&
-      !this.button.nativeElement.contains(event.target)
+      !this.button().nativeElement.contains(event.target)
     ) {
       this.isOpen.set(false);
     }
   }
-
-  convertPosition(pos: keyof DropdownPositions): Placement {
-    switch (pos) {
-      case 'top-center':
-        return 'top';
-      case 'bottom-center':
-        return 'bottom';
-      case 'left-center':
-        return 'left';
-      case 'right-center':
-        return 'right';
-    }
-  }
 }
diff --git a/libs/flowbite-angular/dropdown/dropdown.theme.ts b/libs/flowbite-angular/dropdown/dropdown.theme.ts
index 5e4b49a1..e50e88e2 100644
--- a/libs/flowbite-angular/dropdown/dropdown.theme.ts
+++ b/libs/flowbite-angular/dropdown/dropdown.theme.ts
@@ -57,7 +57,7 @@ export interface DropdownTheme {
  */
 export const dropdownTheme: DropdownTheme = createTheme({
   root: {
-    base: '',
+    base: 'relative inline w-fit',
   },
   dropdown: {
     base: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600 group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10 rounded-lg',
@@ -72,10 +72,10 @@ export const dropdownTheme: DropdownTheme = createTheme({
       disabled: 'hidden',
     },
     placement: {
-      'top-center': '',
-      'bottom-center': '',
-      'left-center': '',
-      'right-center': '',
+      'top-center': 'bottom-full mb-2.5 left-1/2 -translate-x-1/2',
+      'bottom-center': 'top-full mt-2.5 left-1/2 -translate-x-1/2',
+      'left-center': 'left-full ml-2.5 top-1/2 -translate-y-1/2',
+      'right-center': 'right-full mr-2.5 top-1/2 -translate-y-1/2',
     },
   },
   content: {
diff --git a/libs/flowbite-angular/indicator/indicators.component.ts b/libs/flowbite-angular/indicator/indicators.component.ts
index 96d2bf67..fd73888e 100644
--- a/libs/flowbite-angular/indicator/indicators.component.ts
+++ b/libs/flowbite-angular/indicator/indicators.component.ts
@@ -10,7 +10,6 @@ import { IndicatorThemeService } from './indicators.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -24,7 +23,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-indicator',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/modal/modal-body.component.ts b/libs/flowbite-angular/modal/modal-body.component.ts
index 34ed5565..e36c7ef3 100644
--- a/libs/flowbite-angular/modal/modal-body.component.ts
+++ b/libs/flowbite-angular/modal/modal-body.component.ts
@@ -5,7 +5,6 @@ import { ModalComponent } from './modal.component';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -19,7 +18,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-modal-body',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/modal/modal-footer.component.ts b/libs/flowbite-angular/modal/modal-footer.component.ts
index f2ab9abb..8ff9f2f0 100644
--- a/libs/flowbite-angular/modal/modal-footer.component.ts
+++ b/libs/flowbite-angular/modal/modal-footer.component.ts
@@ -5,7 +5,6 @@ import { ModalComponent } from './modal.component';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -19,7 +18,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-modal-footer',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/modal/modal-header.component.ts b/libs/flowbite-angular/modal/modal-header.component.ts
index 6107b89d..4055f397 100644
--- a/libs/flowbite-angular/modal/modal-header.component.ts
+++ b/libs/flowbite-angular/modal/modal-header.component.ts
@@ -7,7 +7,6 @@ import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CLOSE_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass } from '@angular/common';
 import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -23,15 +22,15 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 @Component({
   standalone: true,
-  imports: [NgClass, IconComponent],
+  imports: [IconComponent],
   selector: 'flowbite-modal-header',
   template: `
-    <h3 [ngClass]="contentClasses().modalHeaderTitleClass">
+    <h3 [class]="contentClasses().modalHeaderTitleClass">
       <ng-content />
     </h3>
     <button
       type="button"
-      [ngClass]="contentClasses().modalHeaderButtonClass"
+      [class]="contentClasses().modalHeaderButtonClass"
       data-modal-hide="medium-modal"
       (click)="modalComponent.close()">
       <flowbite-icon
diff --git a/libs/flowbite-angular/modal/modal.component.ts b/libs/flowbite-angular/modal/modal.component.ts
index a633523f..1496b177 100644
--- a/libs/flowbite-angular/modal/modal.component.ts
+++ b/libs/flowbite-angular/modal/modal.component.ts
@@ -7,7 +7,6 @@ import { ModalThemeService } from './modal.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import type { EmbeddedViewRef, OnDestroy } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -28,17 +27,16 @@ import { filter, Subject, takeUntil } from 'rxjs';
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-modal',
   template: `
     <ng-template #modal>
       <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-[99]"></div>
 
       <div
-        [ngClass]="contentClasses().modalWrapperClass"
+        [class]="contentClasses().modalWrapperClass"
         (click)="onBackdropClick($event)">
-        <div [ngClass]="contentClasses().modalContainerClass">
-          <div [ngClass]="contentClasses().modalContentClass">
+        <div [class]="contentClasses().modalContainerClass">
+          <div [class]="contentClasses().modalContentClass">
             <ng-content />
           </div>
         </div>
diff --git a/libs/flowbite-angular/navbar/navbar-brand.component.ts b/libs/flowbite-angular/navbar/navbar-brand.component.ts
index 12b2799f..176bffb1 100644
--- a/libs/flowbite-angular/navbar/navbar-brand.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-brand.component.ts
@@ -5,7 +5,6 @@ import { NavbarComponent } from './navbar.component';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,7 +19,6 @@ import {
 @Component({
   selector: 'flowbite-navbar-brand',
   standalone: true,
-  imports: [NgClass],
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/flowbite-angular/navbar/navbar-content.component.ts b/libs/flowbite-angular/navbar/navbar-content.component.ts
index 2dc5d7ff..402f7943 100644
--- a/libs/flowbite-angular/navbar/navbar-content.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-content.component.ts
@@ -4,9 +4,9 @@ import { NavbarComponent } from './navbar.component';
 import type { NavbarColors } from './navbar.theme';
 
 import type { DeepPartial } from 'flowbite-angular';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
+import { BaseComponent } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -22,12 +22,21 @@ import {
 @Component({
   selector: 'flowbite-navbar-content',
   standalone: true,
-  imports: [NgClass],
   template: `
-    <div [ngClass]="contentClasses().navbarContentListClass">
+    <div [class]="contentClasses().navbarContentListClass">
       <ng-content />
     </div>
   `,
+  host: {
+    '[@isOpenAnimation]': 'navbarComponent().isOpen()',
+  },
+  animations: [
+    trigger('isOpenAnimation', [
+      state('true', style({ height: '*', class: 'test' })),
+      state('false', style({ height: '0px' })),
+      transition('true <=> false', animate('300ms')),
+    ]),
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -48,13 +57,15 @@ export class NavbarContentComponent extends BaseComponent<NavbarContentClass> im
    * @default `NavbarComponent`'s color
    */
   public color = model<keyof NavbarColors>(this.navbarComponent().color());
+  /**
+   * Set the custom style for this navbar content
+   */
   public customStyle = model<DeepPartial<NavbarContentTheme>>({});
   //#endregion
 
   //#region BaseComponent implementation
   public override fetchClass(): NavbarContentClass {
     return this.themeService.getClasses({
-      isOpen: booleanToFlowbiteBoolean(this.navbarComponent().isOpen()),
       customStyle: this.customStyle(),
     });
   }
diff --git a/libs/flowbite-angular/navbar/navbar-content.theme.service.ts b/libs/flowbite-angular/navbar/navbar-content.theme.service.ts
index b4c08a6f..06df4e70 100644
--- a/libs/flowbite-angular/navbar/navbar-content.theme.service.ts
+++ b/libs/flowbite-angular/navbar/navbar-content.theme.service.ts
@@ -32,7 +32,7 @@ export class NavbarContentThemeService implements FlowbiteThemeService<NavbarCon
     const theme: NavbarContentTheme = mergeTheme(this.baseTheme, properties.customStyle);
 
     const output: NavbarContentClass = {
-      rootClass: twMerge(theme.root.base, theme.root.isOpen[properties.isOpen]),
+      rootClass: twMerge(theme.root.base),
       navbarContentListClass: twMerge(theme.list.base),
     };
 
diff --git a/libs/flowbite-angular/navbar/navbar-content.theme.ts b/libs/flowbite-angular/navbar/navbar-content.theme.ts
index 54683e89..18dbff90 100644
--- a/libs/flowbite-angular/navbar/navbar-content.theme.ts
+++ b/libs/flowbite-angular/navbar/navbar-content.theme.ts
@@ -1,11 +1,10 @@
-import type { DeepPartial, FlowbiteBoolean, FlowbiteClass } from 'flowbite-angular';
+import type { DeepPartial, FlowbiteClass } from 'flowbite-angular';
 import { createTheme } from 'flowbite-angular/utils';
 
 /**
  * Required properties for the class generation of `NavbarContentComponent`
  */
 export interface NavbarContentProperties {
-  isOpen: keyof FlowbiteBoolean;
   customStyle: DeepPartial<NavbarContentTheme>;
 }
 
@@ -15,7 +14,6 @@ export interface NavbarContentProperties {
 export interface NavbarContentTheme {
   root: {
     base: string;
-    isOpen: FlowbiteBoolean;
   };
   list: {
     base: string;
@@ -27,11 +25,7 @@ export interface NavbarContentTheme {
  */
 export const navbarContentTheme: NavbarContentTheme = createTheme({
   root: {
-    base: 'w-full md:block md:w-auto order-last md:order-none',
-    isOpen: {
-      enabled: '',
-      disabled: 'hidden',
-    },
+    base: 'w-full md:!h-fit md:w-auto order-last md:order-none overflow-hidden',
   },
   list: {
     base: 'font-medium flex flex-col p-4 md:p-0 mt-4 items-center border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-900 md:dark:bg-gray-800 dark:border-gray-700',
diff --git a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
index d13a9c79..1811d324 100644
--- a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
@@ -21,7 +21,6 @@ import {
 @Component({
   selector: 'flowbite-navbar-icon-button',
   standalone: true,
-  imports: [],
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/flowbite-angular/navbar/navbar-item.component.ts b/libs/flowbite-angular/navbar/navbar-item.component.ts
index 7a0e5d33..f1d5abf1 100644
--- a/libs/flowbite-angular/navbar/navbar-item.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-item.component.ts
@@ -8,7 +8,6 @@ import { BaseComponent } from 'flowbite-angular';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,7 +22,6 @@ import {
 @Component({
   selector: 'flowbite-navbar-item',
   standalone: true,
-  imports: [NgClass],
   template: `<ng-content />`,
   host: {
     '(click)': 'onClick()',
diff --git a/libs/flowbite-angular/navbar/navbar-toggle.component.ts b/libs/flowbite-angular/navbar/navbar-toggle.component.ts
index f3bf55eb..c70e7cb9 100644
--- a/libs/flowbite-angular/navbar/navbar-toggle.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-toggle.component.ts
@@ -7,7 +7,6 @@ import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { BARS_SVG_ICON } from 'flowbite-angular/utils';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,7 +22,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 @Component({
   selector: 'flowbite-navbar-toggle',
   standalone: true,
-  imports: [CommonModule, IconComponent],
+  imports: [IconComponent],
   template: `
     <flowbite-icon
       svgIcon="flowbite-angular:bars"
diff --git a/libs/flowbite-angular/navbar/navbar.component.ts b/libs/flowbite-angular/navbar/navbar.component.ts
index be8ed024..abac650e 100644
--- a/libs/flowbite-angular/navbar/navbar.component.ts
+++ b/libs/flowbite-angular/navbar/navbar.component.ts
@@ -7,7 +7,6 @@ import { NavbarThemeService } from './navbar.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,7 +22,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-navbar',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/package.json b/libs/flowbite-angular/package.json
index a41dc9ff..ceb68420 100644
--- a/libs/flowbite-angular/package.json
+++ b/libs/flowbite-angular/package.json
@@ -29,7 +29,6 @@
     "./tailwind.config": "./tailwind.config.js"
   },
   "peerDependencies": {
-    "@floating-ui/dom": "1.2.6",
     "tailwind-merge": "2.2.1"
   }
 }
diff --git a/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts b/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts
index 11b910bc..7dfc4dba 100644
--- a/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts
@@ -9,7 +9,6 @@ import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils';
 
-import { NgClass, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -26,7 +25,7 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 @Component({
   standalone: true,
-  imports: [NgClass, NgIf, IconComponent],
+  imports: [IconComponent],
   selector: 'flowbite-sidebar-item-group',
   template: `
     <span
@@ -38,7 +37,9 @@ import { DomSanitizer } from '@angular/platform-browser';
         class="h-6 w-6 shrink-0 duration-200"
         [class.rotate-180]="!isOpen()" />
     </span>
-    <ng-content *ngIf="isOpen()" />
+    @if (isOpen()) {
+      <ng-content />
+    }
   `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/flowbite-angular/sidebar/sidebar-item.component.ts b/libs/flowbite-angular/sidebar/sidebar-item.component.ts
index 99d18616..bf618067 100644
--- a/libs/flowbite-angular/sidebar/sidebar-item.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-item.component.ts
@@ -11,7 +11,6 @@ import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
 import { SanitizeHtmlPipe } from 'flowbite-angular/sanitize-html';
 
-import { NgClass, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -25,19 +24,23 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, SanitizeHtmlPipe, BadgeComponent],
+  imports: [SanitizeHtmlPipe, BadgeComponent],
   selector: 'flowbite-sidebar-item',
   template: `
+    @if (icon()) {
+      <span
+        class="flex-shrink-0"
+        [innerHTML]="icon()! | sanitizeHtml"></span>
+    }
+
     <span
-      class="flex-shrink-0"
-      [innerHTML]="icon()! | sanitizeHtml"
-      *ngIf="icon()"></span>
-    <span
-      [ngClass]="contentClasses().sidebarIconClass"
+      [class]="contentClasses().sidebarIconClass"
       [class.ml-3]="icon()">
       <ng-content />
     </span>
-    <flowbite-badge *ngIf="label()">{{ label() }}</flowbite-badge>
+    @if (label()) {
+      <flowbite-badge>{{ label() }}</flowbite-badge>
+    }
   `,
   host: {
     '(click)': 'onClick()',
diff --git a/libs/flowbite-angular/sidebar/sidebar-menu.component.ts b/libs/flowbite-angular/sidebar/sidebar-menu.component.ts
index 6e77d4e0..86d422da 100644
--- a/libs/flowbite-angular/sidebar/sidebar-menu.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-menu.component.ts
@@ -22,7 +22,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [],
   selector: 'flowbite-sidebar-menu',
   template: '<ng-content />',
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts b/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts
index f57d00aa..e8516593 100644
--- a/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts
@@ -21,7 +21,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [],
   selector: 'flowbite-sidebar-page-content',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/libs/flowbite-angular/sidebar/sidebar.component.ts b/libs/flowbite-angular/sidebar/sidebar.component.ts
index 7ec4912c..767fd303 100644
--- a/libs/flowbite-angular/sidebar/sidebar.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar.component.ts
@@ -11,7 +11,6 @@ import { SidebarThemeService } from './sidebar.theme.service';
 import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
 
-import { NgClass } from '@angular/common';
 import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
@@ -28,7 +27,6 @@ import {
  */
 @Component({
   standalone: true,
-  imports: [NgClass],
   selector: 'flowbite-sidebar',
   template: `<ng-content />`,
   encapsulation: ViewEncapsulation.None,
diff --git a/package.json b/package.json
index cba42651..fbcab6f5 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,11 @@
     "docs:test": "nx run docs:test",
     "format": "prettier --write \"**/*.{ts,html,md,scss,js,json}\"",
     "format:check": "prettier --check \"**/*.{ts,html,md,scss,js,json}\"",
-    "preinstall": "pnpm dlx only-allow pnpm",
     "lib:build": "nx run flowbite-angular:build",
     "lib:lint": "nx run flowbite-angular:lint",
     "lib:release": "nx run flowbite-angular:semantic-release",
     "lib:test": "nx run flowbite-angular:test",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
     "@angular-eslint/template-parser": "18.0.0",
@@ -39,7 +38,6 @@
     "@angular/platform-server": "18.0.0",
     "@angular/router": "18.0.0",
     "@angular/ssr": "18.0.0",
-    "@floating-ui/dom": "^1.2.6",
     "@ng-doc/app": "18.3.0",
     "@ng-doc/builder": "18.3.0",
     "@ng-doc/core": "18.3.0",
@@ -84,11 +82,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-prettier": "^5.2.1",
-    "husky": "^8.0.0",
+    "husky": "9.1.7",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-preset-angular": "14.1.0",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "15.2.10",
     "ng-packagr": "18.2.1",
     "nx": "19.1.0",
     "postcss": "^8.4.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be3e3cd9..ec564e9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,9 +38,6 @@ importers:
       '@angular/ssr':
         specifier: 18.0.0
         version: 18.0.0(@angular/common@18.0.0(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))(rxjs@7.5.0))(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))
-      '@floating-ui/dom':
-        specifier: ^1.2.6
-        version: 1.6.11
       '@ng-doc/app':
         specifier: 18.3.0
         version: 18.3.0(kjmryw66ul6uw2b2cvo7x2zo5e)
@@ -169,8 +166,8 @@ importers:
         specifier: ^5.2.1
         version: 5.2.1(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.3.3)
       husky:
-        specifier: ^8.0.0
-        version: 8.0.3
+        specifier: 9.1.7
+        version: 9.1.7
       jest:
         specifier: 29.7.0
         version: 29.7.0(@types/node@18.16.9)(ts-node@10.9.2(@types/node@18.16.9)(typescript@5.4.5))
@@ -181,7 +178,7 @@ importers:
         specifier: 14.1.0
         version: 14.1.0(@angular-devkit/build-angular@18.0.0(n44oh4gpy6uz23znuqaoiv7j2m))(@angular/compiler-cli@18.0.0(@angular/compiler@18.0.0(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10)))(typescript@5.4.5))(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))(@angular/platform-browser-dynamic@18.0.0(@angular/common@18.0.0(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))(rxjs@7.5.0))(@angular/compiler@18.0.0(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10)))(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))(@angular/platform-browser@18.0.0(@angular/animations@18.0.0(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10)))(@angular/common@18.0.0(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))(rxjs@7.5.0))(@angular/core@18.0.0(rxjs@7.5.0)(zone.js@0.14.10))))(@babel/core@7.26.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@18.16.9)(ts-node@10.9.2(@types/node@18.16.9)(typescript@5.4.5)))(typescript@5.4.5)
       lint-staged:
-        specifier: ^15.2.0
+        specifier: 15.2.10
         version: 15.2.10
       ng-packagr:
         specifier: 18.2.1
@@ -234,9 +231,6 @@ importers:
 
   libs/flowbite-angular:
     dependencies:
-      '@floating-ui/dom':
-        specifier: 1.2.6
-        version: 1.2.6
       tailwind-merge:
         specifier: 2.2.1
         version: 2.2.1
@@ -2653,18 +2647,6 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@floating-ui/core@1.6.8':
-    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
-
-  '@floating-ui/dom@1.2.6':
-    resolution: {integrity: sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw==}
-
-  '@floating-ui/dom@1.6.11':
-    resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
-
-  '@floating-ui/utils@0.2.8':
-    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
-
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -4283,6 +4265,7 @@ packages:
 
   acorn-import-assertions@1.9.0:
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
+    deprecated: package has been renamed to acorn-import-attributes
     peerDependencies:
       acorn: ^8
 
@@ -5178,6 +5161,7 @@ packages:
 
   critters@0.0.24:
     resolution: {integrity: sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q==}
+    deprecated: Ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. If you'd like to keep using Critters, please switch to the actively-maintained fork at https://github.com/danielroe/beasties
 
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -6781,9 +6765,9 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
-  husky@8.0.3:
-    resolution: {integrity: sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==}
-    engines: {node: '>=14'}
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
     hasBin: true
 
   hyperdyperid@1.2.0:
@@ -14663,21 +14647,6 @@ snapshots:
 
   '@eslint/js@8.57.0': {}
 
-  '@floating-ui/core@1.6.8':
-    dependencies:
-      '@floating-ui/utils': 0.2.8
-
-  '@floating-ui/dom@1.2.6':
-    dependencies:
-      '@floating-ui/core': 1.6.8
-
-  '@floating-ui/dom@1.6.11':
-    dependencies:
-      '@floating-ui/core': 1.6.8
-      '@floating-ui/utils': 0.2.8
-
-  '@floating-ui/utils@0.2.8': {}
-
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -20214,7 +20183,7 @@ snapshots:
 
   human-signals@5.0.0: {}
 
-  husky@8.0.3: {}
+  husky@9.1.7: {}
 
   hyperdyperid@1.2.0: {}