diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 650d1fc..a4eb653 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -53,29 +53,53 @@ Always open prop to makes accordion able to open multiple elements.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" always-open>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
@@ -88,29 +112,53 @@ Flush prop makes opened tab being not able to close.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" flush>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
@@ -123,29 +171,53 @@ You can style headers with `header-classes` prop and content containers with `co
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" header-classes="bg-blue-800">
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header class="bg-blue-800">another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
index 962c199..c2a031f 100644
--- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" always-open>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion always-open>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 556a382..b378b4d 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items">
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
index e277b16..458cdb6 100644
--- a/docs/components/accordion/examples/AccordionFlushExample.vue
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" flush>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
index 224cd84..f54e5f4 100644
--- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" header-classes="bg-blue-800">
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header class="bg-blue-800">another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 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-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index d40592b..a47c3b7 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -1,89 +1,29 @@
 <template>
   <div class="vp-raw">
-    <template v-for="(item, i) in formattedItems" :key="item.id">
-      <h2>
-        <button
-          type="button"
-          :class="[
-            { 'rounded-t-xl border-b-0': i === 0 },
-            headerClasses
-          ]"
-          class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-          @click="toggleItem(item)"
-        >
-          <span class="w-full">{{item.header}}</span>
-          <svg
-            data-accordion-icon
-            class="w-6 h-6 shrink-0"
-            :class="{'rotate-180': item.isVisible}"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
-          </svg>
-        </button>
-      </h2>
-      <div
-        :class="[ { hidden: !item.isVisible }, contentClasses ]"
-        class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
-      >
-        <slot />
-      </div>
-    </template>
+    <slot :accordionId="accordionId"/>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { PropType } from 'vue'
+import { provide } from 'vue'
 import { nanoid } from 'nanoid'
-import type { AccordionItem, AccordionTransformedItem } from '@/components/Accordion/types'
+import type { tAccordionMode } from '@/components/Accordion/types'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 
 const props = defineProps({
   alwaysOpen: {
     type: Boolean,
     default: false,
   },
-  headerClasses: {
-    type: String,
-    default: '',
-  },
-  contentClasses: {
-    type: String,
-    default: '',
-  },
-  items: {
-    type: Array as PropType<AccordionItem[]>,
-    default() {
-      return []
-    },
-  },
   flush: {
     type: Boolean,
     default: false,
   },
 })
 
-const formattedItems = ref<AccordionTransformedItem[]>(props.items.map((item, i) => ({ ...item, id: nanoid(), isVisible: i === 0 })))
-
-const commonToggleItem = (selectedItem: AccordionTransformedItem) => {
-  const isSelectedVisible = selectedItem.isVisible
-  formattedItems.value = formattedItems.value.map((item) => {
-    if (item.id !== selectedItem.id) return { ...item, isVisible: false }
-    return { ...item, isVisible: !isSelectedVisible }
-  })
-}
-const alwaysOpenToggleItem = (selectedItem: AccordionTransformedItem) => {
-  selectedItem.isVisible = !selectedItem.isVisible
-}
-const flushToggleItem = (selectedItem: AccordionTransformedItem) => {
-  const isSelectedVisible = selectedItem.isVisible
-  if (isSelectedVisible) return
-  commonToggleItem(selectedItem)
-}
-const toggleItem = (selectedItem: AccordionTransformedItem) => {
-  if (props.alwaysOpen) return alwaysOpenToggleItem(selectedItem)
-  if (props.flush) return flushToggleItem(selectedItem)
-  commonToggleItem(selectedItem)
-}
+const accordionId = nanoid()
+provide('accordionId', accordionId)
+let mode: tAccordionMode = 'default'
+if (props.alwaysOpen) mode = 'alwaysOpen'
+if (props.flush) mode = 'flush'
+useAccordionState(accordionId, mode)
 </script>
diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
new file mode 100644
index 0000000..9325428
--- /dev/null
+++ b/src/components/Accordion/AccordionContent.vue
@@ -0,0 +1,20 @@
+<template>
+  <div
+      :class="{ hidden: !panelState.isVisible }"
+      class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { computed, inject } from 'vue'
+
+const accordionId: any = inject('accordionId')
+const panelId: any = inject('panelId')
+
+const { accordionsStates } = useAccordionState()
+
+const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
+</script>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
new file mode 100644
index 0000000..20e00ce
--- /dev/null
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -0,0 +1,63 @@
+<template>
+  <button
+      type="button"
+      @click="toggleItem"
+      :class="{ 'rounded-t-xl border-b-0': panelState.order === 0 }"
+      class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+  >
+    <span class="w-full"><slot /></span>
+    <svg
+        data-accordion-icon
+        class="w-6 h-6 shrink-0"
+        :class="{'rotate-180': panelState.isVisible}"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
+    </svg>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { computed, inject, provide } from 'vue'
+
+
+const accordionId: any = inject('accordionId')
+const panelId: any = inject('panelId')
+
+const accordionState = computed(() => {
+  return accordionsStates[accordionId]
+})
+
+const commonToggleItem = () => {
+  const selectedPanel = accordionState.value.panels[panelId]
+  const isSelectedVisible = selectedPanel.isVisible
+  for (const panelIndex in accordionState.value.panels) {
+    const panel = accordionState.value.panels[panelIndex]
+    if (panel.id !== panelId) panel.isVisible = false
+    else panel.isVisible = !isSelectedVisible
+  }
+}
+const alwaysOpenToggleItem = () => {
+  const selectedPanel = accordionState.value.panels[panelId]
+  selectedPanel.isVisible = !selectedPanel.isVisible
+}
+const flushToggleItem = () => {
+  const selectedPanel = accordionState.value.panels[panelId]
+  if (selectedPanel.isVisible) return
+  commonToggleItem()
+}
+const toggleItem = () => {
+  const actionsMap = {
+    flush: flushToggleItem,
+    alwaysOpen: alwaysOpenToggleItem,
+    default: commonToggleItem,
+  }
+  actionsMap[accordionState.value.mode]()
+}
+
+const { accordionsStates } = useAccordionState()
+const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
+</script>
diff --git a/src/components/Accordion/AccordionPanel.vue b/src/components/Accordion/AccordionPanel.vue
new file mode 100644
index 0000000..109e6af
--- /dev/null
+++ b/src/components/Accordion/AccordionPanel.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <slot name="header" @click="toggleItem"/>
+    <slot name="content"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeMount, provide } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { nanoid } from 'nanoid'
+
+const { accordionsStates } = useAccordionState()
+
+const panelId = nanoid()
+const accordionId: any = inject('accordionId')
+provide('panelId', panelId)
+
+const accordionState = computed(() => {
+  return accordionsStates[accordionId]
+})
+
+onBeforeMount(() => {
+  const panelsCount = Object.keys(accordionState.value.panels).length
+  accordionState.value.panels[panelId] = {
+    id: panelId,
+    order: panelsCount,
+    isVisible: !panelsCount,
+  }
+})
+</script>
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/Accordion/composables/useAccordionState.ts
new file mode 100644
index 0000000..306e7f8
--- /dev/null
+++ b/src/components/Accordion/composables/useAccordionState.ts
@@ -0,0 +1,27 @@
+import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
+import type { tAccordionMode, tState } from '@/components/Accordion/types'
+
+const accordionsStates = reactive<tState>({})
+export function useAccordionState(id?: string, mode?: tAccordionMode): {
+  accordionsStates: tState
+} {
+
+  onBeforeMount(() => {
+    if (!id) return
+    accordionsStates[id] = {
+      id: id,
+      mode: mode ? mode : 'default',
+      panels: {},
+    }
+  })
+  onBeforeUnmount(() => {
+    if (!id) return
+    delete accordionsStates[id]
+  })
+
+  return {
+    accordionsStates,
+  }
+}
+
+
diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
index 58bd9a2..ffc4a72 100644
--- a/src/components/Accordion/types.ts
+++ b/src/components/Accordion/types.ts
@@ -1,8 +1,18 @@
-export type AccordionItem = {
-  header: string
-  icon?: string
-}
-export interface AccordionTransformedItem extends AccordionItem {
+export type tAccordionMode = 'flush' | 'alwaysOpen' | 'default'
+export type tAccordionPanel = {
+  order: number
   id: string
   isVisible: boolean
 }
+type tAccordionPanels = {
+  [key: string]: tAccordionPanel
+}
+type tStateElement = {
+  id: string,
+  mode: tAccordionMode
+
+  panels: tAccordionPanels
+}
+export type tState = {
+  [key: string]: tStateElement
+}