diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index af09dcf..8818810 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -27,37 +27,37 @@ function buildSidebar() {
 
 function getComponents() {
   return [
-    { text: 'Alert', link: '/guide/alert/alert.md' },
-    { text: 'Button', link: '/guide/button/button.md' },
-    { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
-    { text: 'Dropdown', link: '/guide/dropdown/dropdown.md' },
-    { text: 'Spinner', link: '/guide/spinner/spinner.md' },
-    { text: 'Tabs', link: '/guide/tabs/tabs.md' },
-    { text: 'ListGroup', link: 'guide/listGroup/listGroup.md' },
+    { text: 'Alert', link: '/components/alert/alert.md' },
+    { text: 'Button', link: '/components/button/button.md' },
+    { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
+    { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
+    { text: 'Spinner', link: '/components/spinner/spinner.md' },
+    { text: 'Tabs', link: '/components/tabs/tabs.md' },
+    { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
 
-    { text: '- Accordion', link: 'guide/accordion/accordion.md' },
-    { text: '- Avatar', link: 'guide/avatar/avatar.md' },
-    { text: '- Badge', link: 'guide/badge/badge.md' },
-    { text: '- Breadcrumb', link: 'guide/breadcrumb/breadcrumb.md' },
-    { text: '- Card', link: 'guide/card/card.md' },
-    { text: '- Carousel', link: 'guide/carousel/carousel.md' },
-    { text: '- Footer', link: 'guide/footer/footer.md' },
-    { text: '- Modal', link: 'guide/modal/modal.md' },
-    { text: '- Navbar', link: 'guide/navbar/navbar.md' },
-    { text: '- Pagination', link: 'guide/pagination/pagination.md' },
-    { text: '- Progress', link: 'guide/progress/progress.md' },
-    { text: '- Rating', link: 'guide/rating/rating.md' },
-    { text: '- Sidebar', link: 'guide/sidebar/sidebar.md' },
-    { text: '- Table', link: 'guide/table/table.md' },
-    { text: '- Timeline', link: 'guide/timeline/timeline.md' },
-    { text: '- Toast', link: 'guide/toast/toast.md' },
-    { text: '- Tooltip', link: 'guide/tooltip/tooltip.md' },
+    { text: '- Accordion', link: 'components/accordion/accordion.md' },
+    { text: '- Avatar', link: 'components/avatar/avatar.md' },
+    { text: '- Badge', link: 'components/badge/badge.md' },
+    { text: '- Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
+    { text: '- Card', link: 'components/card/card.md' },
+    { text: '- Carousel', link: 'components/carousel/carousel.md' },
+    { text: '- Footer', link: 'components/footer/footer.md' },
+    { text: '- Modal', link: 'components/modal/modal.md' },
+    { text: '- Navbar', link: 'components/navbar/navbar.md' },
+    { text: '- Pagination', link: 'components/pagination/pagination.md' },
+    { text: '- Progress', link: 'components/progress/progress.md' },
+    { text: '- Rating', link: 'components/rating/rating.md' },
+    { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
+    { text: '- Table', link: 'components/table/table.md' },
+    { text: '- Timeline', link: 'components/timeline/timeline.md' },
+    { text: '- Toast', link: 'components/toast/toast.md' },
+    { text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
   ]
 }
 
 function getUtils() {
   return [
-    { text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' },
+    { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
   ]
 }
 
@@ -74,7 +74,8 @@ export default defineConfig({
     sidebar: buildSidebar(),
     logo: '/assets/logo.svg',
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' }
+      { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' },
+      { icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' }
     ],
 
     footer: {
diff --git a/docs/guide/accordion/accordion.md b/docs/components/accordion/accordion.md
similarity index 100%
rename from docs/guide/accordion/accordion.md
rename to docs/components/accordion/accordion.md
diff --git a/docs/guide/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
similarity index 100%
rename from docs/guide/accordion/examples/AccordionExample.vue
rename to docs/components/accordion/examples/AccordionExample.vue
diff --git a/docs/guide/alert/alert.md b/docs/components/alert/alert.md
similarity index 90%
rename from docs/guide/alert/alert.md
rename to docs/components/alert/alert.md
index 18a3ca8..3c22dfe 100644
--- a/docs/guide/alert/alert.md
+++ b/docs/components/alert/alert.md
@@ -9,7 +9,17 @@ import AlertInlineExample from './examples/AlertInlineExample.vue';
 
 # Alert
 
-reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+#### Show contextual information to your users using alert elements based on Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+:::
+
+The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
+
+Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
 
 ## Prop - type
 
@@ -205,4 +215,4 @@ import { Alert } from 'flowbite-vue'
     </Alert>
   </div>
 </template>
-```
\ No newline at end of file
+```
diff --git a/docs/guide/alert/examples/AlertBorderExample.vue b/docs/components/alert/examples/AlertBorderExample.vue
similarity index 100%
rename from docs/guide/alert/examples/AlertBorderExample.vue
rename to docs/components/alert/examples/AlertBorderExample.vue
diff --git a/docs/guide/alert/examples/AlertClosableExample.vue b/docs/components/alert/examples/AlertClosableExample.vue
similarity index 100%
rename from docs/guide/alert/examples/AlertClosableExample.vue
rename to docs/components/alert/examples/AlertClosableExample.vue
diff --git a/docs/guide/alert/examples/AlertIconExample.vue b/docs/components/alert/examples/AlertIconExample.vue
similarity index 100%
rename from docs/guide/alert/examples/AlertIconExample.vue
rename to docs/components/alert/examples/AlertIconExample.vue
diff --git a/docs/guide/alert/examples/AlertInlineExample.vue b/docs/components/alert/examples/AlertInlineExample.vue
similarity index 100%
rename from docs/guide/alert/examples/AlertInlineExample.vue
rename to docs/components/alert/examples/AlertInlineExample.vue
diff --git a/docs/guide/alert/examples/AlertTitleExample.vue b/docs/components/alert/examples/AlertTitleExample.vue
similarity index 100%
rename from docs/guide/alert/examples/AlertTitleExample.vue
rename to docs/components/alert/examples/AlertTitleExample.vue
diff --git a/docs/guide/alert/examples/AlertTypeExample.vue b/docs/components/alert/examples/AlertTypeExample.vue
similarity index 100%
rename from docs/guide/alert/examples/AlertTypeExample.vue
rename to docs/components/alert/examples/AlertTypeExample.vue
diff --git a/docs/guide/avatar/avatar.md b/docs/components/avatar/avatar.md
similarity index 100%
rename from docs/guide/avatar/avatar.md
rename to docs/components/avatar/avatar.md
diff --git a/docs/guide/avatar/examples/AvatarExample.vue b/docs/components/avatar/examples/AvatarExample.vue
similarity index 100%
rename from docs/guide/avatar/examples/AvatarExample.vue
rename to docs/components/avatar/examples/AvatarExample.vue
diff --git a/docs/guide/badge/badge.md b/docs/components/badge/badge.md
similarity index 100%
rename from docs/guide/badge/badge.md
rename to docs/components/badge/badge.md
diff --git a/docs/guide/badge/examples/BadgeExample.vue b/docs/components/badge/examples/BadgeExample.vue
similarity index 100%
rename from docs/guide/badge/examples/BadgeExample.vue
rename to docs/components/badge/examples/BadgeExample.vue
diff --git a/docs/guide/breadcrumb/breadcrumb.md b/docs/components/breadcrumb/breadcrumb.md
similarity index 100%
rename from docs/guide/breadcrumb/breadcrumb.md
rename to docs/components/breadcrumb/breadcrumb.md
diff --git a/docs/guide/breadcrumb/examples/BreadcrumbExample.vue b/docs/components/breadcrumb/examples/BreadcrumbExample.vue
similarity index 100%
rename from docs/guide/breadcrumb/examples/BreadcrumbExample.vue
rename to docs/components/breadcrumb/examples/BreadcrumbExample.vue
diff --git a/docs/guide/button/button.md b/docs/components/button/button.md
similarity index 95%
rename from docs/guide/button/button.md
rename to docs/components/button/button.md
index f34201e..a70a0d6 100644
--- a/docs/guide/button/button.md
+++ b/docs/components/button/button.md
@@ -17,7 +17,17 @@ import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
 
 # Button
 
-reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+:::
+
+The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
+
+Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
 
 ## Prop - color
 
@@ -425,4 +435,4 @@ import { Button } from 'flowbite-vue'
     </template>
   </Button>
 </template>
-```
\ No newline at end of file
+```
diff --git a/docs/guide/button/examples/ButtonColorExample.vue b/docs/components/button/examples/ButtonColorExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonColorExample.vue
rename to docs/components/button/examples/ButtonColorExample.vue
diff --git a/docs/guide/button/examples/ButtonDisabledExample.vue b/docs/components/button/examples/ButtonDisabledExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonDisabledExample.vue
rename to docs/components/button/examples/ButtonDisabledExample.vue
diff --git a/docs/guide/button/examples/ButtonGradientDuotoneExample.vue b/docs/components/button/examples/ButtonGradientDuotoneExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonGradientDuotoneExample.vue
rename to docs/components/button/examples/ButtonGradientDuotoneExample.vue
diff --git a/docs/guide/button/examples/ButtonGradientMonochromeExample.vue b/docs/components/button/examples/ButtonGradientMonochromeExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonGradientMonochromeExample.vue
rename to docs/components/button/examples/ButtonGradientMonochromeExample.vue
diff --git a/docs/guide/button/examples/ButtonGradientShadowExample.vue b/docs/components/button/examples/ButtonGradientShadowExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonGradientShadowExample.vue
rename to docs/components/button/examples/ButtonGradientShadowExample.vue
diff --git a/docs/guide/button/examples/ButtonIconExample.vue b/docs/components/button/examples/ButtonIconExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonIconExample.vue
rename to docs/components/button/examples/ButtonIconExample.vue
diff --git a/docs/guide/button/examples/ButtonLoadingExample.vue b/docs/components/button/examples/ButtonLoadingExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonLoadingExample.vue
rename to docs/components/button/examples/ButtonLoadingExample.vue
diff --git a/docs/guide/button/examples/ButtonOutlineColorExample.vue b/docs/components/button/examples/ButtonOutlineColorExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonOutlineColorExample.vue
rename to docs/components/button/examples/ButtonOutlineColorExample.vue
diff --git a/docs/guide/button/examples/ButtonOutlineGradientExample.vue b/docs/components/button/examples/ButtonOutlineGradientExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonOutlineGradientExample.vue
rename to docs/components/button/examples/ButtonOutlineGradientExample.vue
diff --git a/docs/guide/button/examples/ButtonPillExample.vue b/docs/components/button/examples/ButtonPillExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonPillExample.vue
rename to docs/components/button/examples/ButtonPillExample.vue
diff --git a/docs/guide/button/examples/ButtonPrefixExample.vue b/docs/components/button/examples/ButtonPrefixExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonPrefixExample.vue
rename to docs/components/button/examples/ButtonPrefixExample.vue
diff --git a/docs/guide/button/examples/ButtonSizeExample.vue b/docs/components/button/examples/ButtonSizeExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonSizeExample.vue
rename to docs/components/button/examples/ButtonSizeExample.vue
diff --git a/docs/guide/button/examples/ButtonSquareExample.vue b/docs/components/button/examples/ButtonSquareExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonSquareExample.vue
rename to docs/components/button/examples/ButtonSquareExample.vue
diff --git a/docs/guide/button/examples/ButtonSuffixExample.vue b/docs/components/button/examples/ButtonSuffixExample.vue
similarity index 100%
rename from docs/guide/button/examples/ButtonSuffixExample.vue
rename to docs/components/button/examples/ButtonSuffixExample.vue
diff --git a/docs/guide/buttonGroup/buttonGroup.md b/docs/components/buttonGroup/buttonGroup.md
similarity index 77%
rename from docs/guide/buttonGroup/buttonGroup.md
rename to docs/components/buttonGroup/buttonGroup.md
index 66b13e2..7296465 100644
--- a/docs/guide/buttonGroup/buttonGroup.md
+++ b/docs/components/buttonGroup/buttonGroup.md
@@ -5,7 +5,15 @@ import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
 
 # Button Group
 
-reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+:::
+
+The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.
 
 ## Basic example
 
@@ -46,4 +54,4 @@ import { ButtonGroup, Button } from 'flowbite-vue'
     </Button>
   </button-group>
 </template>
-```
\ No newline at end of file
+```
diff --git a/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue b/docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue
similarity index 100%
rename from docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
rename to docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue
diff --git a/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue b/docs/components/buttonGroup/examples/ButtonGroupIconExample.vue
similarity index 100%
rename from docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
rename to docs/components/buttonGroup/examples/ButtonGroupIconExample.vue
diff --git a/docs/guide/card/card.md b/docs/components/card/card.md
similarity index 100%
rename from docs/guide/card/card.md
rename to docs/components/card/card.md
diff --git a/docs/guide/card/examples/CardExample.vue b/docs/components/card/examples/CardExample.vue
similarity index 100%
rename from docs/guide/card/examples/CardExample.vue
rename to docs/components/card/examples/CardExample.vue
diff --git a/docs/guide/carousel/carousel.md b/docs/components/carousel/carousel.md
similarity index 100%
rename from docs/guide/carousel/carousel.md
rename to docs/components/carousel/carousel.md
diff --git a/docs/guide/carousel/examples/CarouselExample.vue b/docs/components/carousel/examples/CarouselExample.vue
similarity index 100%
rename from docs/guide/carousel/examples/CarouselExample.vue
rename to docs/components/carousel/examples/CarouselExample.vue
diff --git a/docs/guide/dropdown/dropdown.md b/docs/components/dropdown/dropdown.md
similarity index 87%
rename from docs/guide/dropdown/dropdown.md
rename to docs/components/dropdown/dropdown.md
index 8b32b8e..a4c2746 100644
--- a/docs/guide/dropdown/dropdown.md
+++ b/docs/components/dropdown/dropdown.md
@@ -5,6 +5,16 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
 
 # Dropdown
 
+#### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/dropdowns/](https://flowbite.com/docs/components/dropdowns/)
+:::
+
+The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
+
 
 ## Props - placement
 
diff --git a/docs/guide/dropdown/examples/DropdownListGroupExample.vue b/docs/components/dropdown/examples/DropdownListGroupExample.vue
similarity index 100%
rename from docs/guide/dropdown/examples/DropdownListGroupExample.vue
rename to docs/components/dropdown/examples/DropdownListGroupExample.vue
diff --git a/docs/guide/dropdown/examples/DropdownPlacementExample.vue b/docs/components/dropdown/examples/DropdownPlacementExample.vue
similarity index 100%
rename from docs/guide/dropdown/examples/DropdownPlacementExample.vue
rename to docs/components/dropdown/examples/DropdownPlacementExample.vue
diff --git a/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue b/docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
similarity index 100%
rename from docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
rename to docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
diff --git a/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue b/docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue
similarity index 100%
rename from docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue
rename to docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue
diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue
similarity index 100%
rename from docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue
rename to docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue
diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue
similarity index 100%
rename from docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue
rename to docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue
diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue
similarity index 100%
rename from docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue
rename to docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue
diff --git a/docs/guide/flowbiteThemable/flowbiteThemable.md b/docs/components/flowbiteThemable/flowbiteThemable.md
similarity index 100%
rename from docs/guide/flowbiteThemable/flowbiteThemable.md
rename to docs/components/flowbiteThemable/flowbiteThemable.md
diff --git a/docs/guide/footer/examples/FooterExample.vue b/docs/components/footer/examples/FooterExample.vue
similarity index 100%
rename from docs/guide/footer/examples/FooterExample.vue
rename to docs/components/footer/examples/FooterExample.vue
diff --git a/docs/guide/footer/footer.md b/docs/components/footer/footer.md
similarity index 100%
rename from docs/guide/footer/footer.md
rename to docs/components/footer/footer.md
diff --git a/docs/guide/listGroup/examples/ListGroupExample.vue b/docs/components/listGroup/examples/ListGroupExample.vue
similarity index 100%
rename from docs/guide/listGroup/examples/ListGroupExample.vue
rename to docs/components/listGroup/examples/ListGroupExample.vue
diff --git a/docs/guide/listGroup/examples/ListGroupHoverExample.vue b/docs/components/listGroup/examples/ListGroupHoverExample.vue
similarity index 100%
rename from docs/guide/listGroup/examples/ListGroupHoverExample.vue
rename to docs/components/listGroup/examples/ListGroupHoverExample.vue
diff --git a/docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue b/docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue
similarity index 100%
rename from docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue
rename to docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue
diff --git a/docs/guide/listGroup/examples/ListGroupHoverIconExample.vue b/docs/components/listGroup/examples/ListGroupHoverIconExample.vue
similarity index 100%
rename from docs/guide/listGroup/examples/ListGroupHoverIconExample.vue
rename to docs/components/listGroup/examples/ListGroupHoverIconExample.vue
diff --git a/docs/guide/listGroup/listGroup.md b/docs/components/listGroup/listGroup.md
similarity index 93%
rename from docs/guide/listGroup/listGroup.md
rename to docs/components/listGroup/listGroup.md
index 139512a..2d5aea4 100644
--- a/docs/guide/listGroup/listGroup.md
+++ b/docs/components/listGroup/listGroup.md
@@ -7,6 +7,15 @@ import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisa
 
 # ListGroup
 
+#### Use the list group component to display a series of items, buttons or links inside a single element
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/list-group/](https://flowbite.com/docs/components/list-group/)
+:::
+
+The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.
 
 ## No hover
 ```vue
diff --git a/docs/guide/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue
similarity index 100%
rename from docs/guide/modal/examples/ModalExample.vue
rename to docs/components/modal/examples/ModalExample.vue
diff --git a/docs/guide/modal/modal.md b/docs/components/modal/modal.md
similarity index 100%
rename from docs/guide/modal/modal.md
rename to docs/components/modal/modal.md
diff --git a/docs/guide/navbar/examples/NavbarExample.vue b/docs/components/navbar/examples/NavbarExample.vue
similarity index 100%
rename from docs/guide/navbar/examples/NavbarExample.vue
rename to docs/components/navbar/examples/NavbarExample.vue
diff --git a/docs/guide/navbar/navbar.md b/docs/components/navbar/navbar.md
similarity index 100%
rename from docs/guide/navbar/navbar.md
rename to docs/components/navbar/navbar.md
diff --git a/docs/guide/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue
similarity index 100%
rename from docs/guide/pagination/examples/PaginationExample.vue
rename to docs/components/pagination/examples/PaginationExample.vue
diff --git a/docs/guide/pagination/pagination.md b/docs/components/pagination/pagination.md
similarity index 100%
rename from docs/guide/pagination/pagination.md
rename to docs/components/pagination/pagination.md
diff --git a/docs/guide/progress/examples/ProgressExample.vue b/docs/components/progress/examples/ProgressExample.vue
similarity index 100%
rename from docs/guide/progress/examples/ProgressExample.vue
rename to docs/components/progress/examples/ProgressExample.vue
diff --git a/docs/guide/progress/progress.md b/docs/components/progress/progress.md
similarity index 100%
rename from docs/guide/progress/progress.md
rename to docs/components/progress/progress.md
diff --git a/docs/guide/rating/examples/RatingExample.vue b/docs/components/rating/examples/RatingExample.vue
similarity index 100%
rename from docs/guide/rating/examples/RatingExample.vue
rename to docs/components/rating/examples/RatingExample.vue
diff --git a/docs/guide/rating/rating.md b/docs/components/rating/rating.md
similarity index 100%
rename from docs/guide/rating/rating.md
rename to docs/components/rating/rating.md
diff --git a/docs/guide/sidebar/examples/SidebarExample.vue b/docs/components/sidebar/examples/SidebarExample.vue
similarity index 100%
rename from docs/guide/sidebar/examples/SidebarExample.vue
rename to docs/components/sidebar/examples/SidebarExample.vue
diff --git a/docs/guide/sidebar/sidebar.md b/docs/components/sidebar/sidebar.md
similarity index 100%
rename from docs/guide/sidebar/sidebar.md
rename to docs/components/sidebar/sidebar.md
diff --git a/docs/guide/spinner/examples/SpinnerBasicExample.vue b/docs/components/spinner/examples/SpinnerBasicExample.vue
similarity index 100%
rename from docs/guide/spinner/examples/SpinnerBasicExample.vue
rename to docs/components/spinner/examples/SpinnerBasicExample.vue
diff --git a/docs/guide/spinner/examples/SpinnerColorExample.vue b/docs/components/spinner/examples/SpinnerColorExample.vue
similarity index 100%
rename from docs/guide/spinner/examples/SpinnerColorExample.vue
rename to docs/components/spinner/examples/SpinnerColorExample.vue
diff --git a/docs/guide/spinner/examples/SpinnerSizeExample.vue b/docs/components/spinner/examples/SpinnerSizeExample.vue
similarity index 100%
rename from docs/guide/spinner/examples/SpinnerSizeExample.vue
rename to docs/components/spinner/examples/SpinnerSizeExample.vue
diff --git a/docs/guide/spinner/spinner.md b/docs/components/spinner/spinner.md
similarity index 75%
rename from docs/guide/spinner/spinner.md
rename to docs/components/spinner/spinner.md
index d3ffd77..8fea681 100644
--- a/docs/guide/spinner/spinner.md
+++ b/docs/components/spinner/spinner.md
@@ -6,7 +6,16 @@ import SpinnerColorExample from './examples/SpinnerColorExample.vue';
 
 # Spinner
 
-reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+#### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+:::
+
+The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
+
 
 ## Basic example
 
diff --git a/docs/guide/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue
similarity index 100%
rename from docs/guide/table/examples/TableExample.vue
rename to docs/components/table/examples/TableExample.vue
diff --git a/docs/guide/table/table.md b/docs/components/table/table.md
similarity index 100%
rename from docs/guide/table/table.md
rename to docs/components/table/table.md
diff --git a/docs/guide/tabs/examples/TabsDefaultExample.vue b/docs/components/tabs/examples/TabsDefaultExample.vue
similarity index 100%
rename from docs/guide/tabs/examples/TabsDefaultExample.vue
rename to docs/components/tabs/examples/TabsDefaultExample.vue
diff --git a/docs/guide/tabs/examples/TabsPillsExample.vue b/docs/components/tabs/examples/TabsPillsExample.vue
similarity index 100%
rename from docs/guide/tabs/examples/TabsPillsExample.vue
rename to docs/components/tabs/examples/TabsPillsExample.vue
diff --git a/docs/guide/tabs/examples/TabsUnderlineExample.vue b/docs/components/tabs/examples/TabsUnderlineExample.vue
similarity index 100%
rename from docs/guide/tabs/examples/TabsUnderlineExample.vue
rename to docs/components/tabs/examples/TabsUnderlineExample.vue
diff --git a/docs/guide/tabs/tabs.md b/docs/components/tabs/tabs.md
similarity index 83%
rename from docs/guide/tabs/tabs.md
rename to docs/components/tabs/tabs.md
index 648dd18..82ebd7a 100644
--- a/docs/guide/tabs/tabs.md
+++ b/docs/components/tabs/tabs.md
@@ -6,7 +6,15 @@ import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
 
 # Tabs
 
-reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
+#### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
+:::
+
+The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
 
 ## Prop - variant (default)
 
@@ -118,4 +126,4 @@ defineProps({
         default: 'if',
     },
 })
-```
\ No newline at end of file
+```
diff --git a/docs/guide/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
similarity index 100%
rename from docs/guide/timeline/examples/TimelineExample.vue
rename to docs/components/timeline/examples/TimelineExample.vue
diff --git a/docs/guide/timeline/timeline.md b/docs/components/timeline/timeline.md
similarity index 100%
rename from docs/guide/timeline/timeline.md
rename to docs/components/timeline/timeline.md
diff --git a/docs/components/toast/examples/ToastExample.vue b/docs/components/toast/examples/ToastExample.vue
new file mode 100644
index 0000000..91f1323
--- /dev/null
+++ b/docs/components/toast/examples/ToastExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap">
+    <Toast :type="'warning'">
+      Improve password difficulty.
+    </Toast>
+    <Toast :type="'success'">
+      Item moved successfully.
+    </Toast>
+    <Toast :type="'danger'">
+      Item has been deleted.
+    </Toast>
+  </div>
+</template>
+<script setup>
+import { Toast } from '../../../../src/index'
+</script>
diff --git a/docs/guide/toast/toast.md b/docs/components/toast/toast.md
similarity index 50%
rename from docs/guide/toast/toast.md
rename to docs/components/toast/toast.md
index 75faac8..76ac26f 100644
--- a/docs/guide/toast/toast.md
+++ b/docs/components/toast/toast.md
@@ -8,7 +8,15 @@ import ToastExample from './examples/ToastExample.vue'
 import { Toast } from 'flowbite-vue'
 </script>
 <template>
-  <Toast></Toast>
+  <Toast type="warning">
+    Improve password difficulty.
+  </Toast>
+  <Toast type="success">
+    Item moved successfully.
+  </Toast>
+  <Toast type="danger">
+    Item has been deleted.
+  </Toast>
 </template>
 ```
 
diff --git a/docs/guide/tooltip/examples/TooltipExample.vue b/docs/components/tooltip/examples/TooltipExample.vue
similarity index 100%
rename from docs/guide/tooltip/examples/TooltipExample.vue
rename to docs/components/tooltip/examples/TooltipExample.vue
diff --git a/docs/guide/tooltip/tooltip.md b/docs/components/tooltip/tooltip.md
similarity index 100%
rename from docs/guide/tooltip/tooltip.md
rename to docs/components/tooltip/tooltip.md
diff --git a/docs/guide/toast/examples/ToastExample.vue b/docs/guide/toast/examples/ToastExample.vue
deleted file mode 100644
index 31c80c7..0000000
--- a/docs/guide/toast/examples/ToastExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Toast></Toast>
-  </div>
-</template>
-<script setup>
-import { Toast } from '../../../../src/index'
-</script>
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 1e92c2d..c26045e 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -1,6 +1,5 @@
 <template>
-  <button type="button" :class="wrapperClasses" :disabled="disabled">
-
+  <flowbite-themable-child tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
     <div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
       <slot name="prefix" v-else />
@@ -24,8 +23,7 @@
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
       <slot name="suffix" v-else />
     </div>
-
-  </button>
+  </flowbite-themable-child>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -33,8 +31,9 @@ import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import { useButtonClasses } from './composables/useButtonClasses'
 import { useButtonSpinner } from './composables/useButtonSpinner'
-import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
+import FlowbiteThemableChild from '../utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
 
+import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
 const props = defineProps({
   color: {
     type: String as PropType<ButtonVariant>,
diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts
index be079fa..ec71268 100644
--- a/src/components/Button/composables/useButtonClasses.ts
+++ b/src/components/Button/composables/useButtonClasses.ts
@@ -168,8 +168,6 @@ const alternativeColors = ['alternative', 'light']
 export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } {
   const slots = useSlots()
 
-  const theme = useFlowbiteThemable()
-
   const sizeClasses = computed(() => {
     if (props.square.value) return buttonSquareSizeClasses[props.size.value]
     return buttonSizeClasses[props.size.value]
@@ -180,7 +178,6 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
     const isColor = !!props.color.value
     const isOutline = props.outline.value
 
-    const isActiveTheme = theme.isActive.value
 
     let hoverClass = ''
     let backgroundClass = ''
@@ -205,7 +202,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
     } else if (isColor && isOutline) { // COLOR AND OUTLINE
       if (!alternativeColors.includes(props.color.value)) {
-        const color = isActiveTheme ? theme.color.value : props.color.value
+        const color = props.color.value
 
         backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default]
 
@@ -217,7 +214,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
 
     } else { // JUST COLOR
-      const color = isActiveTheme ? theme.color.value : props.color.value
+      const color = props.color.value
 
       backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default]
 
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index 6e23f23..7000cc9 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -1,9 +1,13 @@
 <template>
   <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
-    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
+    <div v-if="type !== 'empty'" :class="['inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg', typeClasses]">
+      <svg v-if="type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
+      <svg v-else-if="type === 'danger'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <svg v-else-if="type === 'warning'" aria-hidden="true" class="text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
+    </div>
+    <div class="ml-3 text-sm font-normal">
+      <slot />
     </div>
-    <div class="ml-3 text-sm font-normal">Set yourself free.</div>
     <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
@@ -11,14 +15,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
+import type { ToastPreset } from '@/components/Toast/types'
 import type { PropType } from 'vue'
+import { useToastClasses } from './composables/useToastClasses'
+import { toRefs } from 'vue'
 
 const props = defineProps({
-  duration: {
-    type: Number,
-    default: 300,
+  type: {
+    type: String as PropType<ToastPreset>,
+    default: 'empty',
   },
 })
 
+const { typeClasses } = useToastClasses(toRefs(props))
+
 </script>
diff --git a/src/components/Toast/composables/useToastClasses.ts b/src/components/Toast/composables/useToastClasses.ts
new file mode 100644
index 0000000..42c47db
--- /dev/null
+++ b/src/components/Toast/composables/useToastClasses.ts
@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { ToastPreset } from '@/components/Toast/types'
+
+type UseToastClassesReturns = {
+    typeClasses: Ref<string>
+}
+
+type UseToastClassesProps = {
+    type: Ref<ToastPreset>
+}
+
+const typeClassesMap: Record<ToastPreset, string> = {
+    danger: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    empty: '',
+    success: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+}
+
+export function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns {
+
+    const typeClasses = computed(() => {
+        return typeClassesMap[props.type.value]
+    })
+
+    return {
+        typeClasses,
+    }
+}
diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
new file mode 100644
index 0000000..68ef43c
--- /dev/null
+++ b/src/components/Toast/types.ts
@@ -0,0 +1 @@
+export type ToastPreset = 'success' | 'warning' | 'danger' | 'empty'
diff --git a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
index b0c7e53..1dd9e80 100644
--- a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
+++ b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
@@ -15,4 +15,4 @@ const props = defineProps({
 })
 
 provide(FLOWBITE_THEMABLE_INJECTION_KEY, toRef(props, 'theme'))
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
new file mode 100644
index 0000000..5fc5b62
--- /dev/null
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
@@ -0,0 +1,29 @@
+<template>
+  <component :is="tag" :class="simplifyTailwindClasses($attrs.class || [], classes)">
+    <slot />
+  </component>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import {
+  useFlowbiteThemableChildClasses,
+} from './composables/useFlowbiteThemableChildClasses'
+import type {
+  ThemableChildrenApply,
+} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
+import { toRefs } from 'vue'
+import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
+
+const props = defineProps({
+  apply: {
+    type: Array as PropType<ThemableChildrenApply[]>,
+    required: true,
+  },
+  tag: {
+    type: String,
+    default: 'div',
+  },
+})
+
+const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
+</script>
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
new file mode 100644
index 0000000..b0fe1de
--- /dev/null
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
@@ -0,0 +1,35 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type {
+    ThemableChildrenApply,
+} from '../types'
+import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
+
+type UseFlowbiteThemableChildReturns = {
+    classes: Ref<string>
+}
+
+type UseFlowbiteThemableChildProps = {
+    apply: Ref<ThemableChildrenApply[]>
+}
+
+export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
+
+    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()
+
+    const classes = computed(() => {
+        if(!isActive.value) return ''
+        const _classes = []
+        if(props.apply.value.includes('text')) _classes.push(textClasses.value)
+        if(props.apply.value.includes('border')) _classes.push(borderClasses.value)
+        if(props.apply.value.includes('background')) _classes.push(backgroundClasses.value)
+        if(props.apply.value.includes('hover')) _classes.push(hoverClasses.value)
+        if(props.apply.value.includes('disabled')) _classes.push(disabledClasses.value)
+        if(props.apply.value.includes('focus')) _classes.push(focusClasses.value)
+        return _classes.join(' ')
+    })
+
+    return {
+        classes,
+    }
+}
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types.ts b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types.ts
new file mode 100644
index 0000000..bf19a24
--- /dev/null
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types.ts
@@ -0,0 +1 @@
+export type ThemableChildrenApply = 'background' | 'disabled' | 'hover' | 'text' | 'border' | 'focus'
diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
index 1009c03..a1c2063 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -9,11 +9,12 @@ type UseFlowbiteThemableReturns = {
     hoverClasses: Ref<string>
     disabledClasses: Ref<string>
     borderClasses: Ref<string>
+    focusClasses: Ref<string>
     isActive: Ref<boolean>
     color: Ref<FlowbiteTheme | undefined>
 }
 
-type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string }
+type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string, focus: string }
 type FlowbiteThemes<T extends string = string> = Record<T, FlowbiteThemeMap>
 
 const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
@@ -25,6 +26,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-blue-800 dark:hover:bg-blue-700',
         text: 'text-blue-600 dark:text-blue-500',
         border: 'border-blue-600 dark:border-blue-500',
+        focus: 'focus:ring-blue-300 dark:focus:ring-blue-800',
     },
     green: {
         background: 'bg-green-700 dark:bg-green-600',
@@ -32,6 +34,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-green-800 dark:hover:bg-green-700',
         text: 'text-green-600 dark:text-green-500',
         border: 'border-green-600 dark:border-green-500',
+        focus: 'focus:ring-green-300 dark:focus:ring-green-800',
     },
     pink: {
         background: 'bg-pink-700 dark:bg-pink-600',
@@ -39,6 +42,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-pink-800 dark:hover:bg-pink-700',
         text: 'text-pink-600 dark:text-pink-500',
         border: 'border-pink-600 dark:border-pink-500',
+        focus: 'focus:ring-pink-300 dark:focus:ring-pink-900',
     },
     purple: {
         background: 'bg-purple-700 dark:bg-purple-600',
@@ -46,6 +50,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-purple-800 dark:hover:bg-purple-700',
         text: 'text-purple-600 dark:text-purple-500',
         border: 'border-purple-600 dark:border-purple-500',
+        focus: 'focus:ring-purple-300 dark:focus:ring-purple-900',
     },
     red: {
         background: 'bg-red-700 dark:bg-red-600',
@@ -53,6 +58,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-red-800 dark:hover:bg-red-700',
         text: 'text-red-600 dark:text-red-500',
         border: 'border-red-600 dark:border-red-500',
+        focus: 'focus:ring-red-300 dark:focus:ring-red-900',
     },
 
 }
@@ -89,13 +95,19 @@ export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
         return flowbiteThemeClasses[theme.value].border
     })
 
+    const focusClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].focus
+    })
+
     return {
         backgroundClasses,
         disabledClasses,
         hoverClasses,
         textClasses,
         borderClasses,
+        focusClasses,
         isActive,
         color,
     }
-}
\ No newline at end of file
+}
diff --git a/src/index.ts b/src/index.ts
index d4f24ee..7df3dfb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,8 @@ export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
 export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
+
 export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as Badge } from './components/Badge/Badge.vue'