diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 14c01b6..77bc3cf 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v3
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v3
@@ -42,7 +42,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v3
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index e744864..492e67d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -34,45 +34,44 @@ function buildSidebar() {
 
 function getComponents() {
   return [
-    { text: 'Accordion', link: 'components/accordion/accordion.md' },
-    { text: 'Alert', link: '/components/alert/alert.md' },
-    { text: 'Avatar', link: 'components/avatar/avatar.md' },
-    { text: 'Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
-    { text: 'Button', link: '/components/button/button.md' },
-    { text: 'Badge', link: 'components/badge/badge.md' },
-    { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
-    { text: 'Card', link: 'components/card/card.md' },
-    { text: 'Carousel', link: 'components/carousel/carousel.md' },
-    { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
-    { text: 'Progress', link: 'components/progress/progress.md' },
-    { text: 'Rating', link: 'components/rating/rating.md' },
-    { text: 'Spinner', link: '/components/spinner/spinner.md' },
-    { text: 'Tabs', link: '/components/tabs/tabs.md' },
-    { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
-    { text: 'Toast', link: 'components/toast/toast.md' },
-    { text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
-    { text: 'Modal', link: 'components/modal/modal.md' },
-    { text: 'Navbar', link: 'components/navbar/navbar.md' },
+    { text: 'Accordion', link: 'components/accordion' },
+    { text: 'Alert', link: '/components/alert' },
+    { text: 'Avatar', link: 'components/avatar' },
+    { text: 'Breadcrumb', link: 'components/breadcrumb' },
+    { text: 'Button', link: '/components/button' },
+    { text: 'Badge', link: 'components/badge' },
+    { text: 'Button Group', link: '/components/button-group' },
+    { text: 'Card', link: 'components/card.md' },
+    { text: 'Carousel', link: 'components/carousel' },
+    { text: 'Dropdown', link: '/components/dropdown' },
+    { text: 'Progress', link: 'components/progress' },
+    { text: 'Rating', link: 'components/rating' },
+    { text: 'Spinner', link: '/components/spinner' },
+    { text: 'Tabs', link: '/components/tabs' },
+    { text: 'ListGroup', link: 'components/list-group' },
+    { text: 'Toast', link: 'components/toast' },
+    { text: 'Tooltip', link: 'components/tooltip' },
+    { text: 'Modal', link: 'components/modal' },
+    { text: 'Navbar', link: 'components/navbar' },
 
-    { text: '- Footer', link: 'components/footer/footer.md' },
-    { text: '- Pagination', link: 'components/pagination/pagination.md' },
-    { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
-    { text: '- Table', link: 'components/table/table.md' },
-    { text: '- Timeline', link: 'components/timeline/timeline.md' },
+    { text: '- Footer', link: 'components/footer' },
+    { text: '- Pagination', link: 'components/pagination' },
+    { text: '- Sidebar', link: 'components/sidebar' },
+    { text: '- Table', link: 'components/table' },
+    { text: '- Timeline', link: 'components/timeline' },
   ]
 }
 
 function getFormComponents() {
   return [
-    { text: 'Input', link: 'components/input/input.md' },
+    { text: 'Input', link: 'components/input' },
   ]
 }
 
 function getUtils() {
   return [
     { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
-    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
-    { text: 'PLAYGROUND', link: '/components/PLAYGROUND/PLAYGROUND.md' },
+    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' }
   ]
 }
 
diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion.md
similarity index 96%
rename from docs/components/accordion/accordion.md
rename to docs/components/accordion.md
index 2e2209c..425f0da 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion.md
@@ -1,8 +1,8 @@
 <script setup>
-import AccordionExample from './examples/AccordionExample.vue';
-import AccordionAlwaysOpenExample from './examples/AccordionAlwaysOpenExample.vue';
-import AccordionFlushExample from './examples/AccordionFlushExample.vue';
-import AccordionStyledHeadersExample from './examples/AccordionStyledHeadersExample.vue';
+import AccordionExample from './accordion/examples/AccordionExample.vue';
+import AccordionAlwaysOpenExample from './accordion/examples/AccordionAlwaysOpenExample.vue';
+import AccordionFlushExample from './accordion/examples/AccordionFlushExample.vue';
+import AccordionStyledHeadersExample from './accordion/examples/AccordionStyledHeadersExample.vue';
 </script>
 # Vue Accordion Component - Flowbite
 
@@ -14,7 +14,7 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
 :::
 
 ## Default accordion
-Use this example to basic accordion. 
+Use this example to basic accordion.
 ```vue
 <script setup>
 import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
diff --git a/docs/components/alert/alert.md b/docs/components/alert.md
similarity index 91%
rename from docs/components/alert/alert.md
rename to docs/components/alert.md
index 9fd18c2..da9aedf 100644
--- a/docs/components/alert/alert.md
+++ b/docs/components/alert.md
@@ -1,10 +1,10 @@
 <script setup>
-import AlertTypeExample from './examples/AlertTypeExample.vue';
-import AlertTitleExample from './examples/AlertTitleExample.vue';
-import AlertClosableExample from './examples/AlertClosableExample.vue';
-import AlertBorderExample from './examples/AlertBorderExample.vue';
-import AlertIconExample from './examples/AlertIconExample.vue';
-import AlertInlineExample from './examples/AlertInlineExample.vue';
+import AlertTypeExample from './alert/examples/AlertTypeExample.vue';
+import AlertTitleExample from './alert/examples/AlertTitleExample.vue';
+import AlertClosableExample from './alert/examples/AlertClosableExample.vue';
+import AlertBorderExample from './alert/examples/AlertBorderExample.vue';
+import AlertIconExample from './alert/examples/AlertIconExample.vue';
+import AlertInlineExample from './alert/examples/AlertInlineExample.vue';
 </script>
 
 # Vue Alert Component - Flowbite
@@ -29,7 +29,7 @@ defineProps({
     type: {
         type: String as PropType<AlertType>,
         default: 'info',
-    }, 
+    },
 })
 ```
 
@@ -58,7 +58,7 @@ defineProps({
     title: {
         type: String,
         default: '',
-    }, 
+    },
 })
 ```
 
@@ -87,7 +87,7 @@ defineProps({
     closable: {
         type: Boolean,
         default: false,
-    }, 
+    },
 })
 ```
 
@@ -116,7 +116,7 @@ defineProps({
     border: {
         type: Boolean,
         default: false,
-    }, 
+    },
 })
 ```
 
@@ -145,7 +145,7 @@ defineProps({
     icon: {
         type: Boolean,
         default: true,
-    }, 
+    },
 })
 ```
 
@@ -174,7 +174,7 @@ defineProps({
     inline: {
         type: Boolean,
         default: true,
-    }, 
+    },
 })
 ```
 
diff --git a/docs/components/avatar/avatar.md b/docs/components/avatar.md
similarity index 89%
rename from docs/components/avatar/avatar.md
rename to docs/components/avatar.md
index 9a65c1e..38b64ab 100644
--- a/docs/components/avatar/avatar.md
+++ b/docs/components/avatar.md
@@ -1,13 +1,13 @@
 <script setup>
-import AvatarExample from './examples/AvatarExample.vue'
-import AvatarBorderedExample from './examples/AvatarBorderedExample.vue'
-import AvatarDotIndicatorExample from './examples/AvatarDotIndicatorExample.vue'
-import AvatarSizeExample from './examples/AvatarSizeExample.vue'
-import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
-import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue'
-import StackedAvatarsExample from './examples/StackedAvatarsExample.vue'
-import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
-import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'
+import AvatarExample from './avatar/examples/AvatarExample.vue'
+import AvatarBorderedExample from './avatar/examples/AvatarBorderedExample.vue'
+import AvatarDotIndicatorExample from './avatar/examples/AvatarDotIndicatorExample.vue'
+import AvatarSizeExample from './avatar/examples/AvatarSizeExample.vue'
+import AvatarDotIndicatorPositionExample from './avatar/examples/AvatarDotIndicatorPositionExample.vue'
+import AvatarAlternativeTextExample from './avatar/examples/AvatarAlternativeTextExample.vue'
+import StackedAvatarsExample from './avatar/examples/StackedAvatarsExample.vue'
+import AvatarPlaceholderExample from './avatar/examples/AvatarPlaceholderExample.vue'
+import AvatarPlaceholderInitialsExample from './avatar/examples/AvatarPlaceholderInitialsExample.vue'
 
 </script>
 # Vue Avatar Component - Flowbite
diff --git a/docs/components/badge/badge.md b/docs/components/badge.md
similarity index 88%
rename from docs/components/badge/badge.md
rename to docs/components/badge.md
index 9cf1905..af4c332 100644
--- a/docs/components/badge/badge.md
+++ b/docs/components/badge.md
@@ -1,9 +1,9 @@
 <script setup>
-import BadgeTypesExample from './examples/BadgeTypesExample.vue'
-import BadgeSizesExample from './examples/BadgeSizesExample.vue'
-import BadgeLinksExample from './examples/BadgeLinksExample.vue'
-import BadgeIconsExample from './examples/BadgeIconsExample.vue'
-import BadgeOnlyIconsExample from './examples/BadgeOnlyIconsExample.vue'
+import BadgeTypesExample from './badge/examples/BadgeTypesExample.vue'
+import BadgeSizesExample from './badge/examples/BadgeSizesExample.vue'
+import BadgeLinksExample from './badge/examples/BadgeLinksExample.vue'
+import BadgeIconsExample from './badge/examples/BadgeIconsExample.vue'
+import BadgeOnlyIconsExample from './badge/examples/BadgeOnlyIconsExample.vue'
 </script>
 # Vue Badge Component - Flowbite
 
diff --git a/docs/components/breadcrumb/breadcrumb.md b/docs/components/breadcrumb.md
similarity index 81%
rename from docs/components/breadcrumb/breadcrumb.md
rename to docs/components/breadcrumb.md
index 4127852..3c16336 100644
--- a/docs/components/breadcrumb/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -1,7 +1,7 @@
 <script setup>
-import BreadcrumbExample from './examples/BreadcrumbExample.vue'
-import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
-import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
+import BreadcrumbExample from './breadcrumb/examples/BreadcrumbExample.vue'
+import BreadcrumbSolidExample from './breadcrumb/examples/BreadcrumbSolidExample.vue'
+import BreadcrumbCustomIconsExample from './breadcrumb/examples/BreadcrumbCustomIconsExample.vue'
 </script>
 # Vue Breadcrumb Component - Flowbite
 The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
diff --git a/docs/components/buttonGroup/buttonGroup.md b/docs/components/button-group.md
similarity index 89%
rename from docs/components/buttonGroup/buttonGroup.md
rename to docs/components/button-group.md
index 54ad533..4cdf35c 100644
--- a/docs/components/buttonGroup/buttonGroup.md
+++ b/docs/components/button-group.md
@@ -1,6 +1,6 @@
 <script setup>
-import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
-import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
+import ButtonGroupBasicExample from './buttonGroup/examples/ButtonGroupBasicExample.vue';
+import ButtonGroupIconExample from './buttonGroup/examples/ButtonGroupIconExample.vue';
 </script>
 
 # Vue Button Group Component - Flowbite
diff --git a/docs/components/button/button.md b/docs/components/button.md
similarity index 91%
rename from docs/components/button/button.md
rename to docs/components/button.md
index dadc71f..8663abe 100644
--- a/docs/components/button/button.md
+++ b/docs/components/button.md
@@ -1,18 +1,18 @@
 <script setup>
-import ButtonColorExample from './examples/ButtonColorExample.vue';
-import ButtonSizeExample from './examples/ButtonSizeExample.vue';
-import ButtonPillExample from './examples/ButtonPillExample.vue';
-import ButtonGradientMonochromeExample from './examples/ButtonGradientMonochromeExample.vue';
-import ButtonGradientDuotoneExample from './examples/ButtonGradientDuotoneExample.vue';
-import ButtonOutlineColorExample from './examples/ButtonOutlineColorExample.vue';
-import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
-import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
-import ButtonOutlineGradientExample from './examples/ButtonOutlineGradientExample.vue';
-import ButtonGradientShadowExample from './examples/ButtonGradientShadowExample.vue';
-import ButtonIconExample from './examples/ButtonIconExample.vue';
-import ButtonSquareExample from './examples/ButtonSquareExample.vue';
-import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
-import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
+import ButtonColorExample from './button/examples/ButtonColorExample.vue';
+import ButtonSizeExample from './button/examples/ButtonSizeExample.vue';
+import ButtonPillExample from './button/examples/ButtonPillExample.vue';
+import ButtonGradientMonochromeExample from './button/examples/ButtonGradientMonochromeExample.vue';
+import ButtonGradientDuotoneExample from './button/examples/ButtonGradientDuotoneExample.vue';
+import ButtonOutlineColorExample from './button/examples/ButtonOutlineColorExample.vue';
+import ButtonPrefixExample from './button/examples/ButtonPrefixExample.vue';
+import ButtonSuffixExample from './button/examples/ButtonSuffixExample.vue';
+import ButtonOutlineGradientExample from './button/examples/ButtonOutlineGradientExample.vue';
+import ButtonGradientShadowExample from './button/examples/ButtonGradientShadowExample.vue';
+import ButtonIconExample from './button/examples/ButtonIconExample.vue';
+import ButtonSquareExample from './button/examples/ButtonSquareExample.vue';
+import ButtonDisabledExample from './button/examples/ButtonDisabledExample.vue';
+import ButtonLoadingExample from './button/examples/ButtonLoadingExample.vue';
 </script>
 
 # Vue Button Component - Flowbite
@@ -37,7 +37,7 @@ defineProps({
     color: {
         type: String as PropType<ButtonVariant>,
         default: 'default',
-    }, 
+    },
 })
 ```
 
diff --git a/docs/components/card/card.md b/docs/components/card.md
similarity index 90%
rename from docs/components/card/card.md
rename to docs/components/card.md
index 4358c58..2793278 100644
--- a/docs/components/card/card.md
+++ b/docs/components/card.md
@@ -1,7 +1,7 @@
 <script setup>
-import CardDefaultExample from './examples/CardDefaultExample.vue'
-import CardImageExample from './examples/CardImageExample.vue'
-import CardHorizontalExample from './examples/CardHorizontalExample.vue'
+import CardDefaultExample from './card/examples/CardDefaultExample.vue'
+import CardImageExample from './card/examples/CardImageExample.vue'
+import CardHorizontalExample from './card/examples/CardHorizontalExample.vue'
 </script>
 # Vue Card Components - Flowbite
 
diff --git a/docs/components/carousel/carousel.md b/docs/components/carousel.md
similarity index 85%
rename from docs/components/carousel/carousel.md
rename to docs/components/carousel.md
index 83f7474..874c21f 100644
--- a/docs/components/carousel/carousel.md
+++ b/docs/components/carousel.md
@@ -1,10 +1,10 @@
 <script setup>
-import CarouselDefaultExample from './examples/CarouselDefaultExample.vue';
-import CarouselNoControlsExample from './examples/CarouselNoControlsExample.vue';
-import CarouselNoIndicatorsExample from './examples/CarouselNoIndicatorsExample.vue';
-import CarouselSlideExample from './examples/CarouselSlideExample.vue';
-import CarouselSlideIntervalExample from './examples/CarouselSlideIntervalExample.vue';
-import CarouselPicturesExample from './examples/CarouselPicturesExample.vue';
+import CarouselDefaultExample from './carousel/examples/CarouselDefaultExample.vue';
+import CarouselNoControlsExample from './carousel/examples/CarouselNoControlsExample.vue';
+import CarouselNoIndicatorsExample from './carousel/examples/CarouselNoIndicatorsExample.vue';
+import CarouselSlideExample from './carousel/examples/CarouselSlideExample.vue';
+import CarouselSlideIntervalExample from './carousel/examples/CarouselSlideIntervalExample.vue';
+import CarouselPicturesExample from './carousel/examples/CarouselPicturesExample.vue';
 </script>
 # Vue Carousel Component - Flowbite
 
@@ -166,4 +166,4 @@ const pictures = [
 <template>
   <Carousel :pictures="pictures"></Carousel>
 </template>
-```
\ No newline at end of file
+```
diff --git a/docs/components/dropdown/dropdown.md b/docs/components/dropdown.md
similarity index 95%
rename from docs/components/dropdown/dropdown.md
rename to docs/components/dropdown.md
index 9a570de..ee9af0b 100644
--- a/docs/components/dropdown/dropdown.md
+++ b/docs/components/dropdown.md
@@ -1,7 +1,7 @@
 <script setup>
-import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
-import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
-import DropdownTriggerExample from './examples/DropdownTriggerExample.vue';
+import DropdownPlacementExample from './dropdown/examples/DropdownPlacementExample.vue';
+import DropdownListGroupExample from './dropdown/examples/DropdownListGroupExample.vue';
+import DropdownTriggerExample from './dropdown/examples/DropdownTriggerExample.vue';
 </script>
 
 # Vue Dropdown Component - Flowbite
diff --git a/docs/components/footer/footer.md b/docs/components/footer.md
similarity index 75%
rename from docs/components/footer/footer.md
rename to docs/components/footer.md
index 897328a..acdb1f8 100644
--- a/docs/components/footer/footer.md
+++ b/docs/components/footer.md
@@ -1,5 +1,5 @@
 <script setup>
-import FooterExample from './examples/FooterExample.vue'
+import FooterExample from './footer/examples/FooterExample.vue'
 </script>
 # Vue Footer Component - Flowbite
 
diff --git a/docs/components/input/input.md b/docs/components/input.md
similarity index 87%
rename from docs/components/input/input.md
rename to docs/components/input.md
index 026f765..c938039 100644
--- a/docs/components/input/input.md
+++ b/docs/components/input.md
@@ -1,10 +1,10 @@
 <script setup>
-import InputExample from './examples/InputExample.vue';
-import InputSizeExample from './examples/InputSizeExample.vue';
-import InputDisabledExample from './examples/InputDisabledExample.vue';
-import InputHelperExample from './examples/InputHelperExample.vue';
-import InputPrefixExample from './examples/InputPrefixExample.vue';
-import InputSuffixExample from './examples/InputSuffixExample.vue'
+import InputExample from './input/examples/InputExample.vue';
+import InputSizeExample from './input/examples/InputSizeExample.vue';
+import InputDisabledExample from './input/examples/InputDisabledExample.vue';
+import InputHelperExample from './input/examples/InputHelperExample.vue';
+import InputPrefixExample from './input/examples/InputPrefixExample.vue';
+import InputSuffixExample from './input/examples/InputSuffixExample.vue'
 </script>
 
 # Vue Input Components - Flowbite
diff --git a/docs/components/listGroup/listGroup.md b/docs/components/list-group.md
similarity index 94%
rename from docs/components/listGroup/listGroup.md
rename to docs/components/list-group.md
index 6793a10..72f0650 100644
--- a/docs/components/listGroup/listGroup.md
+++ b/docs/components/list-group.md
@@ -1,8 +1,8 @@
 <script setup>
-import ListGroupExample from './examples/ListGroupExample.vue'
-import ListGroupHoverExample from './examples/ListGroupHoverExample.vue'
-import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
-import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
+import ListGroupExample from './listGroup/examples/ListGroupExample.vue'
+import ListGroupHoverExample from './listGroup/examples/ListGroupHoverExample.vue'
+import ListGroupHoverIconExample from './listGroup/examples/ListGroupHoverIconExample.vue'
+import ListGroupHoverIconDisabledExample from './listGroup/examples/ListGroupHoverIconDisabledExample.vue'
 </script>
 
 # Vue List Group Component - Flowbite
diff --git a/docs/components/modal/modal.md b/docs/components/modal.md
similarity index 96%
rename from docs/components/modal/modal.md
rename to docs/components/modal.md
index a0a760e..a6caeb4 100644
--- a/docs/components/modal/modal.md
+++ b/docs/components/modal.md
@@ -1,6 +1,6 @@
 <script setup>
-import ModalExample from './examples/ModalExample.vue';
-import ModalSizeExample from './examples/ModalSizeExample.vue';
+import ModalExample from './modal/examples/ModalExample.vue';
+import ModalSizeExample from './modal/examples/ModalSizeExample.vue';
 </script>
 # Vue Modal Component - Flowbite
 
diff --git a/docs/components/navbar/navbar.md b/docs/components/navbar.md
similarity index 92%
rename from docs/components/navbar/navbar.md
rename to docs/components/navbar.md
index f78300a..4fb5e1d 100644
--- a/docs/components/navbar/navbar.md
+++ b/docs/components/navbar.md
@@ -1,8 +1,8 @@
 <script setup>
-import NavbarExample from './examples/NavbarExample.vue'
-import NavbarSolidExample from './examples/NavbarSolidExample.vue'
-import NavbarActionButtonExample from './examples/NavbarActionButtonExample.vue'
-import NavbarCustomMobileIconExample from './examples/NavbarCustomMobileIconExample.vue'
+import NavbarExample from './navbar/examples/NavbarExample.vue'
+import NavbarSolidExample from './navbar/examples/NavbarSolidExample.vue'
+import NavbarActionButtonExample from './navbar/examples/NavbarActionButtonExample.vue'
+import NavbarCustomMobileIconExample from './navbar/examples/NavbarCustomMobileIconExample.vue'
 
 </script>
 # Navbar Component – Flowbite
diff --git a/docs/components/pagination/pagination.md b/docs/components/pagination.md
similarity index 73%
rename from docs/components/pagination/pagination.md
rename to docs/components/pagination.md
index 9b8fbe2..c4388f2 100644
--- a/docs/components/pagination/pagination.md
+++ b/docs/components/pagination.md
@@ -1,5 +1,5 @@
 <script setup>
-import PaginationExample from './examples/PaginationExample.vue'
+import PaginationExample from './pagination/examples/PaginationExample.vue'
 </script>
 # Vue Pagination Component - Flowbite
 
diff --git a/docs/components/progress/progress.md b/docs/components/progress.md
similarity index 83%
rename from docs/components/progress/progress.md
rename to docs/components/progress.md
index 10c7707..f377cbe 100644
--- a/docs/components/progress/progress.md
+++ b/docs/components/progress.md
@@ -1,9 +1,9 @@
 <script setup>
-import ProgressExample from './examples/ProgressExample.vue'
-import ProgressSizeExample from './examples/ProgressSizeExample.vue'
-import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
-import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
-import ProgressColorExample from './examples/ProgressColorExample.vue'
+import ProgressExample from './progress/examples/ProgressExample.vue'
+import ProgressSizeExample from './progress/examples/ProgressSizeExample.vue'
+import ProgressInsideLabelExample from './progress/examples/ProgressInsideLabelExample.vue'
+import ProgressOutsideLabelExample from './progress/examples/ProgressOutsideLabelExample.vue'
+import ProgressColorExample from './progress/examples/ProgressColorExample.vue'
 
 
 </script>
@@ -99,4 +99,4 @@ import { Progress } from 'flowbite-vue'
 </template>
 ```
 
-<ProgressColorExample />
\ No newline at end of file
+<ProgressColorExample />
diff --git a/docs/components/rating/rating.md b/docs/components/rating.md
similarity index 84%
rename from docs/components/rating/rating.md
rename to docs/components/rating.md
index 9c3136f..09dbffb 100644
--- a/docs/components/rating/rating.md
+++ b/docs/components/rating.md
@@ -1,8 +1,8 @@
 <script setup>
-import RatingExample from './examples/RatingExample.vue'
-import RatingWithTextExample from './examples/RatingWithTextExample.vue'
-import RatingCountExample from './examples/RatingCountExample.vue'
-import RatingStarSizesExample from './examples/RatingStarSizesExample.vue'
+import RatingExample from './rating/examples/RatingExample.vue'
+import RatingWithTextExample from './rating/examples/RatingWithTextExample.vue'
+import RatingCountExample from './rating/examples/RatingCountExample.vue'
+import RatingStarSizesExample from './rating/examples/RatingStarSizesExample.vue'
 </script>
 # Vue Rating Component - Flowbite
 
diff --git a/docs/components/sidebar/sidebar.md b/docs/components/sidebar.md
similarity index 75%
rename from docs/components/sidebar/sidebar.md
rename to docs/components/sidebar.md
index 98dcea5..b7c644b 100644
--- a/docs/components/sidebar/sidebar.md
+++ b/docs/components/sidebar.md
@@ -1,5 +1,5 @@
 <script setup>
-import SidebarExample from './examples/SidebarExample.vue'
+import SidebarExample from './sidebar/examples/SidebarExample.vue'
 </script>
 # Vue Sidebar Component - Flowbite
 
diff --git a/docs/components/spinner/spinner.md b/docs/components/spinner.md
similarity index 89%
rename from docs/components/spinner/spinner.md
rename to docs/components/spinner.md
index b5cbe05..ea2a9a1 100644
--- a/docs/components/spinner/spinner.md
+++ b/docs/components/spinner.md
@@ -1,7 +1,7 @@
 <script setup>
-import SpinnerBasicExample from './examples/SpinnerBasicExample.vue';
-import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
-import SpinnerColorExample from './examples/SpinnerColorExample.vue';
+import SpinnerBasicExample from './spinner/examples/SpinnerBasicExample.vue';
+import SpinnerSizeExample from './spinner/examples/SpinnerSizeExample.vue';
+import SpinnerColorExample from './spinner/examples/SpinnerColorExample.vue';
 </script>
 
 # Vue Spinner Component - Flowbite
diff --git a/docs/components/table/table.md b/docs/components/table.md
similarity index 75%
rename from docs/components/table/table.md
rename to docs/components/table.md
index 1ed74e5..163ec9d 100644
--- a/docs/components/table/table.md
+++ b/docs/components/table.md
@@ -1,5 +1,5 @@
 <script setup>
-import TableExample from './examples/TableExample.vue'
+import TableExample from './table/examples/TableExample.vue'
 </script>
 # Vue Table Component - Flowbite
 
diff --git a/docs/components/tabs/tabs.md b/docs/components/tabs.md
similarity index 92%
rename from docs/components/tabs/tabs.md
rename to docs/components/tabs.md
index 33926b0..8fa5c33 100644
--- a/docs/components/tabs/tabs.md
+++ b/docs/components/tabs.md
@@ -1,7 +1,7 @@
 <script setup>
-import TabsDefaultExample from './examples/TabsDefaultExample.vue';
-import TabsPillsExample from './examples/TabsPillsExample.vue';
-import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
+import TabsDefaultExample from './tabs/examples/TabsDefaultExample.vue';
+import TabsPillsExample from './tabs/examples/TabsPillsExample.vue';
+import TabsUnderlineExample from './tabs/examples/TabsUnderlineExample.vue';
 </script>
 
 # Vue Tabs Component - Flowbite
diff --git a/docs/components/timeline/timeline.md b/docs/components/timeline.md
similarity index 74%
rename from docs/components/timeline/timeline.md
rename to docs/components/timeline.md
index 8d552d7..6516756 100644
--- a/docs/components/timeline/timeline.md
+++ b/docs/components/timeline.md
@@ -1,5 +1,5 @@
 <script setup>
-import TimelineExample from './examples/TimelineExample.vue'
+import TimelineExample from './timeline/examples/TimelineExample.vue'
 </script>
 # Vue Timeline Component - Flowbite
 
diff --git a/docs/components/toast/toast.md b/docs/components/toast.md
similarity index 93%
rename from docs/components/toast/toast.md
rename to docs/components/toast.md
index b8ddf84..b766be5 100644
--- a/docs/components/toast/toast.md
+++ b/docs/components/toast.md
@@ -1,10 +1,10 @@
 <script setup>
-import ToastTypeExample from './examples/ToastTypeExample.vue';
-import ToastClosableExample from './examples/ToastClosableExample.vue';
-import ToastIconExample from './examples/ToastIconExample.vue';
-import ToastDivideExample from './examples/ToastDivideExample.vue';
-import ToastMessageExample from './examples/ToastMessageExample.vue';
-import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
+import ToastTypeExample from './toast/examples/ToastTypeExample.vue';
+import ToastClosableExample from './toast/examples/ToastClosableExample.vue';
+import ToastIconExample from './toast/examples/ToastIconExample.vue';
+import ToastDivideExample from './toast/examples/ToastDivideExample.vue';
+import ToastMessageExample from './toast/examples/ToastMessageExample.vue';
+import ToastInteractiveExample from './toast/examples/ToastInteractiveExample.vue'
 </script>
 # Vue Toast Component - Flowbite
 
diff --git a/docs/components/tooltip/tooltip.md b/docs/components/tooltip.md
similarity index 95%
rename from docs/components/tooltip/tooltip.md
rename to docs/components/tooltip.md
index ab4949d..d578559 100644
--- a/docs/components/tooltip/tooltip.md
+++ b/docs/components/tooltip.md
@@ -1,8 +1,8 @@
 <script setup>
-import TooltipExample from './examples/TooltipExample.vue'
-import TooltipPositionExample from './examples/TooltipPositionExample.vue'
-import TooltipStyleExample from './examples/TooltipStyleExample.vue'
-import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
+import TooltipExample from './tooltip/examples/TooltipExample.vue'
+import TooltipPositionExample from './tooltip/examples/TooltipPositionExample.vue'
+import TooltipStyleExample from './tooltip/examples/TooltipStyleExample.vue'
+import TooltipTriggerExample from './tooltip/examples/TooltipTriggerExample.vue'
 </script>
 # Vue Tooltip Component - Flowbite