diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 3ed9fa6..650d1fc 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -1,15 +1,154 @@
 <script setup>
-import AccordionExample from './examples/AccordionExample.vue'
+import AccordionExample from './examples/AccordionExample.vue';
+import AccordionAlwaysOpenExample from './examples/AccordionAlwaysOpenExample.vue';
+import AccordionFlushExample from './examples/AccordionFlushExample.vue';
+import AccordionStyledHeadersExample from './examples/AccordionStyledHeadersExample.vue';
 </script>
 # Vue Accordion Component - Flowbite
 
+#### Use Tailwind CSS accordion component to show expanding content
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/accordion/](https://flowbite.com/docs/components/accordion/)
+:::
+
+## Default accordion
+Use this example to basic accordion. 
 ```vue
 <script setup>
-import { Accordion } from 'flowbite-vue'
+import { Accordion } from 'flowbite'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
 </script>
+
 <template>
-  <Accordion></Accordion>
+  <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>
 </template>
+
 ```
 
 <AccordionExample />
+
+## Always open accordion
+Always open prop to makes accordion able to open multiple elements.
+```vue
+<script setup>
+import { Accordion } from 'flowbite'
+import { ref } from '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>
+</template>
+
+```
+
+<AccordionAlwaysOpenExample />
+
+## Flush accordion
+Flush prop makes opened tab being not able to close.
+```vue
+<script setup>
+import { Accordion } from 'flowbite'
+import { ref } from '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>
+</template>
+
+```
+
+<AccordionFlushExample />
+
+## Styling accordion
+You can style headers with `header-classes` prop and content containers with `content-classes` props by pass tailwind classes.
+```vue
+<script setup>
+import { Accordion } from 'flowbite'
+import { ref } from '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>
+</template>
+
+```
+
+<AccordionStyledHeadersExample />
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
new file mode 100644
index 0000000..962c199
--- /dev/null
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Accordion } from '../../../../src/index'
+import { ref } from '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>
+</template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index d5f98bf..556a382 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,22 +1,27 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Accordion :items="items" content-classes="bg-red-100">
-      <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>
-    </Accordion>
-  </div>
-</template>
 <script setup>
-
-const items = [
-  { header: 'ehehe' },
-  { header: 'ehehe\'nt' },
-]
 import { Accordion } from '../../../../src/index'
+import { ref } from '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>
+</template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
new file mode 100644
index 0000000..e277b16
--- /dev/null
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Accordion } from '../../../../src/index'
+import { ref } from '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>
+</template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
new file mode 100644
index 0000000..224cd84
--- /dev/null
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Accordion } from '../../../../src/index'
+import { ref } from '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>
+</template>
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index ff712b5..7445e11 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vp-raw flex flex-col">
     <template v-for="(item, i) in formattedItems" :key="item.id">
       <h2>
         <button