diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 9f52f6d..6ec2c4c 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -17,11 +17,7 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
 Use this example to basic accordion. 
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
@@ -64,11 +60,7 @@ import AccordionContent from 'flowbite'
 Always open prop to makes accordion able to open multiple elements.
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
@@ -111,11 +103,7 @@ import AccordionContent from 'flowbite'
 Flush prop removes side borders, and rounded corners
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
@@ -158,15 +146,11 @@ import AccordionContent from 'flowbite'
 You can style accordion content and headers by passing tailwind classes into them.
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
-  <Accordion >
+  <Accordion>
     <accordion-panel>
       <accordion-header>header</accordion-header>
       <accordion-content>
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
index 5175917..10f8f2e 100644
--- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 5c74b27..96ce3d8 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
index 5bb3f7b..363e44a 100644
--- a/docs/components/accordion/examples/AccordionFlushExample.vue
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
index 4674045..63f3474 100644
--- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/src/index.ts b/src/index.ts
index 627797b..9de0f19 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,7 @@
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+export { default as AccordionPanel } from './components/Accordion/AccordionPanel.vue'
+export { default as AccordionHeader } from './components/Accordion/AccordionHeader.vue'
+export { default as AccordionContent } from './components/Accordion/AccordionContent.vue'
 export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
@@ -12,7 +16,6 @@ export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbIte
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
 export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
-export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Badge } from './components/Badge/Badge.vue'
 export { default as TheCard } from './components/Card/TheCard.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'