diff --git a/.eslintrc.js b/.eslintrc.js
index bfe268c5..f20cd733 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,25 +1,29 @@
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   env: {
     browser: true,
     es2021: true,
     node: true,
   },
-  parser: 'vue-eslint-parser',
-  extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'eslint:recommended',
+    'standard',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue-scoped-css/vue3-recommended',
+    '@vue/eslint-config-typescript/recommended',
+  ],
   parserOptions: {
     ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
     sourceType: 'module',
   },
-  plugins: ['vue', '@typescript-eslint'],
   rules: {
-    'linebreak-style': ['error', 'unix'],
-    quotes: ['error', 'single'],
-    semi: ['error', 'never'],
-    'vue/multi-word-component-names': 'off',
     'comma-dangle': ['error', 'always-multiline'],
+    'linebreak-style': ['error', 'unix'],
     'no-multiple-empty-lines': 'error',
     'object-curly-spacing': ['error', 'always'],
-    'vue/no-v-model-argument': 'off',
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
+    'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
   },
 }
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 6a2b2db6..90ac918d 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -38,20 +38,20 @@ function getComponents() {
     { text: 'Accordion', link: '/components/accordion' },
     { text: 'Alert', link: '/components/alert' },
     { text: 'Avatar', link: '/components/avatar' },
+    { text: 'Badge', link: '/components/badge' },
     { 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: 'ListGroup', link: '/components/list-group' },
     { text: 'Pagination', link: '/components/pagination' },
     { text: 'Progress', link: '/components/progress' },
     { text: 'Rating', link: '/components/rating' },
     { text: 'Spinner', link: '/components/spinner' },
     { text: 'Table', link: '/components/table' },
     { text: 'Tabs', link: '/components/tabs' },
-    { text: 'ListGroup', link: '/components/list-group' },
     { text: 'Timeline', link: '/components/timeline' },
     { text: 'Toast', link: '/components/toast' },
     { text: 'Tooltip', link: '/components/tooltip' },
@@ -65,13 +65,13 @@ function getComponents() {
 function getFormComponents() {
   return [
     { text: 'Input', link: '/components/input' },
-    { text: 'FileInput', link: '/components/fileInput' },
-    { text: 'Checkbox', link: '/components/checkbox' },
+    { text: 'File Input', link: '/components/fileInput' },
     { text: 'Select', link: '/components/select' },
-    { text: 'Toggle', link: '/components/toggle' },
     { text: 'Textarea', link: '/components/textarea' },
-    { text: 'Range', link: '/components/range' },
+    { text: 'Checkbox', link: '/components/checkbox' },
     { text: 'Radio', link: '/components/radio' },
+    { text: 'Toggle', link: '/components/toggle' },
+    { text: 'Range', link: '/components/range' },
   ]
 }
 
diff --git a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
index 91969bf6..ee9a2d3b 100644
--- a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
+++ b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
@@ -1,10 +1,15 @@
 <template>
-  <slot-listener @click="onClick" @mouseleave="onMouseleave" @mouseenter="onMouseenter">
-    <Button>HELLO</Button>
-  </slot-listener>
+  <fwb-slot-listener
+    @click="onClick"
+    @mouseleave="onMouseleave"
+    @mouseenter="onMouseenter"
+  >
+    <fwb-button>HELLO</fwb-button>
+  </fwb-slot-listener>
 </template>
+
 <script lang="ts" setup>
-import { SlotListener, Button } from '../../../../src/index'
+import { FwbButton, FwbSlotListener } from '../../../../src/index'
 const onClick = () => {
   console.log('onClick from slot-listener')
 }
diff --git a/docs/components/accordion.md b/docs/components/accordion.md
index 8a15b510..4038a32d 100644
--- a/docs/components/accordion.md
+++ b/docs/components/accordion.md
@@ -1,9 +1,9 @@
 <script setup>
-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';
-import AccordionOpenFirstItemExample from './accordion/examples/AccordionOpenFirstItemExample.vue';
+import FwbAccordionExample from './accordion/examples/FwbAccordionExample.vue'
+import FwbAccordionExampleAlwaysOpen from './accordion/examples/FwbAccordionExampleAlwaysOpen.vue'
+import FwbAccordionExampleFlush from './accordion/examples/FwbAccordionExampleFlush.vue'
+import FwbAccordionExampleStyledHeaders from './accordion/examples/FwbAccordionExampleStyledHeaders.vue'
+import FwbAccordionExampleFirstItemClosed from './accordion/examples/FwbAccordionExampleFirstItemClosed.vue'
 </script>
 # Vue Accordion - Flowbite
 
@@ -16,216 +16,297 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
 
 ## Default accordion
 Use this example to basic accordion.
-```vue
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
-</script>
 
+<fwb-accordion-example />
+```vue
 <template>
-  <Accordion>
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">
+            Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+          </p>
+          <p class="text-gray-500 dark:text-gray-400">
+            Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>another header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">
+            Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+          </p>
+          <p class="text-gray-500 dark:text-gray-400">
+            Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline" >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">
+            Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+          </p>
+          <p class="text-gray-500 dark:text-gray-400">
+            Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
 </template>
 
-```
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
 
-<AccordionExample />
+```
 
 ## Always open accordion
 Always open prop to makes accordion able to open multiple elements.
-```vue
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
-</script>
 
+<fwb-accordion-example-always-open />
+```vue
 <template>
-  <Accordion always-open>
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
+  <fwb-accordion always-open>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>another header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
 </template>
 
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
 ```
 
-<AccordionAlwaysOpenExample />
-
 ## Flush accordion
 Flush prop removes side borders, and rounded corners
-```vue
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
-</script>
 
+<fwb-accordion-example-flush />
+```vue
 <template>
-  <Accordion flush>
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
+  <fwb-accordion flush>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>another header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>another header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
 </template>
 
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
 ```
 
-<AccordionFlushExample />
-
 ## Styling accordion
 You can style accordion content and headers by passing tailwind classes into them.
-```vue
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
-</script>
 
+<fwb-accordion-example-styled-headers />
+```vue
 <template>
-  <Accordion>
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
+  <fwb-accordion>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="/docs/getting-started/introduction/">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
+        another header
+      </fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+    <fwb-accordion-panel>
+      <fwb-accordion-header>and one more header</fwb-accordion-header>
+      <fwb-accordion-content>
         <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          <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 class="text-blue-600 dark:text-blue-500 hover:underline" href="https://flowbite.com/figma/">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+          </p>
         </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
+      </fwb-accordion-content>
+    </fwb-accordion-panel>
+  </fwb-accordion>
 </template>
 
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
 ```
 
-<AccordionStyledHeadersExample />
-
-
 ## Closed first item
-```vue
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
-</script>
 
+<fwb-accordion-example-first-item-closed />
+```vue
 <template>
-  <Accordion :open-first-item="false">
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
+    <fwb-accordion :open-first-item="false">
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
 </template>
 
+<script setup>
+import {
+  FwbAccordion,
+  FwbAccordionContent,
+  FwbAccordionHeader,
+  FwbAccordionPanel,
+} from 'flowbite-vue'
+</script>
 ```
-
-<AccordionOpenFirstItemExample />
-
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
deleted file mode 100644
index 10f8f2e1..00000000
--- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
-</script>
-
-<template>
-  <Accordion always-open>
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>another header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
-</template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
deleted file mode 100644
index 8438c126..00000000
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
-</script>
-
-<template>
-  <div class="vp-raw">
-    <Accordion>
-      <AccordionPanel>
-        <AccordionHeader>header</AccordionHeader>
-        <AccordionContent>
-          <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>
-        </AccordionContent>
-      </AccordionPanel>
-      <AccordionPanel>
-        <AccordionHeader>another header</AccordionHeader>
-        <AccordionContent>
-          <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>
-        </AccordionContent>
-      </AccordionPanel>
-      <AccordionPanel>
-        <AccordionHeader>and one more header</AccordionHeader>
-        <AccordionContent>
-          <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>
-        </AccordionContent>
-      </AccordionPanel>
-    </Accordion>
-  </div>
-</template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
deleted file mode 100644
index 363e44a0..00000000
--- a/docs/components/accordion/examples/AccordionFlushExample.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
-</script>
-
-<template>
-  <Accordion flush>
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>another header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
-</template>
diff --git a/docs/components/accordion/examples/AccordionOpenFirstItemExample.vue b/docs/components/accordion/examples/AccordionOpenFirstItemExample.vue
deleted file mode 100644
index 614cd979..00000000
--- a/docs/components/accordion/examples/AccordionOpenFirstItemExample.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
-</script>
-
-<template>
-  <div class="vp-raw">
-    <Accordion :open-first-item="false">
-      <AccordionPanel>
-        <AccordionHeader>header</AccordionHeader>
-        <AccordionContent>
-          <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>
-        </AccordionContent>
-      </AccordionPanel>
-      <AccordionPanel>
-        <AccordionHeader>another header</AccordionHeader>
-        <AccordionContent>
-          <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>
-        </AccordionContent>
-      </AccordionPanel>
-      <AccordionPanel>
-        <AccordionHeader>and one more header</AccordionHeader>
-        <AccordionContent>
-          <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>
-        </AccordionContent>
-      </AccordionPanel>
-    </Accordion>
-  </div>
-</template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
deleted file mode 100644
index 63f34745..00000000
--- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
-</script>
-
-<template>
-  <Accordion >
-    <accordion-panel>
-      <accordion-header>header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-    <accordion-panel>
-      <accordion-header>and one more header</accordion-header>
-      <accordion-content>
-        <div>
-          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-        </div>
-      </accordion-content>
-    </accordion-panel>
-  </Accordion>
-</template>
diff --git a/docs/components/accordion/examples/FwbAccordionExample.vue b/docs/components/accordion/examples/FwbAccordionExample.vue
new file mode 100644
index 00000000..27f15add
--- /dev/null
+++ b/docs/components/accordion/examples/FwbAccordionExample.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="vp-raw">
+    <fwb-accordion>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="/docs/getting-started/introduction/"
+              >get started</a> and start developing websites
+              even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and
+              components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and
+              components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+  </div>
+</template>
+
+<script setup>
+import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
+</script>
diff --git a/docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue b/docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue
new file mode 100644
index 00000000..4a65bb7e
--- /dev/null
+++ b/docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="vp-raw">
+    <fwb-accordion always-open>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="/docs/getting-started/introduction/"
+              >get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+  </div>
+</template>
+
+<script setup>
+import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
+</script>
diff --git a/docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue b/docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue
new file mode 100644
index 00000000..9849e758
--- /dev/null
+++ b/docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="vp-raw">
+    <fwb-accordion :open-first-item="false">
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a
+                href="/docs/getting-started/introduction/"
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+              >get started</a> and start developing websites
+              even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                href="https://flowbite.com/figma/"
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and
+              components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                href="https://flowbite.com/figma/"
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and
+              components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+  </div>
+</template>
+
+<script setup>
+import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
+</script>
diff --git a/docs/components/accordion/examples/FwbAccordionExampleFlush.vue b/docs/components/accordion/examples/FwbAccordionExampleFlush.vue
new file mode 100644
index 00000000..16ee2d00
--- /dev/null
+++ b/docs/components/accordion/examples/FwbAccordionExampleFlush.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="vp-raw">
+    <fwb-accordion flush>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="/docs/getting-started/introduction/"
+              >get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+  </div>
+</template>
+
+<script setup>
+import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
+</script>
diff --git a/docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue b/docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue
new file mode 100644
index 00000000..c0791ef9
--- /dev/null
+++ b/docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="vp-raw">
+    <fwb-accordion>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="/docs/getting-started/introduction/"
+              >get started</a> and start developing websites even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">
+          another header
+        </fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+  </div>
+</template>
+
+<script setup>
+import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
+</script>
diff --git a/docs/components/alert.md b/docs/components/alert.md
index 4bd765d3..a8c291c0 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -1,11 +1,11 @@
 <script setup>
-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 AlertBorderAccentExample from './alert/examples/AlertBorderAccentExample.vue';
-import AlertCustomContentExample from './alert/examples/AlertCustomContentExample.vue';
+import FwbAlertExampleBorder from './alert/examples/FwbAlertExampleBorder.vue'
+import FwbAlertExampleBorderAccent from './alert/examples/FwbAlertExampleBorderAccent.vue'
+import FwbAlertExampleCustomContent from './alert/examples/FwbAlertExampleCustomContent.vue'
+import FwbAlertExampleDismissable from './alert/examples/FwbAlertExampleDismissable.vue'
+import FwbAlertExampleIcon from './alert/examples/FwbAlertExampleIcon.vue'
+import FwbAlertExampleList from './alert/examples/FwbAlertExampleList.vue'
+import FwbAlertExampleType from './alert/examples/FwbAlertExampleType.vue'
 </script>
 
 # Vue Alert - Flowbite
@@ -15,198 +15,268 @@ The alert component can be used to provide information to your users such as suc
 
 ## Default alert
 Use the following examples of alert components to show messages as feedback to your users.
-<AlertTypeExample />
 
+<fwb-alert-example-type />
 ```vue
-<script setup>
-import { Alert } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex flex-col">
-    <Alert type="info" class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" class="mb-2"> Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" class="mb-2">Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" class="mb-2"> Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success"> Success alert! Change a few things up and try submitting again. </Alert>
+  <div class="grid gap-2">
+    <fwb-alert type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
   </div>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
+
 ## Alerts with icon
 You can also include a descriptive icon to complement the message inside the alert component with the following example.
 
-<AlertIconExample />
-
+<fwb-alert-example-icon />
 ```vue
-<script setup>
-import { Alert } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex flex-col">
-    <Alert type="info" class="mb-2" icon> Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" class="mb-2" icon> Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" class="mb-2" icon> Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" class="mb-2" icon> Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success" icon> Success alert! Change a few things up and try submitting again. </Alert>
+  <div class="grid gap-2">
+    <fwb-alert icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
   </div>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
 
 ## Bordered alerts
 Use this example to add a border accent to the alert component instead of just a plain background.
 
-<AlertBorderExample />
-
+<fwb-alert-example-border />
 ```vue
-<script setup>
-import { Alert } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex flex-col">
-    <Alert type="info" border icon class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" border icon class="mb-2">Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" border icon class="mb-2"> Info Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" border icon class="mb-2"> Info Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success" border icon>Success alert! Change a few things up and try submitting again. </Alert>
+  <div class="grid gap-2">
+    <fwb-alert border type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert border type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
   </div>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
 
 ## Border accent
 Use this example to add a border accent on top of the alert component for further visual distinction.
 
-<AlertBorderAccentExample />
-
+<fwb-alert-example-border-accent />
 ```vue
-<script setup>
-import { Alert } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex flex-col">
-    <Alert type="info" icon class="mb-2 border-t-4 rounded-none">Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" icon class="mb-2 border-t-4 rounded-none">Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" icon class="mb-2 border-t-4 rounded-none"> Info Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" icon class="mb-2 border-t-4 rounded-none"> Info Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success" icon class="border-t-4 rounded-none">Success alert! Change a few things up and try submitting again. </Alert>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert class="border-t-4 rounded-none" icon type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="danger">
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="dark">
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert class="border-t-4 rounded-none" icon type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
   </div>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
 
 ## Alerts with list
 Use this example to show a list and a description inside an alert component.
 
-<AlertTitleExample />
-
+<fwb-alert-example-list />
 ```vue
-<script setup>
-import { Alert } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex flex-col">
-    <Alert type="info" class="mb-2">
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
       <span class="font-medium">Ensure that these requirements are met:</span>
       <ul class="mt-1.5 ml-4 list-disc list-inside">
         <li>At least 10 characters (and up to 100 characters)</li>
         <li>At least one lowercase character</li>
         <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
       </ul>
-    </Alert>
-    <Alert type="danger" class="mb-2">
+    </fwb-alert>
+    <fwb-alert type="danger">
       <span class="font-medium">Ensure that these requirements are met:</span>
       <ul class="mt-1.5 ml-4 list-disc list-inside">
         <li>At least 10 characters (and up to 100 characters)</li>
         <li>At least one lowercase character</li>
         <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
       </ul>
-    </Alert>
+    </fwb-alert>
   </div>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
 
 ## Dismissing
 Use the following alert elements that are also dismissable.
 
-<AlertClosableExample />
-
+<fwb-alert-example-dismissable />
 ```vue
 <script setup>
 import { Alert } from 'flowbite-vue'
 </script>
 <template>
-  <div class="flex flex-col">
-    <Alert type="info" closable class="mb-2">Info</Alert>
-    <Alert type="warning" closable class="mb-2">Warning</Alert>
-    <Alert type="danger" closable class="mb-2">Danger</Alert>
-    <Alert type="dark" closable class="mb-2">Dark</Alert>
-    <Alert type="success" closable>Success</Alert>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert closable icon type="info">
+      Info
+    </fwb-alert>
+    <fwb-alert closable icon type="warning">
+      Warning
+    </fwb-alert>
+    <fwb-alert closable icon type="danger">
+      Danger
+    </fwb-alert>
+    <fwb-alert closable icon type="dark">
+      Dark
+    </fwb-alert>
+    <fwb-alert closable icon type="success">
+      Success
+    </fwb-alert>
   </div>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
 
 ## Additional content
 The following alert components can be used if you wish to disclose more information inside the element.
 
-<AlertCustomContentExample />
+<fwb-alert-example-custom-content />
 
 ```vue
-<script setup>
-import { Alert } from 'flowbite-vue'
-</script>
 <template>
-  <Alert type="info">
+  <fwb-alert type="info">
     <template #icon>
-      <svg class="flex-shrink-0 w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <svg
+        class="flex-shrink-0 w-4 h-4 mr-2"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
         <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
       </svg>
       <span class="sr-only">Info</span>
     </template>
     <template #title>
-      <h3 class="text-lg font-medium">This is a info alert</h3>
+      <h3 class="text-lg font-medium">
+        This is a info alert
+      </h3>
     </template>
-    <template v-slot:default="{ onCloseClick }">
+    <template #default="{ onCloseClick }">
       <div class="mt-2 mb-4 text-sm">
         More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
       </div>
       <div class="flex">
         <button
-            type="button"
-            class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button"
+          class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         >
-          <svg class="-ml-0.5 mr-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
+          <svg
+            class="-ml-0.5 mr-2 h-3 w-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 14"
+          >
             <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
           </svg>
           View more
         </button>
         <button
-            type="button"
-            class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
-            data-dismiss-target="#alert-additional-content-1"
-            aria-label="Close"
-            @click="onCloseClick"
+          type="button"
+          class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
+          data-dismiss-target="#alert-additional-content-1"
+          aria-label="Close"
+          @click="onCloseClick"
         >
           Dismiss
         </button>
       </div>
     </template>
-  </Alert>
+  </fwb-alert>
 </template>
+
+<script setup>
+import { FwbAlert } from 'flowbite-vue'
+</script>
 ```
 
 ## API
 
 ### Props
-| Name       | Values                                        | Default |
-|------------|-----------------------------------------------|---------|
-| type       | `info`, `danger`, `success`,`warning`, `dark` | `info`  |
-| closable   | `boolean`                                     | `false` |
-| icon       | `boolean`                                     | `false` |
-| border     | `boolean`                                     | `false` |
+| Name     | Values                                        | Default |
+|----------|-----------------------------------------------|---------|
+| type     | `info`, `danger`, `success`,`warning`, `dark` | `info`  |
+| closable | `boolean`                                     | `false` |
+| icon     | `boolean`                                     | `false` |
+| border   | `boolean`                                     | `false` |
 
 ### Events
-| Name     | Description          |
-|----------|----------------------|
-| close    | Close button pressed |
+| Name  | Description          |
+|-------|----------------------|
+| close | Close button pressed |
 
-### Slots 
+### Slots
 | Name       | Description       |
 |------------|-------------------|
 | default    | alert content     |
diff --git a/docs/components/alert/examples/AlertBorderAccentExample.vue b/docs/components/alert/examples/AlertBorderAccentExample.vue
deleted file mode 100644
index 33df2638..00000000
--- a/docs/components/alert/examples/AlertBorderAccentExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info" icon class="mb-2 border-t-4 rounded-none">Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" icon class="mb-2 border-t-4 rounded-none">Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" icon class="mb-2 border-t-4 rounded-none"> Info Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" icon class="mb-2 border-t-4 rounded-none"> Info Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success" icon class="border-t-4 rounded-none">Success alert! Change a few things up and try submitting again. </Alert>
-  </div>
-</template>
-<script setup>
-import { Alert } from '../../../../src/index'
-</script>
diff --git a/docs/components/alert/examples/AlertBorderExample.vue b/docs/components/alert/examples/AlertBorderExample.vue
deleted file mode 100644
index 3394a5b1..00000000
--- a/docs/components/alert/examples/AlertBorderExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info" border icon class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" border icon class="mb-2">Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" border icon class="mb-2"> Info Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" border icon class="mb-2"> Info Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success" border icon>Success alert! Change a few things up and try submitting again. </Alert>
-  </div>
-</template>
-<script setup>
-import { Alert } from '../../../../src/index'
-</script>
diff --git a/docs/components/alert/examples/AlertClosableExample.vue b/docs/components/alert/examples/AlertClosableExample.vue
deleted file mode 100644
index f609a5de..00000000
--- a/docs/components/alert/examples/AlertClosableExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info" closable icon class="mb-2">Info</Alert>
-    <Alert type="warning" closable icon class="mb-2">Warning</Alert>
-    <Alert type="danger" closable icon class="mb-2">Danger</Alert>
-    <Alert type="dark" closable icon class="mb-2">Dark</Alert>
-    <Alert type="success" closable icon>Success</Alert>
-  </div>
-</template>
-<script setup>
-import { Alert } from '../../../../src/index'
-</script>
diff --git a/docs/components/alert/examples/AlertIconExample.vue b/docs/components/alert/examples/AlertIconExample.vue
deleted file mode 100644
index aa3d7997..00000000
--- a/docs/components/alert/examples/AlertIconExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info" class="mb-2" icon> Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" class="mb-2" icon> Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" class="mb-2" icon> Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" class="mb-2" icon> Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success" icon> Success alert! Change a few things up and try submitting again. </Alert>
-  </div>
-</template>
-<script setup>
-import { Alert } from '../../../../src/index'
-</script>
diff --git a/docs/components/alert/examples/AlertTypeExample.vue b/docs/components/alert/examples/AlertTypeExample.vue
deleted file mode 100644
index e3e4b4d2..00000000
--- a/docs/components/alert/examples/AlertTypeExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info" class="mb-2">Info alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="warning" class="mb-2"> Warning alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="danger" class="mb-2">Danger alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="dark" class="mb-2"> Dark alert! Change a few things up and try submitting again. </Alert>
-    <Alert type="success"> Success alert! Change a few things up and try submitting again. </Alert>
-  </div>
-</template>
-<script setup>
-import { Alert } from '../../../../src/index'
-</script>
diff --git a/docs/components/alert/examples/FwbAlertExampleBorder.vue b/docs/components/alert/examples/FwbAlertExampleBorder.vue
new file mode 100644
index 00000000..f18f831f
--- /dev/null
+++ b/docs/components/alert/examples/FwbAlertExampleBorder.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert
+      border
+      type="info"
+    >
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      border
+      type="warning"
+    >
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      border
+      type="danger"
+    >
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      border
+      type="dark"
+    >
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      border
+      type="success"
+    >
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from '../../../../src/index'
+</script>
diff --git a/docs/components/alert/examples/FwbAlertExampleBorderAccent.vue b/docs/components/alert/examples/FwbAlertExampleBorderAccent.vue
new file mode 100644
index 00000000..d838e716
--- /dev/null
+++ b/docs/components/alert/examples/FwbAlertExampleBorderAccent.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert
+      class="border-t-4 rounded-none"
+      icon
+      type="info"
+    >
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      class="border-t-4 rounded-none"
+      icon
+      type="warning"
+    >
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      class="border-t-4 rounded-none"
+      icon
+      type="danger"
+    >
+      Info Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      class="border-t-4 rounded-none"
+      icon
+      type="dark"
+    >
+      Info Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      class="border-t-4 rounded-none"
+      icon
+      type="success"
+    >
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from '../../../../src/index'
+</script>
diff --git a/docs/components/alert/examples/AlertCustomContentExample.vue b/docs/components/alert/examples/FwbAlertExampleCustomContent.vue
similarity index 72%
rename from docs/components/alert/examples/AlertCustomContentExample.vue
rename to docs/components/alert/examples/FwbAlertExampleCustomContent.vue
index bdea3067..f201f0b4 100644
--- a/docs/components/alert/examples/AlertCustomContentExample.vue
+++ b/docs/components/alert/examples/FwbAlertExampleCustomContent.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info">
+  <div class="vp-raw">
+    <fwb-alert type="info">
       <template #icon>
-        <svg class="flex-shrink-0 w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <svg
+          class="flex-shrink-0 w-4 h-4 mr-2"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
           <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
         </svg>
         <span class="sr-only">Info</span>
       </template>
       <template #title>
-        <h3 class="text-lg font-medium">This is a info alert</h3>
+        <h3 class="text-lg font-medium">
+          This is a info alert
+        </h3>
       </template>
-      <template v-slot:default="{ onCloseClick }">
+      <template #default="{ onCloseClick }">
         <div class="mt-2 mb-4 text-sm">
           More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
         </div>
@@ -19,7 +27,13 @@
             type="button"
             class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
           >
-            <svg class="-ml-0.5 mr-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
+            <svg
+              class="-ml-0.5 mr-2 h-3 w-3"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 14"
+            >
               <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
             </svg>
             View more
@@ -35,9 +49,10 @@
           </button>
         </div>
       </template>
-    </Alert>
+    </fwb-alert>
   </div>
 </template>
+
 <script setup>
-import { Alert } from '../../../../src/index'
+import { FwbAlert } from '../../../../src/index'
 </script>
diff --git a/docs/components/alert/examples/FwbAlertExampleDismissable.vue b/docs/components/alert/examples/FwbAlertExampleDismissable.vue
new file mode 100644
index 00000000..a748cfe6
--- /dev/null
+++ b/docs/components/alert/examples/FwbAlertExampleDismissable.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert
+      closable
+      icon
+      type="info"
+    >
+      Info
+    </fwb-alert>
+    <fwb-alert
+      closable
+      icon
+      type="warning"
+    >
+      Warning
+    </fwb-alert>
+    <fwb-alert
+      closable
+      icon
+      type="danger"
+    >
+      Danger
+    </fwb-alert>
+    <fwb-alert
+      closable
+      icon
+      type="dark"
+    >
+      Dark
+    </fwb-alert>
+    <fwb-alert
+      closable
+      icon
+      type="success"
+    >
+      Success
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from '../../../../src/index'
+</script>
diff --git a/docs/components/alert/examples/FwbAlertExampleIcon.vue b/docs/components/alert/examples/FwbAlertExampleIcon.vue
new file mode 100644
index 00000000..1b92870b
--- /dev/null
+++ b/docs/components/alert/examples/FwbAlertExampleIcon.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert
+      icon
+      type="info"
+    >
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      icon
+      type="warning"
+    >
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      icon
+      type="danger"
+    >
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      icon
+      type="dark"
+    >
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert
+      icon
+      type="success"
+    >
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from '../../../../src/index'
+</script>
diff --git a/docs/components/alert/examples/AlertTitleExample.vue b/docs/components/alert/examples/FwbAlertExampleList.vue
similarity index 79%
rename from docs/components/alert/examples/AlertTitleExample.vue
rename to docs/components/alert/examples/FwbAlertExampleList.vue
index 25aaf888..f3841654 100644
--- a/docs/components/alert/examples/AlertTitleExample.vue
+++ b/docs/components/alert/examples/FwbAlertExampleList.vue
@@ -1,23 +1,24 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Alert type="info" class="mb-2">
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
       <span class="font-medium">Ensure that these requirements are met:</span>
       <ul class="mt-1.5 ml-4 list-disc list-inside">
         <li>At least 10 characters (and up to 100 characters)</li>
         <li>At least one lowercase character</li>
         <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
       </ul>
-    </Alert>
-    <Alert type="danger" class="mb-2">
+    </fwb-alert>
+    <fwb-alert type="danger">
       <span class="font-medium">Ensure that these requirements are met:</span>
       <ul class="mt-1.5 ml-4 list-disc list-inside">
         <li>At least 10 characters (and up to 100 characters)</li>
         <li>At least one lowercase character</li>
         <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
       </ul>
-    </Alert>
+    </fwb-alert>
   </div>
 </template>
+
 <script setup>
-import { Alert } from '../../../../src/index'
+import { FwbAlert } from '../../../../src/index'
 </script>
diff --git a/docs/components/alert/examples/FwbAlertExampleType.vue b/docs/components/alert/examples/FwbAlertExampleType.vue
new file mode 100644
index 00000000..e6296b37
--- /dev/null
+++ b/docs/components/alert/examples/FwbAlertExampleType.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-alert type="info">
+      Info alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="warning">
+      Warning alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="danger">
+      Danger alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="dark">
+      Dark alert! Change a few things up and try submitting again.
+    </fwb-alert>
+    <fwb-alert type="success">
+      Success alert! Change a few things up and try submitting again.
+    </fwb-alert>
+  </div>
+</template>
+
+<script setup>
+import { FwbAlert } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index b47e5826..53480282 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -1,15 +1,14 @@
 <script setup>
-import AvatarExample from './avatar/examples/AvatarExample.vue'
-import AvatarAlternativePlaceholderExample from './avatar/examples/AvatarAlternativePlaceholderExample.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'
-
+import FwbAvatarExample from './avatar/examples/FwbAvatarExample.vue'
+import FwbAvatarExampleAlt from './avatar/examples/FwbAvatarExampleAlt.vue'
+import FwbAvatarExampleBordered from './avatar/examples/FwbAvatarExampleBordered.vue'
+import FwbAvatarExampleIcon from './avatar/examples/FwbAvatarExampleIcon.vue'
+import FwbAvatarExampleInitials from './avatar/examples/FwbAvatarExampleInitials.vue'
+import FwbAvatarExamplePlaceholder from './avatar/examples/FwbAvatarExamplePlaceholder.vue'
+import FwbAvatarExampleSize from './avatar/examples/FwbAvatarExampleSize.vue'
+import FwbAvatarExampleStack from './avatar/examples/FwbAvatarExampleStack.vue'
+import FwbAvatarExampleStatus from './avatar/examples/FwbAvatarExampleStatus.vue'
+import FwbAvatarExampleStatusPosition from './avatar/examples/FwbAvatarExampleStatusPosition.vue'
 </script>
 # Vue Avatar - Flowbite
 Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
@@ -17,202 +16,234 @@ Use the avatar component to show a visual representation of a user profile using
 ## Default avatar
 Use this example to create a circle and rounded avatar on an image element.
 
-<AvatarExample />
-
+<fwb-avatar-example />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
 <template>
-    <div class="flex">
-        <Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
-        <Avatar status="online" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
-    </div>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar img="/images/avatar-1.jpg" />
+    <fwb-avatar img="/images/avatar-1.jpg" rounded />
+  </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Bordered
 Use this example to create a circle and rounded avatar on an image element.
 
-<AvatarBorderedExample />
-
+<fwb-avatar-example-bordered />
 ```vue
+<template>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar bordered img="/images/avatar-1.jpg" />
+    <fwb-avatar bordered img="/images/avatar-1.jpg" rounded />
+  </div></template>
+
 <script setup>
-import { Avatar } from 'flowbite-vue'
+import { FwbAvatar } from 'flowbite-vue'
 </script>
-<template>
-    <div class="flex">
-        <Avatar status="online" bordered img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-        <Avatar status="online" bordered rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    </div>
-</template>
 ```
 
 ## Dot indicator
 Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
 
-<AvatarDotIndicatorExample />
-
+<fwb-avatar-example-status />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
 <template>
-    <div class="flex">
-        <Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-        <Avatar status="busy" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-        <Avatar status="away" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-        <Avatar status="offline" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    </div>
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar img="/images/avatar-1.jpg" status="online" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="busy" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="away" />
+    <fwb-avatar img="/images/avatar-1.jpg" status="offline" />
+  </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Dot indicator position
 
-
-<AvatarDotIndicatorPositionExample />
-
+<fwb-avatar-example-status-position />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex items-center">
-    <Avatar status="online" status-position="top-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="top-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="top-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="top-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      status-position="bottom-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="/images/avatar-1.jpg"
+      rounded
+      status-position="bottom-right"
+      status="online"
+    />
   </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Sizes
-
 Choose from multiple sizing options for the avatar component from this example.
 
-<AvatarSizeExample />
-
+<fwb-avatar-example-size />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
 <template>
-  <div class="flex items-center">
-    <Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+  <div class="flex justify-center items-center space-x-4">
+    <fwb-avatar size="xs" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="sm" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="md" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="lg" img="/images/avatar-1.jpg" />
+    <fwb-avatar size="xl" img="/images/avatar-1.jpg" />
   </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Alternative text
 
-<AvatarAlternativeTextExample />
-
+<fwb-avatar-example-alt />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
-
 <template>
-    <Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
+  <div class="flex justify-center">
+    <fwb-avatar alt="Alternative text" img="/images/avatar-1.jpg" />
+  </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Stacked avatars
 Use this example if you want to stack a group of users by overlapping the avatar components.
 
-<StackedAvatarsExample />
-
+<fwb-avatar-example-stack />
 ```vue
-<script setup>
-import { StackedAvatars, Avatar, StackedAvatarsCounter } from 'flowbite-vue'
-</script>
-
 <template>
-    <StackedAvatars>
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
-    </StackedAvatars>
-    <StackedAvatars class="mt-2.5">
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
-      <StackedAvatarsCounter total="99" href="#" />
-    </StackedAvatars>
+  <div class="grid gap-2">
+    <stacked-avatars>
+      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-5.jpg" rounded stacked />
+    </stacked-avatars>
+    <stacked-avatars>
+      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
+      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
+      <stacked-avatars-counter href="#" total="99" />
+    </stacked-avatars>
+  </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Placeholder icon
 
-<AvatarPlaceholderExample />
-
+<fwb-avatar-example-placeholder />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
-
 <template>
-  <div class="flex">
-    <Avatar class="mr-2.5" />
-    <Avatar rounded />
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar />
+    <fwb-avatar rounded />
   </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Placeholder initials
 
-<AvatarPlaceholderInitialsExample />
-
+<fwb-avatar-example-initials />
 ```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
-
 <template>
-  <div class="flex">
-    <Avatar initials="JD" class="mr-2.5" />
-    <Avatar initials="JD" rounded />
+  <div class="flex justify-center space-x-4">
+    <fwb-avatar initials="JD" />
+    <fwb-avatar initials="JD" rounded />
   </div>
 </template>
+
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
+</script>
 ```
 
 ## Alternative Placeholder Icon
 Use this example if you'd like to specify a different placeholder icon. Specify a `#placeholder` template slot to override the default placeholder icon. This has no effect if using initials.
 
-<AvatarAlternativePlaceholderExample />
-
+<fwb-avatar-example-icon />
 ```vue
 <template>
-  <div class="vp-raw flex">
-    <Avatar class="mr-2.5">
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar>
       <template #placeholder>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </template>
-    </Avatar>
-    <Avatar rounded>
+    </fwb-avatar>
+    <fwb-avatar rounded>
       <template #placeholder>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </template>
-    </Avatar>
+    </fwb-avatar>
   </div>
 </template>
-<script setup>
-import { Avatar } from 'flowbite-vue'
 
+<script setup>
+import { FwbAvatar } from 'flowbite-vue'
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue b/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
deleted file mode 100644
index 0b995dec..00000000
--- a/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar class="mr-2.5">
-      <template #placeholder>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
-        </svg>
-      </template>
-    </Avatar>
-    <Avatar rounded>
-      <template #placeholder>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
-        </svg>
-      </template>
-    </Avatar>
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarAlternativeTextExample.vue b/docs/components/avatar/examples/AvatarAlternativeTextExample.vue
deleted file mode 100644
index 3b32d2a0..00000000
--- a/docs/components/avatar/examples/AvatarAlternativeTextExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarBorderedExample.vue b/docs/components/avatar/examples/AvatarBorderedExample.vue
deleted file mode 100644
index 1de342b8..00000000
--- a/docs/components/avatar/examples/AvatarBorderedExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar status="online" bordered img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" bordered rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarDotIndicatorExample.vue b/docs/components/avatar/examples/AvatarDotIndicatorExample.vue
deleted file mode 100644
index ed38dd81..00000000
--- a/docs/components/avatar/examples/AvatarDotIndicatorExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="online" />
-    <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="busy" />
-    <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="away" />
-    <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="offline" />
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarDotIndicatorPositionExample.vue b/docs/components/avatar/examples/AvatarDotIndicatorPositionExample.vue
deleted file mode 100644
index 5deae90f..00000000
--- a/docs/components/avatar/examples/AvatarDotIndicatorPositionExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar status="online" status-position="top-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="top-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="top-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="top-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" status-position="bottom-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarExample.vue b/docs/components/avatar/examples/AvatarExample.vue
deleted file mode 100644
index a0705b8e..00000000
--- a/docs/components/avatar/examples/AvatarExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarPlaceholderExample.vue b/docs/components/avatar/examples/AvatarPlaceholderExample.vue
deleted file mode 100644
index e22a8350..00000000
--- a/docs/components/avatar/examples/AvatarPlaceholderExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar class="mr-2.5" />
-    <Avatar rounded />
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarPlaceholderInitialsExample.vue b/docs/components/avatar/examples/AvatarPlaceholderInitialsExample.vue
deleted file mode 100644
index a53b0f45..00000000
--- a/docs/components/avatar/examples/AvatarPlaceholderInitialsExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Avatar initials="JD" class="mr-2.5" />
-    <Avatar initials="JD" rounded />
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/AvatarSizeExample.vue b/docs/components/avatar/examples/AvatarSizeExample.vue
deleted file mode 100644
index cdaf1a69..00000000
--- a/docs/components/avatar/examples/AvatarSizeExample.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <div class="flex items-center">
-      <Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-      <Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-      <Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-      <Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-      <Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    </div>
-  </div>
-</template>
-<script setup>
-import { Avatar } from '../../../../src/index'
-</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExample.vue b/docs/components/avatar/examples/FwbAvatarExample.vue
new file mode 100644
index 00000000..523bfa7f
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      rounded
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleAlt.vue b/docs/components/avatar/examples/FwbAvatarExampleAlt.vue
new file mode 100644
index 00000000..ae1d320b
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleAlt.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw flex justify-center">
+    <fwb-avatar
+      alt="Alternative text"
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleBordered.vue b/docs/components/avatar/examples/FwbAvatarExampleBordered.vue
new file mode 100644
index 00000000..a5adae51
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleBordered.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar
+      bordered
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+    <fwb-avatar
+      bordered
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      rounded
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleIcon.vue b/docs/components/avatar/examples/FwbAvatarExampleIcon.vue
new file mode 100644
index 00000000..a031a03e
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleIcon.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar>
+      <template #placeholder>
+        <svg
+          class="w-12 h-12"
+          fill="none"
+          stroke-width="1.5"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+    </fwb-avatar>
+    <fwb-avatar rounded>
+      <template #placeholder>
+        <svg
+          class="w-12 h-12"
+          fill="none"
+          stroke-width="1.5"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+    </fwb-avatar>
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleInitials.vue b/docs/components/avatar/examples/FwbAvatarExampleInitials.vue
new file mode 100644
index 00000000..e79aeb22
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleInitials.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar initials="JD" />
+    <fwb-avatar
+      initials="JD"
+      rounded
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExamplePlaceholder.vue b/docs/components/avatar/examples/FwbAvatarExamplePlaceholder.vue
new file mode 100644
index 00000000..8230f2c3
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExamplePlaceholder.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar />
+    <fwb-avatar rounded />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleSize.vue b/docs/components/avatar/examples/FwbAvatarExampleSize.vue
new file mode 100644
index 00000000..112ecaa8
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleSize.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw flex justify-center items-center space-x-4">
+    <fwb-avatar
+      size="xs"
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+    <fwb-avatar
+      size="sm"
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+    <fwb-avatar
+      size="md"
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+    <fwb-avatar
+      size="lg"
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+    <fwb-avatar
+      size="xl"
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleStack.vue b/docs/components/avatar/examples/FwbAvatarExampleStack.vue
new file mode 100644
index 00000000..bd86f8c9
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleStack.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-avatar-stack>
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-4.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+        rounded
+        stacked
+      />
+    </fwb-avatar-stack>
+    <fwb-avatar-stack>
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar
+        img="https://flowbite.com/docs/images/people/profile-picture-4.jpg"
+        rounded
+        stacked
+      />
+      <fwb-avatar-stack-counter
+        href="#"
+        :total="99"
+      />
+    </fwb-avatar-stack>
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar, FwbAvatarStack, FwbAvatarStackCounter } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleStatus.vue b/docs/components/avatar/examples/FwbAvatarExampleStatus.vue
new file mode 100644
index 00000000..64711e47
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleStatus.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status="busy"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status="away"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status="offline"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/FwbAvatarExampleStatusPosition.vue b/docs/components/avatar/examples/FwbAvatarExampleStatusPosition.vue
new file mode 100644
index 00000000..cb362611
--- /dev/null
+++ b/docs/components/avatar/examples/FwbAvatarExampleStatusPosition.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="vp-raw flex justify-center space-x-4">
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      rounded
+      status-position="top-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      rounded
+      status-position="top-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      rounded
+      status-position="bottom-left"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      status-position="bottom-right"
+      status="online"
+    />
+    <fwb-avatar
+      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+      rounded
+      status-position="bottom-right"
+      status="online"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbAvatar } from '../../../../src/index'
+</script>
diff --git a/docs/components/avatar/examples/StackedAvatarsExample.vue b/docs/components/avatar/examples/StackedAvatarsExample.vue
deleted file mode 100644
index 60f25f65..00000000
--- a/docs/components/avatar/examples/StackedAvatarsExample.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="vp-raw flex-col">
-    <StackedAvatars>
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
-    </StackedAvatars>
-    <StackedAvatars class="mt-2.5">
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
-      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
-      <StackedAvatarsCounter total="99" href="#" />
-    </StackedAvatars>
-  </div>
-</template>
-<script setup>
-import { StackedAvatars, Avatar, StackedAvatarsCounter } from '../../../../src/index'
-</script>
diff --git a/docs/components/badge.md b/docs/components/badge.md
index d003f486..fb95944b 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -1,9 +1,9 @@
 <script setup>
-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'
+import FwbBadgeExample from './badge/examples/FwbBadgeExample.vue'
+import FwbBadgeExampleSize from './badge/examples/FwbBadgeExampleSize.vue'
+import FwbBadgeExampleLink from './badge/examples/FwbBadgeExampleLink.vue'
+import FwbBadgeExampleIcon from './badge/examples/FwbBadgeExampleIcon.vue'
+import FwbBadgeExampleIconOnly from './badge/examples/FwbBadgeExampleIconOnly.vue'
 </script>
 # Vue Badge - Flowbite
 
@@ -17,98 +17,127 @@ Original reference: [https://flowbite.com/docs/components/badge/](https://flowbi
 The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
 Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.
 
-
-
 ## Default badge
 Prop – type
 
-<BadgeTypesExample />
-
+<fwb-badge-example />
 ```vue
-<script setup>
-import { Badge } from 'flowbite-vue'
-</script>
 <template>
-    <Badge />
-    <Badge type="dark" />
-    <Badge type="red" />
-    <Badge type="green" />
-    <Badge type="yellow" />
-    <Badge type="indigo" />
-    <Badge type="purple" />
-    <Badge type="pink" />
+  <fwb-badge>Default</fwb-badge>
+  <fwb-badge type="dark">Dark</fwb-badge>
+  <fwb-badge type="red">Red</fwb-badge>
+  <fwb-badge type="green">Green</fwb-badge>
+  <fwb-badge type="yellow">Yellow</fwb-badge>
+  <fwb-badge type="indigo">Indigo</fwb-badge>
+  <fwb-badge type="purple">Purple</fwb-badge>
+  <fwb-badge type="pink">Pink</fwb-badge>
 </template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
 ```
 
 ## Large badges
 Prop – size
 
-<BadgeSizesExample />
-
+<fwb-badge-example-size />
 ```vue
-<script setup>
-import { Badge } from 'flowbite-vue'
-</script>
 <template>
-    <Badge />
-    <Badge type="dark" />
-    <Badge type="red" />
-    <Badge type="green" />
-    <Badge type="yellow" />
-    <Badge type="indigo" />
-    <Badge type="purple" />
-    <Badge type="pink" />
+  <fwb-badge size="xs">Default</fwb-badge>
+  <fwb-badge size="xs" type="dark">Dark</fwb-badge>
+  <fwb-badge size="xs" type="red">Red</fwb-badge>
+  <fwb-badge size="xs" type="green">Green</fwb-badge>
+  <fwb-badge size="sm" type="yellow">Yellow</fwb-badge>
+  <fwb-badge size="sm" type="indigo">Indigo</fwb-badge>
+  <fwb-badge size="sm" type="purple">Purple</fwb-badge>
+  <fwb-badge size="sm" type="pink">Pink</fwb-badge>
 </template>
+
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
 ```
 
 ## Badges as links
 You can also use badges as anchor elements to link to another page.
 Prop – href
 
+<fwb-badge-example-link />
 ```vue
-<script setup>
-import { Badge } from 'flowbite-vue'
-</script>
 <template>
-    <Badge href="#">Link</Badge>
+  <fwb-badge href="#">
+    Link
+  </fwb-badge>
+  <fwb-badge href="#" size="sm">
+    Link small
+  </fwb-badge>
 </template>
-```
 
-<BadgeLinksExample />
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
+```
 
 ## Badges with icon
 You can also use SVG icons inside the badge elements.
 slot icon
 
+<fwb-badge-example-icon />
 ```vue
-<script setup>
-import { Badge } from 'flowbite-vue'
-</script>
 <template>
-    <Badge>
-        <template #icon>
-            <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-        </template>
-        Default
-    </Badge>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Default
+  </fwb-badge>
+  <fwb-badge size="sm" type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Dark
+  </fwb-badge>
 </template>
-```
 
-<BadgeIconsExample />
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
+```
 
 ## Badge with icon only
 
+<fwb-badge-example-icon-only />
 ```vue
-<script setup>
-import { Badge } from 'flowbite-vue'
-</script>
 <template>
-    <Badge>
-        <template #icon>
-            <svg 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="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-        </template>
-    </Badge>
+  <fwb-badge>
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge type="dark">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
+  <fwb-badge size="sm" type="green">
+    <template #icon>
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" fill-rule="evenodd" />
+      </svg>
+    </template>
+  </fwb-badge>
 </template>
-```
 
-<BadgeOnlyIconsExample />
+<script setup>
+import { FwbBadge } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/badge/examples/BadgeIconsExample.vue b/docs/components/badge/examples/BadgeIconsExample.vue
deleted file mode 100644
index 76917186..00000000
--- a/docs/components/badge/examples/BadgeIconsExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw flex items-end">
-    <Badge>
-      <template #icon>
-        <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-      </template>
-      Default
-    </Badge>
-    <Badge type="dark" size="sm">
-      <template #icon>
-        <svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-      </template>
-      Dark
-    </Badge>
-  </div>
-</template>
-<script setup>
-import Badge from '@/components/Badge/Badge.vue'
-</script>
diff --git a/docs/components/badge/examples/BadgeLinksExample.vue b/docs/components/badge/examples/BadgeLinksExample.vue
deleted file mode 100644
index 81da5b92..00000000
--- a/docs/components/badge/examples/BadgeLinksExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="vp-raw flex items-end">
-    <Badge href="#">Link</Badge>
-    <Badge size="sm" href="#">Link</Badge>
-  </div>
-</template>
-<script setup>
-import { Badge } from '../../../../src/index'
-</script>
diff --git a/docs/components/badge/examples/BadgeOnlyIconsExample.vue b/docs/components/badge/examples/BadgeOnlyIconsExample.vue
deleted file mode 100644
index 88bc01f3..00000000
--- a/docs/components/badge/examples/BadgeOnlyIconsExample.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="vp-raw flex items-end">
-    <Badge>
-      <template #icon>
-        <svg 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="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-      </template>
-    </Badge>
-    <Badge type="dark">
-      <template #icon>
-        <svg 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="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-      </template>
-    </Badge>
-    <Badge type="green" size="sm">
-      <template #icon>
-        <svg 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="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
-      </template>
-    </Badge>
-  </div>
-</template>
-<script setup>
-import Badge from '@/components/Badge/Badge.vue'
-</script>
diff --git a/docs/components/badge/examples/BadgeSizesExample.vue b/docs/components/badge/examples/BadgeSizesExample.vue
deleted file mode 100644
index 9a27e577..00000000
--- a/docs/components/badge/examples/BadgeSizesExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Badge size="sm">Default</Badge>
-    <Badge type="dark" size="sm">Dark</Badge>
-    <Badge type="red" size="sm">Red</Badge>
-    <Badge type="green" size="sm">Green</Badge>
-    <Badge type="yellow" size="sm">Yellow</Badge>
-    <Badge type="indigo" size="sm">Indigo</Badge>
-    <Badge type="purple" size="sm">Purple</Badge>
-    <Badge type="pink" size="sm">Pink</Badge>
-  </div>
-</template>
-<script setup>
-import { Badge } from '../../../../src/index'
-</script>
diff --git a/docs/components/badge/examples/BadgeTypesExample.vue b/docs/components/badge/examples/BadgeTypesExample.vue
deleted file mode 100644
index 1c864b88..00000000
--- a/docs/components/badge/examples/BadgeTypesExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw flex">
-    <Badge>Default</Badge>
-    <Badge type="dark">Dark</Badge>
-    <Badge type="red">Red</Badge>
-    <Badge type="green">Green</Badge>
-    <Badge type="yellow">Yellow</Badge>
-    <Badge type="indigo">Indigo</Badge>
-    <Badge type="purple">Purple</Badge>
-    <Badge type="pink">Pink</Badge>
-  </div>
-</template>
-<script setup>
-import { Badge } from '../../../../src/index'
-</script>
diff --git a/docs/components/badge/examples/FwbBadgeExample.vue b/docs/components/badge/examples/FwbBadgeExample.vue
new file mode 100644
index 00000000..d9b82890
--- /dev/null
+++ b/docs/components/badge/examples/FwbBadgeExample.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="vp-raw flex">
+    <fwb-badge>
+      Default
+    </fwb-badge>
+    <fwb-badge type="dark">
+      Dark
+    </fwb-badge>
+    <fwb-badge type="red">
+      Red
+    </fwb-badge>
+    <fwb-badge type="green">
+      Green
+    </fwb-badge>
+    <fwb-badge type="yellow">
+      Yellow
+    </fwb-badge>
+    <fwb-badge type="indigo">
+      Indigo
+    </fwb-badge>
+    <fwb-badge type="purple">
+      Purple
+    </fwb-badge>
+    <fwb-badge type="pink">
+      Pink
+    </fwb-badge>
+  </div>
+</template>
+
+<script setup>
+import { FwbBadge } from '../../../../src/index'
+</script>
diff --git a/docs/components/badge/examples/FwbBadgeExampleIcon.vue b/docs/components/badge/examples/FwbBadgeExampleIcon.vue
new file mode 100644
index 00000000..11210b3c
--- /dev/null
+++ b/docs/components/badge/examples/FwbBadgeExampleIcon.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="vp-raw flex items-end">
+    <fwb-badge>
+      <template #icon>
+        <svg
+          aria-hidden="true"
+          class="mr-1 w-3 h-3"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+          fill-rule="evenodd"
+        /></svg>
+      </template>
+      Default
+    </fwb-badge>
+    <fwb-badge
+      size="sm"
+      type="dark"
+    >
+      <template #icon>
+        <svg
+          aria-hidden="true"
+          class="mr-1 w-3 h-3"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+          fill-rule="evenodd"
+        /></svg>
+      </template>
+      Dark
+    </fwb-badge>
+  </div>
+</template>
+
+<script setup>
+import { FwbBadge } from '../../../../src/index'
+</script>
diff --git a/docs/components/badge/examples/FwbBadgeExampleIconOnly.vue b/docs/components/badge/examples/FwbBadgeExampleIconOnly.vue
new file mode 100644
index 00000000..d81ecf9f
--- /dev/null
+++ b/docs/components/badge/examples/FwbBadgeExampleIconOnly.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="vp-raw flex items-end">
+    <fwb-badge>
+      <template #icon>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+          fill-rule="evenodd"
+        /></svg>
+      </template>
+    </fwb-badge>
+    <fwb-badge type="dark">
+      <template #icon>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+          fill-rule="evenodd"
+        /></svg>
+      </template>
+    </fwb-badge>
+    <fwb-badge
+      size="sm"
+      type="green"
+    >
+      <template #icon>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+          fill-rule="evenodd"
+        /></svg>
+      </template>
+    </fwb-badge>
+  </div>
+</template>
+
+<script setup>
+import { FwbBadge } from '../../../../src/index'
+</script>
diff --git a/docs/components/badge/examples/FwbBadgeExampleLink.vue b/docs/components/badge/examples/FwbBadgeExampleLink.vue
new file mode 100644
index 00000000..d812273f
--- /dev/null
+++ b/docs/components/badge/examples/FwbBadgeExampleLink.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw flex items-end">
+    <fwb-badge href="#">
+      Link
+    </fwb-badge>
+    <fwb-badge
+      href="#"
+      size="sm"
+    >
+      Link small
+    </fwb-badge>
+  </div>
+</template>
+
+<script setup>
+import { FwbBadge } from '../../../../src/index'
+</script>
diff --git a/docs/components/badge/examples/FwbBadgeExampleSize.vue b/docs/components/badge/examples/FwbBadgeExampleSize.vue
new file mode 100644
index 00000000..d4aabe51
--- /dev/null
+++ b/docs/components/badge/examples/FwbBadgeExampleSize.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="vp-raw flex items-end">
+    <fwb-badge size="xs">
+      Default
+    </fwb-badge>
+    <fwb-badge
+      size="xs"
+      type="dark"
+    >
+      Dark
+    </fwb-badge>
+    <fwb-badge
+      size="xs"
+      type="red"
+    >
+      Red
+    </fwb-badge>
+    <fwb-badge
+      size="xs"
+      type="green"
+    >
+      Green
+    </fwb-badge>
+    <fwb-badge
+      size="sm"
+      type="yellow"
+    >
+      Yellow
+    </fwb-badge>
+    <fwb-badge
+      size="sm"
+      type="indigo"
+    >
+      Indigo
+    </fwb-badge>
+    <fwb-badge
+      size="sm"
+      type="purple"
+    >
+      Purple
+    </fwb-badge>
+    <fwb-badge
+      size="sm"
+      type="pink"
+    >
+      Pink
+    </fwb-badge>
+  </div>
+</template>
+
+<script setup>
+import { FwbBadge } from '../../../../src/index'
+</script>
diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
index 7fab89ca..a95f695f 100644
--- a/docs/components/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -1,7 +1,7 @@
 <script setup>
-import BreadcrumbExample from './breadcrumb/examples/BreadcrumbExample.vue'
-import BreadcrumbSolidExample from './breadcrumb/examples/BreadcrumbSolidExample.vue'
-import BreadcrumbCustomIconsExample from './breadcrumb/examples/BreadcrumbCustomIconsExample.vue'
+import FwbBreadcrumbExample from './breadcrumb/examples/FwbBreadcrumbExample.vue'
+import FwbBreadcrumbExampleSolid from './breadcrumb/examples/FwbBreadcrumbExampleSolid.vue'
+import FwbBreadcrumbExampleCustomIcons from './breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue'
 </script>
 # Vue Breadcrumb - 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.
@@ -10,50 +10,84 @@ Flowbite includes two styles of breadcrumb elements, one that has a transparent
 
 ## Default breadcrumb
 
-<BreadcrumbExample />
-
+<fwb-breadcrumb-example />
 ```vue
-<script setup>
-import { Breadcrumb } from 'flowbite-vue'
-</script>
 <template>
-<Breadcrumb>
-  <BreadcrumbItem href="#" home>
-    Home
-  </BreadcrumbItem>
-  <BreadcrumbItem href="#">
-    Projects
-  </BreadcrumbItem>
-  <BreadcrumbItem>
-    Flowbite
-  </BreadcrumbItem>
-</Breadcrumb>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
 </template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
 ```
 
 ## Solid Breadcrumb
 
-<BreadcrumbSolidExample />
-
+<fwb-breadcrumb-example-solid />
 ```vue
-<script setup>
-import { Breadcrumb } from 'flowbite-vue'
-</script>
 <template>
-<Breadcrumb solid>
-  <BreadcrumbItem href="#" home>
-    Home
-  </BreadcrumbItem>
-  <BreadcrumbItem href="#">
-    Projects
-  </BreadcrumbItem>
-  <BreadcrumbItem>
-    Flowbite
-  </BreadcrumbItem>
-</Breadcrumb>
+  <fwb-breadcrumb solid>
+    <fwb-breadcrumb-item home href="#">
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
 </template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
 ```
 
 ## Custom Icons
 
-<BreadcrumbCustomIconsExample />
+<fwb-breadcrumb-example-custom-icons />
+```vue
+<template>
+  <fwb-breadcrumb>
+    <fwb-breadcrumb-item home href="#">
+      <template #home-icon>
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Home
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item href="#">
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Projects
+    </fwb-breadcrumb-item>
+    <fwb-breadcrumb-item>
+      <template #arrow-icon>
+        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        </svg>
+      </template>
+      Flowbite
+    </fwb-breadcrumb-item>
+  </fwb-breadcrumb>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/breadcrumb/examples/BreadcrumbCustomIconsExample.vue b/docs/components/breadcrumb/examples/BreadcrumbCustomIconsExample.vue
deleted file mode 100644
index bb61f9f0..00000000
--- a/docs/components/breadcrumb/examples/BreadcrumbCustomIconsExample.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Breadcrumb>
-      <BreadcrumbItem href="#" home>
-        <template #home-icon>
-          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>        </template>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">
-        <template #arrow-icon>
-          <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
-        </template>
-        Projects
-      </BreadcrumbItem>
-      <BreadcrumbItem>
-        <template #arrow-icon>
-          <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
-        </template>
-        Flowbite
-      </BreadcrumbItem>
-    </Breadcrumb>
-  </div>
-</template>
-<script setup>
-import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/breadcrumb/examples/BreadcrumbExample.vue b/docs/components/breadcrumb/examples/BreadcrumbExample.vue
deleted file mode 100644
index b39ba9ab..00000000
--- a/docs/components/breadcrumb/examples/BreadcrumbExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Breadcrumb>
-      <BreadcrumbItem href="#" home>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">
-        Projects
-      </BreadcrumbItem>
-      <BreadcrumbItem>
-        Flowbite
-      </BreadcrumbItem>
-    </Breadcrumb>
-  </div>
-</template>
-<script setup>
-import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/breadcrumb/examples/BreadcrumbSolidExample.vue b/docs/components/breadcrumb/examples/BreadcrumbSolidExample.vue
deleted file mode 100644
index 2875c2d6..00000000
--- a/docs/components/breadcrumb/examples/BreadcrumbSolidExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Breadcrumb solid>
-      <BreadcrumbItem href="#" home>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">
-        Projects
-      </BreadcrumbItem>
-      <BreadcrumbItem>
-        Flowbite
-      </BreadcrumbItem>
-    </Breadcrumb>
-  </div>
-</template>
-<script setup>
-import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/breadcrumb/examples/FwbBreadcrumbExample.vue b/docs/components/breadcrumb/examples/FwbBreadcrumbExample.vue
new file mode 100644
index 00000000..142a7741
--- /dev/null
+++ b/docs/components/breadcrumb/examples/FwbBreadcrumbExample.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="vp-raw">
+    <fwb-breadcrumb>
+      <fwb-breadcrumb-item
+        home
+        href="#"
+      >
+        Home
+      </fwb-breadcrumb-item>
+      <fwb-breadcrumb-item href="#">
+        Projects
+      </fwb-breadcrumb-item>
+      <fwb-breadcrumb-item>
+        Flowbite
+      </fwb-breadcrumb-item>
+    </fwb-breadcrumb>
+  </div>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue b/docs/components/breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue
new file mode 100644
index 00000000..debb687c
--- /dev/null
+++ b/docs/components/breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="vp-raw">
+    <fwb-breadcrumb>
+      <fwb-breadcrumb-item
+        home
+        href="#"
+      >
+        <template #home-icon>
+          <svg
+            class="w-4 h-4 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          /></svg>
+        </template>
+        Home
+      </fwb-breadcrumb-item>
+      <fwb-breadcrumb-item href="#">
+        <template #arrow-icon>
+          <svg
+            class="w-4 h-4 text-gray-400 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M14 5l7 7m0 0l-7 7m7-7H3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          /></svg>
+        </template>
+        Projects
+      </fwb-breadcrumb-item>
+      <fwb-breadcrumb-item>
+        <template #arrow-icon>
+          <svg
+            class="w-4 h-4 text-gray-400 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M14 5l7 7m0 0l-7 7m7-7H3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          /></svg>
+        </template>
+        Flowbite
+      </fwb-breadcrumb-item>
+    </fwb-breadcrumb>
+  </div>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/breadcrumb/examples/FwbBreadcrumbExampleSolid.vue b/docs/components/breadcrumb/examples/FwbBreadcrumbExampleSolid.vue
new file mode 100644
index 00000000..4c199dba
--- /dev/null
+++ b/docs/components/breadcrumb/examples/FwbBreadcrumbExampleSolid.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="vp-raw">
+    <fwb-breadcrumb solid>
+      <fwb-breadcrumb-item
+        home
+        href="#"
+      >
+        Home
+      </fwb-breadcrumb-item>
+      <fwb-breadcrumb-item href="#">
+        Projects
+      </fwb-breadcrumb-item>
+      <fwb-breadcrumb-item>
+        Flowbite
+      </fwb-breadcrumb-item>
+    </fwb-breadcrumb>
+  </div>
+</template>
+
+<script setup>
+import { FwbBreadcrumb, FwbBreadcrumbItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 9be817f9..b02b4108 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -1,6 +1,6 @@
 <script setup>
-import ButtonGroupBasicExample from './buttonGroup/examples/ButtonGroupBasicExample.vue';
-import ButtonGroupIconExample from './buttonGroup/examples/ButtonGroupIconExample.vue';
+import FwbButtonGroupExample from './buttonGroup/examples/FwbButtonGroupExample.vue'
+import FwbButtonGroupExampleIcon from './buttonGroup/examples/FwbButtonGroupExampleIcon.vue'
 </script>
 
 # Vue Button Group - Flowbite
@@ -17,41 +17,43 @@ The button group component from Flowbite can be used to stack together multiple
 
 ## Basic example
 
-<ButtonGroupBasicExample />
-
+<fwb-button-group-example />
 ```vue
-<script setup>
-import { ButtonGroup, Button } from 'flowbite-vue'
-</script>
 <template>
-  <button-group>
-    <Button>hello world</Button>
-    <Button color="purple">hello world</Button>
-    <Button color="alternative">hello world</Button>
-    <Button color="red">hello world</Button>
-  </button-group>
+  <fwb-button-group>
+    <fwb-button>Button Default</fwb-button>
+    <fwb-button color="purple">Button Purple</fwb-button>
+    <fwb-button color="alternative">Button Alternative</fwb-button>
+    <fwb-button color="red">Button Red</fwb-button>
+  </fwb-button-group>
 </template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
 ```
 
 ## Buttons with icons
 
-<ButtonGroupIconExample />
-
+<fwb-button-group-example-icon />
 ```vue
-<script setup>
-import { ButtonGroup, Button } from 'flowbite-vue'
-</script>
 <template>
-  <button-group>
-    <Button outline>Button1</Button>
-    <Button outline>Button2</Button>
-    <Button outline>Button3</Button>
-    <Button outline>
-      hello world
+  <fwb-button-group>
+    <fwb-button outline>Button 1</fwb-button>
+    <fwb-button outline>Button 2</fwb-button>
+    <fwb-button outline>Button 3</fwb-button>
+    <fwb-button outline>
+      Button 4
       <template #suffix>
-        <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+        </svg>
       </template>
-    </Button>
-  </button-group>
+    </fwb-button>
+  </fwb-button-group>
 </template>
+
+<script setup>
+import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
+</script>
 ```
diff --git a/docs/components/button.md b/docs/components/button.md
index 5f926de9..86f378ed 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -1,19 +1,19 @@
 <script setup>
-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';
-import ButtonLinkExample from './button/examples/ButtonLinkExample.vue';
+import FwbButtonExampleColor from './button/examples/FwbButtonExampleColor.vue';
+import FwbButtonExampleDisabled from './button/examples/FwbButtonExampleDisabled.vue';
+import FwbButtonExampleGradientDuotone from './button/examples/FwbButtonExampleGradientDuotone.vue';
+import FwbButtonExampleGradientMonochrome from './button/examples/FwbButtonExampleGradientMonochrome.vue';
+import FwbButtonExampleLink from './button/examples/FwbButtonExampleLink.vue';
+import FwbButtonExampleLoading from './button/examples/FwbButtonExampleLoading.vue';
+import FwbButtonExampleOutline from './button/examples/FwbButtonExampleOutline.vue';
+import FwbButtonExampleOutlineGradient from './button/examples/FwbButtonExampleOutlineGradient.vue';
+import FwbButtonExamplePill from './button/examples/FwbButtonExamplePill.vue';
+import FwbButtonExampleShadow from './button/examples/FwbButtonExampleShadow.vue';
+import FwbButtonExampleSize from './button/examples/FwbButtonExampleSize.vue';
+import FwbButtonExampleSlot from './button/examples/FwbButtonExampleSlot.vue';
+import FwbButtonExampleSlotPrefix from './button/examples/FwbButtonExampleSlotPrefix.vue';
+import FwbButtonExampleSlotSuffix from './button/examples/FwbButtonExampleSlotSuffix.vue';
+import FwbButtonExampleSquare from './button/examples/FwbButtonExampleSquare.vue';
 </script>
 
 # Vue Button - Flowbite
@@ -32,413 +32,360 @@ Flowbite provides a large variety of styles and sizes for the button component i
 
 ## Prop - color
 
-```typescript
-type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
-defineProps({
-    color: {
-        type: String as PropType<ButtonVariant>,
-        default: 'default',
-    },
-})
-```
-
-
-<ButtonColorExample />
-
+<fwb-button-example-color />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-    <Button color="default">Default</Button>
-    <Button color="alternative">Alternative</Button>
-    <Button color="dark">Dark</Button>
-    <Button color="light">Light</Button>
-    <Button color="green">Green</Button>
-    <Button color="red">Red</Button>
-    <Button color="yellow">Yellow</Button>
-    <Button color="purple">Purple</Button>
+  <fwb-button color="default">Default</fwb-button>
+  <fwb-button color="alternative">Alternative</fwb-button>
+  <fwb-button color="dark">Dark</fwb-button>
+  <fwb-button color="light">Light</fwb-button>
+  <fwb-button color="green">Green</fwb-button>
+  <fwb-button color="red">Red</fwb-button>
+  <fwb-button color="yellow">Yellow</fwb-button>
+  <fwb-button color="purple">Purple</fwb-button>
+  <fwb-button color="pink">Pink</fwb-button>
 </template>
-```
 
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
 
-## Prop - size
-
-```typescript
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-defineProps({
-    size: {
-        type: String as PropType<ButtonSize>,
-        default: 'md',
-    },
-})
-```
+````
 
 
-<ButtonSizeExample />
+## Prop - size
 
+<fwb-button-example-size />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button size="xs">XS</Button>
-  <Button size="sm">SM</Button>
-  <Button size="md">MD</Button>
-  <Button size="lg">LG</Button>
-  <Button size="xl">XL</Button>
+  <fwb-button size="xs">Extra Small - xs</fwb-button>
+  <fwb-button size="sm">Small - sm</fwb-button>
+  <fwb-button size="md">Medium - md</fwb-button>
+  <fwb-button size="lg">Large - lg</fwb-button>
+  <fwb-button size="xl">Extra Large - xl</fwb-button>
 </template>
-```
-
-## Prop - pill
-
-```typescript
-defineProps({
-    pill: {
-        type: Boolean,
-        default: false,
-    },
-})
-```
 
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+````
 
-<ButtonPillExample />
+## Prop - pill
 
+<fwb-button-example-pill />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button color="default" pill>Default</Button>
-  <Button color="alternative" pill>Alternative</Button>
-  <Button color="dark" pill>Dark</Button>
-  <Button color="light" pill>Light</Button>
-  <Button color="green" pill>Green</Button>
-  <Button color="red" pill>Red</Button>
-  <Button color="yellow" pill>Yellow</Button>
-  <Button color="purple" pill>Purple</Button>
+  <fwb-button color="default" pill>Default</fwb-button>
+  <fwb-button color="alternative" pill>Alternative</fwb-button>
+  <fwb-button color="dark" pill>Dark</fwb-button>
+  <fwb-button color="light" pill>Light</fwb-button>
+  <fwb-button color="green" pill>Green</fwb-button>
+  <fwb-button color="red" pill>Red</fwb-button>
+  <fwb-button color="yellow" pill>Yellow</fwb-button>
+  <fwb-button color="purple" pill>Purple</fwb-button>
 </template>
-```
 
-## Prop - gradient (monochrome)
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
 
-```typescript
-type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
-type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
-type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
-
-defineProps({
-    gradient: {
-        type: [String, null] as PropType<ButtonGradient | null>,
-        default: null,
-    },
-})
-```
+````
 
 
-<ButtonGradientMonochromeExample />
+## Prop - gradient (monochrome)
 
+<fwb-button-example-gradient-monochrome />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button gradient="blue">Blue</Button>
-  <Button gradient="cyan">Cyan</Button>
-  <Button gradient="green">Green</Button>
-  <Button gradient="lime">Lime</Button>
-  <Button gradient="pink">Pink</Button>
-  <Button gradient="purple">Purple</Button>
-  <Button gradient="red">Red</Button>
-  <Button gradient="teal">Teal</Button>
+  <fwb-button gradient="blue">Blue</fwb-button>
+  <fwb-button gradient="cyan">Cyan</fwb-button>
+  <fwb-button gradient="green">Green</fwb-button>
+  <fwb-button gradient="lime">Lime</fwb-button>
+  <fwb-button gradient="pink">Pink</fwb-button>
+  <fwb-button gradient="purple">Purple</fwb-button>
+  <fwb-button gradient="red">Red</fwb-button>
+  <fwb-button gradient="teal">Teal</fwb-button>
 </template>
-```
 
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+````
 
-## Prop - gradient  (duotone)
-
-<ButtonGradientDuotoneExample />
+## Prop - gradient (duotone)
 
+<fwb-button-example-gradient-duotone />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button gradient="purple-blue">Purple to blue</Button>
-  <Button gradient="cyan-blue">Cyan to blue</Button>
-  <Button gradient="green-blue">Green to blue</Button>
-  <Button gradient="purple-pink">Purple to pink</Button>
-  <Button gradient="pink-orange">Pink to orange</Button>
-  <Button gradient="teal-lime">Teal to lime</Button>
-  <Button gradient="red-yellow">Red to yellow</Button>
+  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue">Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
 </template>
-```
 
-## Prop - outline (color)
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
 
-```typescript
-defineProps({
-    outline: {
-        type: Boolean,
-        default: false,
-    },
-})
-```
+````
 
 
-<ButtonOutlineColorExample />
+## Prop - outline
 
+<fwb-button-example-outline />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button color="default" outline>Default</Button>
-  <Button color="dark" outline>Dark</Button>
-  <Button color="green" outline>Green</Button>
-  <Button color="red" outline>Red</Button>
-  <Button color="yellow" outline>Yellow</Button>
-  <Button color="purple" outline>Purple</Button>
+  <fwb-button color="default" outline>Default</fwb-button>
+  <fwb-button color="dark" outline>Dark</fwb-button>
+  <fwb-button color="green" outline>Green</fwb-button>
+  <fwb-button color="red" outline>Red</fwb-button>
+  <fwb-button color="yellow" outline>Yellow</fwb-button>
+  <fwb-button color="purple" outline>Purple</fwb-button>
 </template>
-```
 
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+````
 
 ## Prop - outline (gradient)
 
-<ButtonOutlineGradientExample />
-
+<fwb-button-example-outline-gradient />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button gradient="purple-blue" outline>Purple to blue</Button>
-  <Button gradient="cyan-blue" outline>Cyan to blue</Button>
-  <Button gradient="green-blue" outline>Green to blue</Button>
-  <Button gradient="purple-pink" outline>Purple to pink</Button>
-  <Button gradient="pink-orange" outline>Pink to orange</Button>
-  <Button gradient="teal-lime" outline>Teal to lime</Button>
-  <Button gradient="red-yellow" outline>Red to yellow</Button>
+  <fwb-button gradient="purple-blue" outline>Purple to blue</fwb-button>
+  <fwb-button gradient="cyan-blue" outline>Cyan to blue</fwb-button>
+  <fwb-button gradient="green-blue" outline>Green to blue</fwb-button>
+  <fwb-button gradient="purple-pink" outline>Purple to pink</fwb-button>
+  <fwb-button gradient="pink-orange" outline>Pink to orange</fwb-button>
+  <fwb-button gradient="teal-lime" outline>Teal to lime</fwb-button>
+  <fwb-button gradient="red-yellow" outline>Red to yellow</fwb-button>
 </template>
-```
-
-## Prop - shadow
 
-```typescript
-type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
 
-defineProps({
-    shadow: {
-        type: [String, null] as PropType<ButtonMonochromeGradient | '' | null>,
-        default: null,
-    },
-})
-```
+````
 
-<ButtonGradientShadowExample />
+## Prop - shadow
 
+<fwb-button-example-shadow />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button gradient="blue" shadow>Blue</Button>
-  <Button gradient="cyan" shadow>Cyan</Button>
-  <Button gradient="green" shadow>Green</Button>
-  <Button gradient="lime" shadow>Lime</Button>
-  <Button gradient="pink" shadow>Pink</Button>
-  <Button gradient="purple" shadow>Purple</Button>
-  <Button gradient="red" shadow>Red</Button>
-  <Button gradient="teal" shadow>Teal</Button>
+  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
+  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
+  <fwb-button gradient="green" shadow>Green with green</fwb-button>
+  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
+  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
+  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
+  <fwb-button gradient="red" shadow>Red with red</fwb-button>
+  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
+  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
+  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
+  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
 </template>
-```
 
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+````
 
 ## Prop - square
 
-```typescript
-defineProps({
-    square: {
-        type: Boolean,
-        default: false,
-    },
-})
-```
-
-
-<ButtonSquareExample />
-
+<fwb-button-example-square />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button gradient="red-yellow" square>
-    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
-  <Button color="default" pill square>
-    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
-  <Button color="dark" outline square>
-    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
-  <Button color="yellow" pill outline square>
-    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
+  <fwb-button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="yellow" outline pill square>
+    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </fwb-button>
 </template>
-```
 
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
 
-## Prop - loading
-
-```typescript
-defineProps({
-    loading: {
-        type: Boolean,
-        default: false,
-    },
-    loadingPosition: {
-        type: String as PropType<'suffix' | 'prefix'>,
-        default: 'prefix',
-    },
-})
-```
-
+````
 
-<ButtonLoadingExample />
+## Prop - loading
 
+<fwb-button-example-loading />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-const loading = ref(false)
-</script>
 <template>
-  <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
+  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
     Click me
-  </Button>
-  <Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
     Click me
-  </Button>
-  <Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
+  </fwb-button>
+  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
     Click me
     <template #suffix>
       <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-              clip-rule="evenodd"></path>
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
       </svg>
     </template>
-  </Button>
-  <Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
     Click me
-  </Button>
-  <Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
+  </fwb-button>
+  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
     Click me
-  </Button>
+  </fwb-button>
 </template>
-```
-
-
-## Prop - disabled
 
-```typescript
-defineProps({
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-})
-```
+<script setup>
+import { ref } from 'vue'
+import { FwbButton } from 'flowbite-vue'
 
+const loading = ref(false)
+</script>
+````
 
-<ButtonDisabledExample />
+## Prop - disabled
 
+<fwb-button-example-disabled />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button color="default" disabled>Default</Button>
-  <Button color="default" outline disabled>Default outline</Button>
-  <Button gradient="red" disabled>Red gradient</Button>
-  <Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
-  <Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
+  <fwb-button color="default" disabled>Default</fwb-button>
+  <fwb-button color="default" outline disabled>Default outline</fwb-button>
+  <fwb-button gradient="red" disabled>Red gradient</fwb-button>
+  <fwb-button gradient="red-yellow" disabled>Red to yellow gradient</fwb-button>
+  <fwb-button gradient="red-yellow" outline disabled>Red to yellow outline</fwb-button>
 </template>
-```
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+
+````
+
 ## Prop - href
 You can add a link to a `Button` component.
 Additionally you can add `tag` prop to change button component to `router-link`
-<ButtonLinkExample />
 
+<fwb-button-example-link />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button color="default" href="https://google.com" target="_blank">Default</Button>
-  <Button href="/about" tag="router-link">Router link</Button>
+  <fwb-button href="https://google.com" target="_blank">Google.com</fwb-button>
+  <fwb-button href="/pages/getting-started" tag="router-link">Quickstart</fwb-button>
 </template>
-```
 
-## Slot - default
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+````
 
-<ButtonIconExample />
+## Slot - default
 
+<fwb-button-example-slot />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button gradient="purple-blue" square>
-    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
-  <Button color="default" pill square>
-    <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
-  <Button gradient="green-blue" square>
+  <fwb-button gradient="purple-blue" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+    </svg>
+  </fwb-button>
+  <fwb-button gradient="green-blue" square>
     Close something
-  </Button>
-  <Button color="default" pill outline square>
+  </fwb-button>
+  <fwb-button color="default" outline pill square>
     Open something
     <template #suffix>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
     </template>
-  </Button>
+  </fwb-button>
 </template>
-```
 
-## Slot - prefix
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+
+````
 
-<ButtonPrefixExample />
+## Slot - prefix
 
+<fwb-button-example-slot-prefix />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button color="default">
+  <fwb-button>
     <template #prefix>
-      <svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+      </svg>
     </template>
     Buy
-  </Button>
+  </fwb-button>
 </template>
-```
 
-## Slot - suffix
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+````
 
-<ButtonSuffixExample />
+## Slot - suffix
 
+<fwb-button-example-slot-suffix />
 ```vue
-<script setup>
-import { Button } from 'flowbite-vue'
-</script>
 <template>
-  <Button color="default">
+  <fwb-button>
     Choose plan
     <template #suffix>
-      <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
+      </svg>
     </template>
-  </Button>
+  </fwb-button>
 </template>
+
+<script setup>
+import { FwbButton } from 'flowbite-vue'
+</script>
+
+```
+
+## Button API
+
+### Props
+| Name             | Type    | Values                                                                                         | Default   |
+|------------------|---------|------------------------------------------------------------------------------------------------|-----------|
+| color            | String  | `default`, `alternative`, `dark`, `light`, `green`, `red`, `yellow`, `purple`, `pink`, `blue`  | `default` |
+| disabled         | Boolean |                                                                                                | `false`   |
+| gradient         | String  | monochrome:<br>`blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple`<br>duotone:<br>`purple-blue`, `cyan-blue`, `green-blue`, `purple-pink`, `pink-orange`, `teal-lime`, `red-yellow`                                      | `null`    |
+| href             | String  |                                                                                                | `''`      |
+| loading          | Boolean |                                                                                                | `false`   |
+| loading-position | String  |  `prefix`, `suffix`                                                                            | `prefix`  |
+| outline          | Boolean |                                                                                                | `false`   |
+| pill             | Boolean |                                                                                                | `false`   |
+| shadow           | String  | `blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple`                               | `null`    |
+| size             | String  | `xs`, `sm`, `md`, `lg`, `xl`                                                                   | `md`      |
+| square           | Boolean |                                                                                                | `false`   |
+| tag              | String  |                                                                                                | `a`       |
 ```
diff --git a/docs/components/button/examples/ButtonColorExample.vue b/docs/components/button/examples/ButtonColorExample.vue
deleted file mode 100644
index 1e661151..00000000
--- a/docs/components/button/examples/ButtonColorExample.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default">Default</Button>
-    <Button color="alternative">Alternative</Button>
-    <Button color="dark">Dark</Button>
-    <Button color="light">Light</Button>
-    <Button color="green">Green</Button>
-    <Button color="red">Red</Button>
-    <Button color="yellow">Yellow</Button>
-    <Button color="purple">Purple</Button>
-    <Button color="pink">Pink</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonDisabledExample.vue b/docs/components/button/examples/ButtonDisabledExample.vue
deleted file mode 100644
index 9692b37b..00000000
--- a/docs/components/button/examples/ButtonDisabledExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default" disabled>Default</Button>
-    <Button color="default" outline disabled>Default outline</Button>
-    <Button gradient="red" disabled>Red gradient</Button>
-    <Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
-    <Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonGradientDuotoneExample.vue b/docs/components/button/examples/ButtonGradientDuotoneExample.vue
deleted file mode 100644
index 921526b2..00000000
--- a/docs/components/button/examples/ButtonGradientDuotoneExample.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button gradient="purple-blue">Purple to blue</Button>
-    <Button gradient="cyan-blue">Cyan to blue</Button>
-    <Button gradient="green-blue">Green to blue</Button>
-    <Button gradient="purple-pink">Purple to pink</Button>
-    <Button gradient="pink-orange">Pink to orange</Button>
-    <Button gradient="teal-lime">Teal to lime</Button>
-    <Button gradient="red-yellow">Red to yellow</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonGradientMonochromeExample.vue b/docs/components/button/examples/ButtonGradientMonochromeExample.vue
deleted file mode 100644
index 005667b3..00000000
--- a/docs/components/button/examples/ButtonGradientMonochromeExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button gradient="blue">Blue</Button>
-    <Button gradient="cyan">Cyan</Button>
-    <Button gradient="green">Green</Button>
-    <Button gradient="lime">Lime</Button>
-    <Button gradient="pink">Pink</Button>
-    <Button gradient="purple">Purple</Button>
-    <Button gradient="red">Red</Button>
-    <Button gradient="teal">Teal</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonGradientShadowExample.vue b/docs/components/button/examples/ButtonGradientShadowExample.vue
deleted file mode 100644
index 81ecfcd8..00000000
--- a/docs/components/button/examples/ButtonGradientShadowExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button gradient="blue" shadow>Blue with blue</Button>
-    <Button gradient="cyan" shadow>Cyan with cyan</Button>
-    <Button gradient="green" shadow>Green with green</Button>
-    <Button gradient="lime" shadow>Lime with lime</Button>
-    <Button gradient="pink" shadow>Pink with pink</Button>
-    <Button gradient="purple" shadow>Purple with purple</Button>
-    <Button gradient="red" shadow>Red with red</Button>
-    <Button gradient="teal" shadow>Teal with teal</Button>
-    <Button gradient="blue" shadow="red">Blue with red</Button>
-    <Button gradient="cyan" shadow="teal">Cyan with teal</Button>
-    <Button gradient="teal" shadow="purple">Teal with purple</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonIconExample.vue b/docs/components/button/examples/ButtonIconExample.vue
deleted file mode 100644
index 4b7546db..00000000
--- a/docs/components/button/examples/ButtonIconExample.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button gradient="purple-blue" square>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
-    <Button color="default" pill square>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
-    <Button gradient="green-blue" square>
-      Close something
-    </Button>
-    <Button color="default" pill outline square>
-      Open something
-      <template #suffix>
-        <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-      </template>
-    </Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonLinkExample.vue b/docs/components/button/examples/ButtonLinkExample.vue
index cc57b73f..f2d79cbd 100644
--- a/docs/components/button/examples/ButtonLinkExample.vue
+++ b/docs/components/button/examples/ButtonLinkExample.vue
@@ -1,9 +1,20 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default" href="https://google.com" target="_blank">Default</Button>
-    <Button href="/about" tag="router-link">Router link</Button>
+    <fwb-button
+      color="default"
+      href="https://google.com"
+      target="_blank"
+    >
+      Default
+    </fwb-button>
+    <fwb-button
+      href="/about"
+      tag="router-link"
+    >
+      Router link
+    </fwb-button>
   </div>
 </template>
 <script setup>
-import { Button } from '../../../../src/index'
+import { FwbButton } from '../../../../src/index'
 </script>
diff --git a/docs/components/button/examples/ButtonLoadingExample.vue b/docs/components/button/examples/ButtonLoadingExample.vue
deleted file mode 100644
index 63d3539d..00000000
--- a/docs/components/button/examples/ButtonLoadingExample.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
-    <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
-      Click me
-    </Button>
-    <Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
-      Click me
-    </Button>
-    <Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
-      Click me
-      <template #suffix>
-        <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
-        </svg>
-      </template>
-    </Button>
-    <Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
-      Click me
-    </Button>
-    <Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
-      Click me
-    </Button>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Button } from '../../../../src/index'
-
-const loading = ref(false)
-</script>
diff --git a/docs/components/button/examples/ButtonOutlineColorExample.vue b/docs/components/button/examples/ButtonOutlineColorExample.vue
deleted file mode 100644
index 878550ae..00000000
--- a/docs/components/button/examples/ButtonOutlineColorExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default" outline>Default</Button>
-    <Button color="dark" outline>Dark</Button>
-    <Button color="green" outline>Green</Button>
-    <Button color="red" outline>Red</Button>
-    <Button color="yellow" outline>Yellow</Button>
-    <Button color="purple" outline>Purple</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonOutlineGradientExample.vue b/docs/components/button/examples/ButtonOutlineGradientExample.vue
deleted file mode 100644
index e5dedb2b..00000000
--- a/docs/components/button/examples/ButtonOutlineGradientExample.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button gradient="purple-blue" outline>Purple to blue</Button>
-    <Button gradient="cyan-blue" outline>Cyan to blue</Button>
-    <Button gradient="green-blue" outline>Green to blue</Button>
-    <Button gradient="purple-pink" outline>Purple to pink</Button>
-    <Button gradient="pink-orange" outline>Pink to orange</Button>
-    <Button gradient="teal-lime" outline>Teal to lime</Button>
-    <Button gradient="red-yellow" outline>Red to yellow</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonPillExample.vue b/docs/components/button/examples/ButtonPillExample.vue
deleted file mode 100644
index 801c3997..00000000
--- a/docs/components/button/examples/ButtonPillExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default" pill>Default</Button>
-    <Button color="alternative" pill>Alternative</Button>
-    <Button color="dark" pill>Dark</Button>
-    <Button color="light" pill>Light</Button>
-    <Button color="green" pill>Green</Button>
-    <Button color="red" pill>Red</Button>
-    <Button color="yellow" pill>Yellow</Button>
-    <Button color="purple" pill>Purple</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonPrefixExample.vue b/docs/components/button/examples/ButtonPrefixExample.vue
deleted file mode 100644
index de2958f5..00000000
--- a/docs/components/button/examples/ButtonPrefixExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default">
-      <template #prefix>
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
-      </template>
-      Buy
-    </Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonSizeExample.vue b/docs/components/button/examples/ButtonSizeExample.vue
deleted file mode 100644
index d4da723d..00000000
--- a/docs/components/button/examples/ButtonSizeExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
-    <Button size="xs">Extra small - xs</Button>
-    <Button size="sm">Small - sm</Button>
-    <Button size="md">Medium - md</Button>
-    <Button size="lg">Large - lg</Button>
-    <Button size="xl">Extra Large - xl</Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonSquareExample.vue b/docs/components/button/examples/ButtonSquareExample.vue
deleted file mode 100644
index 64a9cdac..00000000
--- a/docs/components/button/examples/ButtonSquareExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button gradient="red-yellow" square>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
-    <Button color="default" pill square>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
-    <Button color="dark" outline square>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
-    <Button color="yellow" pill outline square>
-      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/ButtonSuffixExample.vue b/docs/components/button/examples/ButtonSuffixExample.vue
deleted file mode 100644
index f1e92147..00000000
--- a/docs/components/button/examples/ButtonSuffixExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Button color="default">
-      Choose plan
-      <template #suffix>
-        <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-      </template>
-    </Button>
-  </div>
-</template>
-<script setup>
-import { Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/button/examples/FwbButtonExampleColor.vue b/docs/components/button/examples/FwbButtonExampleColor.vue
new file mode 100644
index 00000000..b7f71b3a
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleColor.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button color="default">
+      Default
+    </fwb-button>
+    <fwb-button color="alternative">
+      Alternative
+    </fwb-button>
+    <fwb-button color="dark">
+      Dark
+    </fwb-button>
+    <fwb-button color="light">
+      Light
+    </fwb-button>
+    <fwb-button color="green">
+      Green
+    </fwb-button>
+    <fwb-button color="red">
+      Red
+    </fwb-button>
+    <fwb-button color="yellow">
+      Yellow
+    </fwb-button>
+    <fwb-button color="purple">
+      Purple
+    </fwb-button>
+    <fwb-button color="pink">
+      Pink
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleDisabled.vue b/docs/components/button/examples/FwbButtonExampleDisabled.vue
new file mode 100644
index 00000000..99aadb45
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleDisabled.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      color="default"
+      disabled
+    >
+      Default
+    </fwb-button>
+    <fwb-button
+      color="default"
+      outline
+      disabled
+    >
+      Default outline
+    </fwb-button>
+    <fwb-button
+      gradient="red"
+      disabled
+    >
+      Red gradient
+    </fwb-button>
+    <fwb-button
+      gradient="red-yellow"
+      disabled
+    >
+      Red to yellow gradient
+    </fwb-button>
+    <fwb-button
+      gradient="red-yellow"
+      outline
+      disabled
+    >
+      Red to yellow outline
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleGradientDuotone.vue b/docs/components/button/examples/FwbButtonExampleGradientDuotone.vue
new file mode 100644
index 00000000..ac06201f
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleGradientDuotone.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button gradient="purple-blue">
+      Purple to blue
+    </fwb-button>
+    <fwb-button gradient="cyan-blue">
+      Cyan to blue
+    </fwb-button>
+    <fwb-button gradient="green-blue">
+      Green to blue
+    </fwb-button>
+    <fwb-button gradient="purple-pink">
+      Purple to pink
+    </fwb-button>
+    <fwb-button gradient="pink-orange">
+      Pink to orange
+    </fwb-button>
+    <fwb-button gradient="teal-lime">
+      Teal to lime
+    </fwb-button>
+    <fwb-button gradient="red-yellow">
+      Red to yellow
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleGradientMonochrome.vue b/docs/components/button/examples/FwbButtonExampleGradientMonochrome.vue
new file mode 100644
index 00000000..9b3dcc58
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleGradientMonochrome.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button gradient="blue">
+      Blue
+    </fwb-button>
+    <fwb-button gradient="cyan">
+      Cyan
+    </fwb-button>
+    <fwb-button gradient="green">
+      Green
+    </fwb-button>
+    <fwb-button gradient="lime">
+      Lime
+    </fwb-button>
+    <fwb-button gradient="pink">
+      Pink
+    </fwb-button>
+    <fwb-button gradient="purple">
+      Purple
+    </fwb-button>
+    <fwb-button gradient="red">
+      Red
+    </fwb-button>
+    <fwb-button gradient="teal">
+      Teal
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleLink.vue b/docs/components/button/examples/FwbButtonExampleLink.vue
new file mode 100644
index 00000000..23687756
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleLink.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      href="https://google.com"
+      target="_blank"
+    >
+      Google.com
+    </fwb-button>
+    <!-- we're missing `vue-router` dependency for this to work-->
+    <!-- <fwb-button
+      href="/pages/getting-started"
+      tag="router-link"
+    >
+      Quickstart
+    </fwb-button> -->
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleLoading.vue b/docs/components/button/examples/FwbButtonExampleLoading.vue
new file mode 100644
index 00000000..1c9c74dc
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleLoading.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="vp-raw flex flex-wrap items-center gap-2">
+    <fwb-button
+      :disabled="loading"
+      :loading="loading"
+      gradient="purple-blue"
+      outline
+      size="xs"
+      @click="loading = !loading"
+    >
+      Click me
+    </fwb-button>
+    <fwb-button
+      :loading="loading"
+      gradient="red-yellow"
+      size="sm"
+      @click="loading = !loading"
+    >
+      Click me
+    </fwb-button>
+    <fwb-button
+      :loading="loading"
+      color="default"
+      loading-position="suffix"
+      outline
+      @click="loading = !loading"
+    >
+      Click me
+      <template #suffix>
+        <svg
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </template>
+    </fwb-button>
+    <fwb-button
+      :loading="loading"
+      gradient="green-blue"
+      size="lg"
+      @click="loading = !loading"
+    >
+      Click me
+    </fwb-button>
+    <fwb-button
+      :loading="loading"
+      gradient="pink"
+      size="xl"
+      @click="loading = !loading"
+    >
+      Click me
+    </fwb-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton } from '../../../../src/index'
+
+const loading = ref(false)
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleOutline.vue b/docs/components/button/examples/FwbButtonExampleOutline.vue
new file mode 100644
index 00000000..d0726d71
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleOutline.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      color="default"
+      outline
+    >
+      Default
+    </fwb-button>
+    <fwb-button
+      color="dark"
+      outline
+    >
+      Dark
+    </fwb-button>
+    <fwb-button
+      color="green"
+      outline
+    >
+      Green
+    </fwb-button>
+    <fwb-button
+      color="red"
+      outline
+    >
+      Red
+    </fwb-button>
+    <fwb-button
+      color="yellow"
+      outline
+    >
+      Yellow
+    </fwb-button>
+    <fwb-button
+      color="purple"
+      outline
+    >
+      Purple
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleOutlineGradient.vue b/docs/components/button/examples/FwbButtonExampleOutlineGradient.vue
new file mode 100644
index 00000000..dc12f45b
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleOutlineGradient.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      gradient="purple-blue"
+      outline
+    >
+      Purple to blue
+    </fwb-button>
+    <fwb-button
+      gradient="cyan-blue"
+      outline
+    >
+      Cyan to blue
+    </fwb-button>
+    <fwb-button
+      gradient="green-blue"
+      outline
+    >
+      Green to blue
+    </fwb-button>
+    <fwb-button
+      gradient="purple-pink"
+      outline
+    >
+      Purple to pink
+    </fwb-button>
+    <fwb-button
+      gradient="pink-orange"
+      outline
+    >
+      Pink to orange
+    </fwb-button>
+    <fwb-button
+      gradient="teal-lime"
+      outline
+    >
+      Teal to lime
+    </fwb-button>
+    <fwb-button
+      gradient="red-yellow"
+      outline
+    >
+      Red to yellow
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExamplePill.vue b/docs/components/button/examples/FwbButtonExamplePill.vue
new file mode 100644
index 00000000..8968db3d
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExamplePill.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      color="default"
+      pill
+    >
+      Default
+    </fwb-button>
+    <fwb-button
+      color="alternative"
+      pill
+    >
+      Alternative
+    </fwb-button>
+    <fwb-button
+      color="dark"
+      pill
+    >
+      Dark
+    </fwb-button>
+    <fwb-button
+      color="light"
+      pill
+    >
+      Light
+    </fwb-button>
+    <fwb-button
+      color="green"
+      pill
+    >
+      Green
+    </fwb-button>
+    <fwb-button
+      color="red"
+      pill
+    >
+      Red
+    </fwb-button>
+    <fwb-button
+      color="yellow"
+      pill
+    >
+      Yellow
+    </fwb-button>
+    <fwb-button
+      color="purple"
+      pill
+    >
+      Purple
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleShadow.vue b/docs/components/button/examples/FwbButtonExampleShadow.vue
new file mode 100644
index 00000000..31470df0
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleShadow.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      gradient="blue"
+      shadow
+    >
+      Blue with blue
+    </fwb-button>
+    <fwb-button
+      gradient="cyan"
+      shadow
+    >
+      Cyan with cyan
+    </fwb-button>
+    <fwb-button
+      gradient="green"
+      shadow
+    >
+      Green with green
+    </fwb-button>
+    <fwb-button
+      gradient="lime"
+      shadow
+    >
+      Lime with lime
+    </fwb-button>
+    <fwb-button
+      gradient="pink"
+      shadow
+    >
+      Pink with pink
+    </fwb-button>
+    <fwb-button
+      gradient="purple"
+      shadow
+    >
+      Purple with purple
+    </fwb-button>
+    <fwb-button
+      gradient="red"
+      shadow
+    >
+      Red with red
+    </fwb-button>
+    <fwb-button
+      gradient="teal"
+      shadow
+    >
+      Teal with teal
+    </fwb-button>
+    <fwb-button
+      gradient="blue"
+      shadow="red"
+    >
+      Blue with red
+    </fwb-button>
+    <fwb-button
+      gradient="cyan"
+      shadow="teal"
+    >
+      Cyan with teal
+    </fwb-button>
+    <fwb-button
+      gradient="teal"
+      shadow="purple"
+    >
+      Teal with purple
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleSize.vue b/docs/components/button/examples/FwbButtonExampleSize.vue
new file mode 100644
index 00000000..f8b83046
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleSize.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2 items-center">
+    <fwb-button size="xs">
+      Extra Small - xs
+    </fwb-button>
+    <fwb-button size="sm">
+      Small - sm
+    </fwb-button>
+    <fwb-button size="md">
+      Medium - md
+    </fwb-button>
+    <fwb-button size="lg">
+      Large - lg
+    </fwb-button>
+    <fwb-button size="xl">
+      Extra Large - xl
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleSlot.vue b/docs/components/button/examples/FwbButtonExampleSlot.vue
new file mode 100644
index 00000000..47ec2b01
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleSlot.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      gradient="purple-blue"
+      square
+    >
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      ><path
+        clip-rule="evenodd"
+        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+        fill-rule="evenodd"
+      /></svg>
+    </fwb-button>
+    <fwb-button
+      color="default"
+      pill
+      square
+    >
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      ><path
+        clip-rule="evenodd"
+        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+        fill-rule="evenodd"
+      /></svg>
+    </fwb-button>
+    <fwb-button
+      gradient="green-blue"
+      square
+    >
+      Close something
+    </fwb-button>
+    <fwb-button
+      color="default"
+      outline
+      pill
+      square
+    >
+      Open something
+      <template #suffix>
+        <svg
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+          fill-rule="evenodd"
+        /></svg>
+      </template>
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleSlotPrefix.vue b/docs/components/button/examples/FwbButtonExampleSlotPrefix.vue
new file mode 100644
index 00000000..2cf28384
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleSlotPrefix.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw">
+    <fwb-button>
+      <template #prefix>
+        <svg
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+        </svg>
+      </template>
+      Buy
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleSlotSuffix.vue b/docs/components/button/examples/FwbButtonExampleSlotSuffix.vue
new file mode 100644
index 00000000..cb3daef1
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleSlotSuffix.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="vp-raw">
+    <fwb-button>
+      Choose plan
+      <template #suffix>
+        <svg
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </template>
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/button/examples/FwbButtonExampleSquare.vue b/docs/components/button/examples/FwbButtonExampleSquare.vue
new file mode 100644
index 00000000..9cd32345
--- /dev/null
+++ b/docs/components/button/examples/FwbButtonExampleSquare.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="vp-raw flex flex-wrap gap-2">
+    <fwb-button
+      gradient="red-yellow"
+      square
+    >
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      ><path
+        clip-rule="evenodd"
+        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+        fill-rule="evenodd"
+      /></svg>
+    </fwb-button>
+    <fwb-button
+      color="default"
+      pill
+      square
+    >
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      ><path
+        clip-rule="evenodd"
+        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+        fill-rule="evenodd"
+      /></svg>
+    </fwb-button>
+    <fwb-button
+      color="dark"
+      outline
+      square
+    >
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      ><path
+        clip-rule="evenodd"
+        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+        fill-rule="evenodd"
+      /></svg>
+    </fwb-button>
+    <fwb-button
+      color="yellow"
+      outline
+      pill
+      square
+    >
+      <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+        clip-rule="evenodd"
+      /></svg>
+    </fwb-button>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue b/docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue
deleted file mode 100644
index 5c01da9a..00000000
--- a/docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <button-group>
-      <Button>hello world</Button>
-      <Button color="purple">hello world</Button>
-      <Button color="alternative">hello world</Button>
-      <Button color="red">hello world</Button>
-    </button-group>
-  </div>
-</template>
-<script setup>
-import { ButtonGroup, Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/buttonGroup/examples/ButtonGroupIconExample.vue b/docs/components/buttonGroup/examples/ButtonGroupIconExample.vue
deleted file mode 100644
index 959510ea..00000000
--- a/docs/components/buttonGroup/examples/ButtonGroupIconExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <button-group>
-      <Button outline>Button1</Button>
-      <Button outline>Button2</Button>
-      <Button outline>Button3</Button>
-      <Button outline>
-        hello world
-        <template #suffix>
-          <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </template>
-      </Button>
-    </button-group>
-  </div>
-</template>
-<script setup>
-import { ButtonGroup, Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/buttonGroup/examples/FwbButtonGroupExample.vue b/docs/components/buttonGroup/examples/FwbButtonGroupExample.vue
new file mode 100644
index 00000000..e557ee4e
--- /dev/null
+++ b/docs/components/buttonGroup/examples/FwbButtonGroupExample.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw">
+    <fwb-button-group>
+      <fwb-button>Button Default</fwb-button>
+      <fwb-button color="purple">
+        Button Purple
+      </fwb-button>
+      <fwb-button color="alternative">
+        Button Alternative
+      </fwb-button>
+      <fwb-button color="red">
+        Button Red
+      </fwb-button>
+    </fwb-button-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbButtonGroup } from '../../../../src/index'
+</script>
diff --git a/docs/components/buttonGroup/examples/FwbButtonGroupExampleIcon.vue b/docs/components/buttonGroup/examples/FwbButtonGroupExampleIcon.vue
new file mode 100644
index 00000000..8ba76b24
--- /dev/null
+++ b/docs/components/buttonGroup/examples/FwbButtonGroupExampleIcon.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw">
+    <fwb-button-group>
+      <fwb-button outline>
+        Button 1
+      </fwb-button>
+      <fwb-button outline>
+        Button 2
+      </fwb-button>
+      <fwb-button outline>
+        Button 3
+      </fwb-button>
+      <fwb-button outline>
+        Button 4
+        <template #suffix>
+          <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="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          /></svg>
+        </template>
+      </fwb-button>
+    </fwb-button-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbButtonGroup } from '../../../../src/index'
+</script>
diff --git a/docs/components/card.md b/docs/components/card.md
index 61cc94d6..8c7d6bde 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -1,7 +1,7 @@
 <script setup>
-import CardDefaultExample from './card/examples/CardDefaultExample.vue'
-import CardImageExample from './card/examples/CardImageExample.vue'
-import CardHorizontalExample from './card/examples/CardHorizontalExample.vue'
+import FwbCardExample from './card/examples/FwbCardExample.vue'
+import FwbCardExampleImage from './card/examples/FwbCardExampleImage.vue'
+import FwbCardExampleHorizontal from './card/examples/FwbCardExampleHorizontal.vue'
 </script>
 # Vue Card - Flowbite
 
@@ -17,54 +17,74 @@ Use these responsive card components to show data entries and information to you
 
 ## Prop - default
 
-<CardDefaultExample />
-
+<fwb-card-example />
 ```vue
-<script setup>
-import { TheCard } from 'flowbite-vue'
-</script>
 <template>
-  <the-card href="#">
-    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-    <p class="font-normal text-gray-700 dark:text-gray-400">
-      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-    </p>
-  </the-card>
+    <fwb-card href="#">
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
 </template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
 ```
 
 ## Prop - image
 
-<CardImageExample />
-
+<fwb-card-example-image />
 ```vue
-<script setup>
-import { TheCard } from 'flowbite-vue'
-</script>
 <template>
-  <the-card variant="image" img-src="https://flowbite.com/docs/images/blog/image-1.jpg" img-alt="Desk">
-    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-    <p class="font-normal text-gray-700 dark:text-gray-400">
-      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-    </p>
-  </the-card>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
+      variant="image"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
 </template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
 ```
 
 ## Prop - horizontal
 
-<CardHorizontalExample />
-
+<fwb-card-example-horizontal />
 ```vue
-<script setup>
-import { TheCard } from 'flowbite-vue'
-</script>
 <template>
-  <the-card href="#" variant="horizontal" img-src="https://flowbite.com/docs/images/blog/image-4.jpg" img-alt="Desk">
-    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-    <p class="font-normal text-gray-700 dark:text-gray-400">
-      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-    </p>
-  </the-card>
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
+      variant="horizontal"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
 </template>
+
+<script setup>
+import { FwbCard } from 'flowbite-vue'
+</script>
 ```
diff --git a/docs/components/card/examples/CardDefaultExample.vue b/docs/components/card/examples/CardDefaultExample.vue
deleted file mode 100644
index e28806c4..00000000
--- a/docs/components/card/examples/CardDefaultExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <the-card href="#">
-      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-      <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-    </the-card>
-  </div>
-</template>
-
-<script setup>
-import { TheCard } from '../../../../src/index'
-</script>
diff --git a/docs/components/card/examples/CardHorizontalExample.vue b/docs/components/card/examples/CardHorizontalExample.vue
deleted file mode 100644
index 7c8258a9..00000000
--- a/docs/components/card/examples/CardHorizontalExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <the-card href="#" variant="horizontal" img-src="https://flowbite.com/docs/images/blog/image-4.jpg" img-alt="Desk">
-      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-      <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-    </the-card>
-  </div>
-</template>
-<script setup>
-import { TheCard } from '../../../../src/index'
-</script>
diff --git a/docs/components/card/examples/CardImageExample.vue b/docs/components/card/examples/CardImageExample.vue
deleted file mode 100644
index fe1ab2fb..00000000
--- a/docs/components/card/examples/CardImageExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <the-card variant="image" img-src="https://flowbite.com/docs/images/blog/image-1.jpg" img-alt="Desk">
-      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-      <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-    </the-card>
-  </div>
-</template>
-<script setup>
-import { TheCard } from '../../../../src/index'
-</script>
diff --git a/docs/components/card/examples/FwbCardExample.vue b/docs/components/card/examples/FwbCardExample.vue
new file mode 100644
index 00000000..c3177258
--- /dev/null
+++ b/docs/components/card/examples/FwbCardExample.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <fwb-card href="#">
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+  </div>
+</template>
+
+<script setup>
+import { FwbCard } from '../../../../src/index'
+</script>
diff --git a/docs/components/card/examples/FwbCardExampleHorizontal.vue b/docs/components/card/examples/FwbCardExampleHorizontal.vue
new file mode 100644
index 00000000..3ffd03d8
--- /dev/null
+++ b/docs/components/card/examples/FwbCardExampleHorizontal.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
+      variant="horizontal"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+  </div>
+</template>
+
+<script setup>
+import { FwbCard } from '../../../../src/index'
+</script>
diff --git a/docs/components/card/examples/FwbCardExampleImage.vue b/docs/components/card/examples/FwbCardExampleImage.vue
new file mode 100644
index 00000000..73298a4a
--- /dev/null
+++ b/docs/components/card/examples/FwbCardExampleImage.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <fwb-card
+      img-alt="Desk"
+      img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
+      variant="image"
+    >
+      <div class="p-5">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Noteworthy technology acquisitions 2021
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+        </p>
+      </div>
+    </fwb-card>
+  </div>
+</template>
+
+<script setup>
+import { FwbCard } from '../../../../src/index'
+</script>
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 4b572903..45501063 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -1,170 +1,120 @@
 <script setup>
-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';
+import FwbCarouselExample from './carousel/examples/FwbCarouselExample.vue'
+import FwbCarouselExamplePictures from './carousel/examples/FwbCarouselExamplePictures.vue'
+import FwbCarouselExampleSlide from './carousel/examples/FwbCarouselExampleSlide.vue'
+import FwbCarouselExampleSlideInterval from './carousel/examples/FwbCarouselExampleSlideInterval.vue'
+import FwbCarouselExampleWithoutControls from './carousel/examples/FwbCarouselExampleWithoutControls.vue'
+import FwbCarouselExampleWithoutIndicators from './carousel/examples/FwbCarouselExampleWithoutIndicators.vue'
 </script>
 # Vue Carousel - Flowbite
 
 Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
 
-## Default slider
+## Basic Carousel
 
+<fwb-carousel-example />
 ```vue
-<script setup>
-import { Carousel } from 'flowbite-vue'
-</script>
 <template>
-  <Carousel></Carousel>
+  <fwb-carousel :pictures="pictures" />
 </template>
-```
 
-<CarouselDefaultExample />
-
-## Prop - controls
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
 
-```typescript
-const props = defineProps({
-    controls: {
-    type: Boolean,
-    default: true,
-    },
-})
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
 ```
 
-<CarouselNoControlsExample />
 
+## Carousel without controls
+
+<fwb-carousel-example-without-controls />
 ```vue
-<script setup>
-import { Carousel } from 'flowbite-vue'
-</script>
 <template>
-  <Carousel :controls="false"></Carousel>
+  <fwb-carousel no-controls :pictures="pictures" />
 </template>
-```
-## Prop - indicators
-
-```typescript
-const props = defineProps({
-    indicators: {
-        type: Boolean,
-        default: true,
-    },
-})
-```
-
-<CarouselNoIndicatorsExample />
 
-```vue
 <script setup>
-import { Carousel } from 'flowbite-vue'
+import { FwbCarousel } from 'flowbite-vue'
+
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
 </script>
+```
+## Carousel without indicators
+
+<fwb-carousel-example-without-indicators />
+```vue
 <template>
-  <Carousel :indicators="false"></Carousel>
+  <fwb-carousel no-indicators :pictures="pictures" />
 </template>
-```
 
-## Prop - slide
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
 
-```typescript
-const props = defineProps({
-    slide: {
-        type: Boolean,
-        default: false,
-    },
-})
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
 ```
 
-<CarouselSlideExample />
+## Carousel with slide animation
 
+<fwb-carousel-example-slide />
 ```vue
-<script setup>
-import { Carousel } from 'flowbite-vue'
-</script>
 <template>
-  <Carousel :slide="true"></Carousel>
+  <fwb-carousel :pictures="pictures" slide />
 </template>
-```
 
-## Prop - slide interval
+<script setup>
+import { FwbCarousel } from 'flowbite-vue'
 
-```typescript
-const props = defineProps({
-    slideInterval: {
-        type: Number,
-        default: 3000,
-    },
-})
+const pictures = [
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
+]
+</script>
 ```
 
-<CarouselSlideIntervalExample />
+## Carousel with slide and custom interval
+
+<fwb-carousel-example-slide-interval />
 
 ```vue
-<script setup>
-import { Carousel } from 'flowbite-vue'
-</script>
 <template>
-  <Carousel :slide="true" :slide-interval="1000"></Carousel>
+  <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
 </template>
-```
-
-## Prop - pictures
-
-```typescript
-const props = defineProps({
-    pictures: {
-        type: Array,
-        default() {
-            return [
-                {
-                    'src': 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
-                    'alt': 'Picture 1',
-                },
-                {
-                    'src': 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
-                    'alt': 'Picture 2',
-                },
-                {
-                    'src': 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
-                    'alt': 'Picture 3',
-                },
-            ]
-        },
-    },
-})
-```
 
-<CarouselPicturesExample />
-
-```vue
 <script setup>
-import { Carousel } from 'flowbite-vue'
+import { FwbCarousel } from 'flowbite-vue'
+
 const pictures = [
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg',
-    'alt': 'Picture 1',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg',
-    'alt': 'Picture 2',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg',
-    'alt': 'Picture 3',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg',
-    'alt': 'Picture 4',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg',
-    'alt': 'Picture 5',
-  },
+  {src: '/images/img-1.svg', alt: 'Image 1'},
+  {src: '/images/img-2.svg', alt: 'Image 2'},
+  {src: '/images/img-3.svg', alt: 'Image 3'},
 ]
 </script>
-<template>
-  <Carousel :pictures="pictures"></Carousel>
-</template>
 ```
+
+## Carousel API
+
+### Props
+
+| Name          | Type    | Values                         | Default |
+|---------------|---------|--------------------------------|---------|
+| animation     | Boolean | `true`, `false`                | `false` |
+| noControls    | Boolean | `true`, `false`                | `false` |
+| noIndicators  | Boolean | `true`, `false`                | `false` |
+| pictures      | Array   | `[{source: '', alt: ''}, ...]` | `[]`    |
+| slide         | Boolean | `true`, `false`                | `false` |
+| slideInterval | Number  |                                | `3000`  |
diff --git a/docs/components/carousel/examples/CarouselAutomaticSlideExample.vue b/docs/components/carousel/examples/CarouselAutomaticSlideExample.vue
deleted file mode 100644
index 408e9ad7..00000000
--- a/docs/components/carousel/examples/CarouselAutomaticSlideExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel :slide="true"></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/CarouselDefaultExample.vue b/docs/components/carousel/examples/CarouselDefaultExample.vue
deleted file mode 100644
index 8cab2e4b..00000000
--- a/docs/components/carousel/examples/CarouselDefaultExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/CarouselExample.vue b/docs/components/carousel/examples/CarouselExample.vue
deleted file mode 100644
index 8cab2e4b..00000000
--- a/docs/components/carousel/examples/CarouselExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/CarouselNoControlsExample.vue b/docs/components/carousel/examples/CarouselNoControlsExample.vue
deleted file mode 100644
index b3c747de..00000000
--- a/docs/components/carousel/examples/CarouselNoControlsExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel :controls="false"></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/CarouselNoIndicatorsExample.vue b/docs/components/carousel/examples/CarouselNoIndicatorsExample.vue
deleted file mode 100644
index b5b62f8b..00000000
--- a/docs/components/carousel/examples/CarouselNoIndicatorsExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel :indicators="false"></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/CarouselPicturesExample.vue b/docs/components/carousel/examples/CarouselPicturesExample.vue
deleted file mode 100644
index ffd3f99a..00000000
--- a/docs/components/carousel/examples/CarouselPicturesExample.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel :pictures="pictures"></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-const pictures = [
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg',
-    'alt': 'Picture 1',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg',
-    'alt': 'Picture 2',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg',
-    'alt': 'Picture 3',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg',
-    'alt': 'Picture 4',
-  },
-  {
-    'src': 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg',
-    'alt': 'Picture 5',
- },
-]
-</script>
diff --git a/docs/components/carousel/examples/CarouselSlideExample.vue b/docs/components/carousel/examples/CarouselSlideExample.vue
deleted file mode 100644
index 408e9ad7..00000000
--- a/docs/components/carousel/examples/CarouselSlideExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel :slide="true"></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/CarouselSlideIntervalExample.vue b/docs/components/carousel/examples/CarouselSlideIntervalExample.vue
deleted file mode 100644
index 79881903..00000000
--- a/docs/components/carousel/examples/CarouselSlideIntervalExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Carousel :slide="true" :slide-interval="1000"></Carousel>
-  </div>
-</template>
-<script setup>
-import { Carousel } from '../../../../src/index'
-</script>
diff --git a/docs/components/carousel/examples/FwbCarouselExample.vue b/docs/components/carousel/examples/FwbCarouselExample.vue
new file mode 100644
index 00000000..f97fbb2c
--- /dev/null
+++ b/docs/components/carousel/examples/FwbCarouselExample.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="vp-raw">
+    <fwb-carousel :pictures="pictures" />
+  </div>
+</template>
+
+<script setup>
+import { FwbCarousel } from '../../../../src/index'
+
+const pictures = [
+  {
+    alt: 'Picture 1',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+  },
+  {
+    alt: 'Picture 2',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+  },
+  {
+    alt: 'Picture 3',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+  },
+]
+</script>
diff --git a/docs/components/carousel/examples/FwbCarouselExamplePictures.vue b/docs/components/carousel/examples/FwbCarouselExamplePictures.vue
new file mode 100644
index 00000000..7a131c34
--- /dev/null
+++ b/docs/components/carousel/examples/FwbCarouselExamplePictures.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="vp-raw">
+    <fwb-carousel :pictures="pictures" />
+  </div>
+</template>
+
+<script setup>
+import { FwbCarousel } from '../../../../src/index'
+
+const pictures = [
+  {
+    alt: 'Picture 1',
+    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg',
+  },
+  {
+    alt: 'Picture 2',
+    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg',
+  },
+  {
+    alt: 'Picture 3',
+    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg',
+  },
+  {
+    alt: 'Picture 4',
+    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg',
+  },
+  {
+    alt: 'Picture 5',
+    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg',
+  },
+]
+</script>
diff --git a/docs/components/carousel/examples/FwbCarouselExampleSlide.vue b/docs/components/carousel/examples/FwbCarouselExampleSlide.vue
new file mode 100644
index 00000000..78c0d67a
--- /dev/null
+++ b/docs/components/carousel/examples/FwbCarouselExampleSlide.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw">
+    <fwb-carousel
+      :pictures="pictures"
+      slide
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbCarousel } from '../../../../src/index'
+
+const pictures = [
+  {
+    alt: 'Picture 1',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+  },
+  {
+    alt: 'Picture 2',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+  },
+  {
+    alt: 'Picture 3',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+  },
+]
+</script>
diff --git a/docs/components/carousel/examples/FwbCarouselExampleSlideInterval.vue b/docs/components/carousel/examples/FwbCarouselExampleSlideInterval.vue
new file mode 100644
index 00000000..6a1694fc
--- /dev/null
+++ b/docs/components/carousel/examples/FwbCarouselExampleSlideInterval.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw">
+    <fwb-carousel
+      :pictures="pictures"
+      :slide-interval="1000"
+      slide
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbCarousel } from '../../../../src/index'
+
+const pictures = [
+  {
+    alt: 'Picture 1',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+  },
+  {
+    alt: 'Picture 2',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+  },
+  {
+    alt: 'Picture 3',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+  },
+]
+</script>
diff --git a/docs/components/carousel/examples/FwbCarouselExampleWithoutControls.vue b/docs/components/carousel/examples/FwbCarouselExampleWithoutControls.vue
new file mode 100644
index 00000000..c6ba2c7f
--- /dev/null
+++ b/docs/components/carousel/examples/FwbCarouselExampleWithoutControls.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw">
+    <fwb-carousel
+      no-controls
+      :pictures="pictures"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbCarousel } from '../../../../src/index'
+
+const pictures = [
+  {
+    alt: 'Picture 1',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+  },
+  {
+    alt: 'Picture 2',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+  },
+  {
+    alt: 'Picture 3',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+  },
+]
+</script>
diff --git a/docs/components/carousel/examples/FwbCarouselExampleWithoutIndicators.vue b/docs/components/carousel/examples/FwbCarouselExampleWithoutIndicators.vue
new file mode 100644
index 00000000..9a776259
--- /dev/null
+++ b/docs/components/carousel/examples/FwbCarouselExampleWithoutIndicators.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw">
+    <fwb-carousel
+      no-indicators
+      :pictures="pictures"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbCarousel } from '../../../../src/index'
+
+const pictures = [
+  {
+    alt: 'Picture 1',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+  },
+  {
+    alt: 'Picture 2',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+  },
+  {
+    alt: 'Picture 3',
+    src: 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+  },
+]
+</script>
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 40a475f4..1e639c15 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -1,69 +1,75 @@
 <script setup>
-import CheckboxDefault from './checkbox/examples/CheckboxDefault.vue'
-import CheckboxDisabled from './checkbox/examples/CheckboxDisabled.vue'
-import CheckboxChecked from './checkbox/examples/CheckboxChecked.vue'
-import CheckboxLink from './checkbox/examples/CheckboxLink.vue'
+import FwbCheckboxExample from './checkbox/examples/FwbCheckboxExample.vue'
+import FwbCheckboxExampleChecked from './checkbox/examples/FwbCheckboxExampleChecked.vue'
+import FwbCheckboxExampleDisabled from './checkbox/examples/FwbCheckboxExampleDisabled.vue'
+import FwbCheckboxExampleLink from './checkbox/examples/FwbCheckboxExampleLink.vue'
 </script>
-# Vue Footer - Flowbite
+# Vue Checkbox - Flowbite
 
 ## Default checkbox
 
+<fwb-checkbox-example />
 ```vue
+<template>
+  <fwb-checkbox v-model="check" label="Default checkbox" />
+</template>
+
 <script setup>
-import { Checkbox } from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
 
-const ref1 = ref(false)
+const check = ref(false)
 </script>
-<template>
-  <Checkbox v-model="ref1" label="Default checkbox" />
-</template>
 ```
 
-<CheckboxDefault />
-
 ## Disabled checkbox
 
+<fwb-checkbox-example-disabled />
 ```vue
+<template>
+  <fwb-checkbox v-model="check" disabled label="Disabled checkbox" />
+</template>
+
 <script setup>
-import { Checkbox } from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
 
-const ref1 = ref(false)
+const check = ref(false)
 </script>
-<template>
-  <Checkbox v-model="ref1" label="Disabled checkbox" :disabled="true" />
-</template>
 ```
 
-<CheckboxDisabled />
-
 ## Checked checkbox
 
+<fwb-checkbox-example-checked />
 ```vue
+<template>
+  <fwb-checkbox v-model="check" label="Checked checkbox" />
+</template>
+
 <script setup>
-import { Checkbox } from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
 
-const ref1 = ref(true)
+const check = ref(true)
 </script>
-<template>
-  <Checkbox v-model="ref1" label="Checked checkbox" />
-</template>
 ```
 
-<CheckboxChecked />
-
 ## Link with checkbox
 
+<fwb-checkbox-example-link />
 ```vue
 <template>
-  <div>
-    <Checkbox>
-      <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">I agree with the terms and conditions</a>.
-    </Checkbox>
-  </div>
+  <fwb-checkbox v-model="check">
+    <fwb-a href="#">
+      I agree with the terms and conditions.
+    </fwb-a>
+  </fwb-checkbox>
 </template>
-```
 
-<CheckboxLink />
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbCheckbox } from 'flowbite-vue'
+
+const check = ref(false)
+</script>
+```
diff --git a/docs/components/checkbox/examples/CheckboxChecked.vue b/docs/components/checkbox/examples/CheckboxChecked.vue
index ea28e5b2..e69de29b 100644
--- a/docs/components/checkbox/examples/CheckboxChecked.vue
+++ b/docs/components/checkbox/examples/CheckboxChecked.vue
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Checkbox v-model="ref3" label="Checked checkbox" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
-
-const ref3 = ref(true)
-</script>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/CheckboxDefault.vue b/docs/components/checkbox/examples/CheckboxDefault.vue
index cf15cd9c..e69de29b 100644
--- a/docs/components/checkbox/examples/CheckboxDefault.vue
+++ b/docs/components/checkbox/examples/CheckboxDefault.vue
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Checkbox v-model="ref1" label="Default checkbox" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
-
-const ref1 = ref(false)
-</script>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/CheckboxDisabled.vue b/docs/components/checkbox/examples/CheckboxDisabled.vue
deleted file mode 100644
index 906e2854..00000000
--- a/docs/components/checkbox/examples/CheckboxDisabled.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Checkbox v-model="ref2" label="Disabled checkbox" :disabled="true" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
-
-const ref2 = ref(false)
-</script>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/CheckboxLink.vue b/docs/components/checkbox/examples/CheckboxLink.vue
deleted file mode 100644
index 065f4050..00000000
--- a/docs/components/checkbox/examples/CheckboxLink.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <Checkbox v-model="ref1">
-      <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">I agree with the terms and conditions.</a>
-    </Checkbox>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
-
-const ref1 = ref(false)
-</script>
\ No newline at end of file
diff --git a/docs/components/checkbox/examples/FwbCheckboxExample.vue b/docs/components/checkbox/examples/FwbCheckboxExample.vue
new file mode 100644
index 00000000..e8c6820c
--- /dev/null
+++ b/docs/components/checkbox/examples/FwbCheckboxExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-checkbox
+      v-model="check"
+      label="Default checkbox"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from '../../../../src/index'
+
+const check = ref(false)
+</script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleChecked.vue b/docs/components/checkbox/examples/FwbCheckboxExampleChecked.vue
new file mode 100644
index 00000000..da1a8e0d
--- /dev/null
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleChecked.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-checkbox
+      v-model="check"
+      label="Checked checkbox"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from '../../../../src/index'
+
+const check = ref(true)
+</script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue b/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
new file mode 100644
index 00000000..24f04b44
--- /dev/null
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw">
+    <fwb-checkbox
+      v-model="check"
+      disabled
+      label="Disabled checkbox"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from '../../../../src/index'
+
+const check = ref(false)
+</script>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue b/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
new file mode 100644
index 00000000..bab67e92
--- /dev/null
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
@@ -0,0 +1,14 @@
+<template>
+  <fwb-checkbox v-model="check">
+    <fwb-a href="#">
+      I agree with the terms and conditions.
+    </fwb-a>
+  </fwb-checkbox>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbCheckbox } from '../../../../src/index'
+
+const check = ref(false)
+</script>
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 4d545240..a401e8e4 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -1,7 +1,7 @@
 <script setup>
-import DropdownPlacementExample from './dropdown/examples/DropdownPlacementExample.vue';
-import DropdownListGroupExample from './dropdown/examples/DropdownListGroupExample.vue';
-import DropdownTriggerExample from './dropdown/examples/DropdownTriggerExample.vue';
+import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue'
+import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
+import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
 </script>
 
 # Vue Dropdown - Flowbite
@@ -16,122 +16,85 @@ Original reference: [https://flowbite.com/docs/components/dropdowns/](https://fl
 
 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.
 
+## Dropdown - placement
 
-## Props - placement
-
+<fwb-dropdown-example-placement />
 ```vue
-<script setup>
-import { Dropdown } from 'flowbite-vue'
-</script>
 <template>
-  <dropdown placement="bottom" text="Bottom">
-    Any content here
-  </dropdown>
-  <dropdown placement="top">
-    <template #trigger="{ toggle }">
-      <Button @click="toggle">
-        Top
-        <template #suffix>
-          <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
-        </template>
-      </Button>
-    </template>
-    <div class="p-2">
-      Padding content
-    </div>
-  </dropdown>
-  <dropdown placement="right" text="Right">
-    <Spinner size="6" class="m-4" />
-  </dropdown>
-  <dropdown placement="left" text="Left">
-    hello world
-  </dropdown>
+  <fwb-dropdown text="Bottom">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="top" text="Top">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="right" text="Right">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
+  <fwb-dropdown placement="left" text="Left">
+    <p class="p-2">Dropdown content here</p>
+  </fwb-dropdown>
 </template>
-```
-
-<DropdownPlacementExample />
 
+<script setup>
+import { FwbDropdown } from 'flowbite-vue'
+</script>
+```
 
-## List Group
+## Dropdown with List Group
 
+<fwb-dropdown-example-list-group />
 ```vue
-<script setup>
-import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
-</script>
 <template>
-  <dropdown text="Bottom">
+  <fwb-dropdown text="Menu">
     <list-group>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
-        </template>
         Profile
       </list-group-item>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
-        </template>
         Settings
       </list-group-item>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
-        </template>
         Messages
       </list-group-item>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
-        </template>
         Download
       </list-group-item>
     </list-group>
-  </dropdown>
+  </fwb-dropdown>
 </template>
-```
 
-<DropdownListGroupExample />
+<script setup>
+import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
+```
 
-## Slot - trigger
+## Dropdown - trigger
 
+<fwb-dropdown-example-trigger />
 ```vue
-<script setup>
-import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
-</script>
 <template>
-  <dropdown text="Bottom">
+  <fwb-dropdown text="Bottom">
     <template #trigger>
-      <span>Click trigger</span>
+      <span>Custom Trigger Element</span>
     </template>
     <list-group>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
-        </template>
         Profile
       </list-group-item>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
-        </template>
         Settings
       </list-group-item>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
-        </template>
         Messages
       </list-group-item>
       <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
-        </template>
         Download
       </list-group-item>
     </list-group>
-  </dropdown>
+  </fwb-dropdown>
 </template>
-```
-
 
-<DropdownTriggerExample />
+<script setup>
+import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/dropdown/examples/DropdownListGroupExample.vue b/docs/components/dropdown/examples/DropdownListGroupExample.vue
deleted file mode 100644
index 074287bf..00000000
--- a/docs/components/dropdown/examples/DropdownListGroupExample.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <dropdown text="Bottom">
-      <list-group>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-          </template>
-          Profile
-        </list-group-item>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"
-              ></path>
-            </svg>
-          </template>
-          Settings
-        </list-group-item>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path>
-            </svg>
-          </template>
-          Messages
-        </list-group-item>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-          </template>
-          Download
-        </list-group-item>
-      </list-group>
-    </dropdown>
-  </div>
-</template>
-<script setup>
-import { Dropdown, ListGroup, ListGroupItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/dropdown/examples/DropdownPlacementExample.vue b/docs/components/dropdown/examples/DropdownPlacementExample.vue
deleted file mode 100644
index afe70f77..00000000
--- a/docs/components/dropdown/examples/DropdownPlacementExample.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <dropdown placement="bottom" text="Bottom">
-      Any content here
-    </dropdown>
-    <dropdown placement="top">
-      <template #trigger="{ toggle }">
-        <Button @click="toggle">
-          Top
-          <template #suffix>
-            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
-          </template>
-        </Button>
-      </template>
-      content
-    </dropdown>
-    <dropdown placement="right" text="Right">
-      <Spinner size="6" class="m-4" />
-    </dropdown>
-    <dropdown placement="left" text="Left">
-      hello world
-    </dropdown>
-  </div>
-</template>
-<script setup>
-import { Dropdown, Spinner, Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/dropdown/examples/DropdownTriggerExample.vue b/docs/components/dropdown/examples/DropdownTriggerExample.vue
deleted file mode 100644
index f6f3ecbd..00000000
--- a/docs/components/dropdown/examples/DropdownTriggerExample.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <dropdown text="Bottom">
-      <template #trigger>
-        <span>Click trigger</span>
-      </template>
-      <list-group>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-          </template>
-          Profile
-        </list-group-item>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"
-              ></path>
-            </svg>
-          </template>
-          Settings
-        </list-group-item>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path>
-            </svg>
-          </template>
-          Messages
-        </list-group-item>
-        <list-group-item>
-          <template #prefix>
-            <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                fill-rule="evenodd"
-                d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-          </template>
-          Download
-        </list-group-item>
-      </list-group>
-    </dropdown>
-  </div>
-</template>
-<script setup>
-import { Dropdown, ListGroup, ListGroupItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue b/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue
new file mode 100644
index 00000000..2c87ff45
--- /dev/null
+++ b/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="vp-raw">
+    <fwb-dropdown text="Menu">
+      <fwb-list-group>
+        <fwb-list-group-item>
+          Profile
+        </fwb-list-group-item>
+        <fwb-list-group-item>
+          Settings
+        </fwb-list-group-item>
+        <fwb-list-group-item>
+          Messages
+        </fwb-list-group-item>
+        <fwb-list-group-item>
+          Download
+        </fwb-list-group-item>
+      </fwb-list-group>
+    </fwb-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/dropdown/examples/FwbDropdownExamplePlacement.vue b/docs/components/dropdown/examples/FwbDropdownExamplePlacement.vue
new file mode 100644
index 00000000..223e12a2
--- /dev/null
+++ b/docs/components/dropdown/examples/FwbDropdownExamplePlacement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="vp-raw flex gap-2 flex-wrap">
+    <fwb-dropdown
+      placement="top"
+      text="Top"
+    >
+      <p class="p-2">
+        Dropdown content here
+      </p>
+    </fwb-dropdown>
+    <fwb-dropdown
+      placement="right"
+      text="Right"
+    >
+      <p class="p-2">
+        Dropdown content here
+      </p>
+    </fwb-dropdown>
+    <fwb-dropdown text="Bottom">
+      <p class="p-2">
+        Dropdown content here
+      </p>
+    </fwb-dropdown>
+    <fwb-dropdown
+      placement="left"
+      text="Left"
+    >
+      <p class="p-2">
+        Dropdown content here
+      </p>
+    </fwb-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { FwbDropdown } from '../../../../src/index'
+</script>
diff --git a/docs/components/dropdown/examples/FwbDropdownExampleTrigger.vue b/docs/components/dropdown/examples/FwbDropdownExampleTrigger.vue
new file mode 100644
index 00000000..6238a310
--- /dev/null
+++ b/docs/components/dropdown/examples/FwbDropdownExampleTrigger.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw">
+    <fwb-dropdown>
+      <template #trigger>
+        <span>Custom Trigger Element</span>
+      </template>
+      <fwb-list-group>
+        <fwb-list-group-item>
+          Profile
+        </fwb-list-group-item>
+        <fwb-list-group-item>
+          Settings
+        </fwb-list-group-item>
+        <fwb-list-group-item>
+          Messages
+        </fwb-list-group-item>
+        <fwb-list-group-item>
+          Download
+        </fwb-list-group-item>
+      </fwb-list-group>
+    </fwb-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/fileInput.md b/docs/components/fileInput.md
index 92bbfcbb..5d35b10e 100644
--- a/docs/components/fileInput.md
+++ b/docs/components/fileInput.md
@@ -1,9 +1,9 @@
 <script setup>
-import FileInpDefault from './fileInput/examples/FileInpDefault.vue'
-import FileInpHelper from './fileInput/examples/FileInpHelper.vue'
-import FileInpSize from './fileInput/examples/FileInpSize.vue'
-import FileInpDropZone from './fileInput/examples/FileInpDropZone.vue'
-import MultipleFile from './fileInput/examples/MultipleFile.vue'
+import FwbFileInputExample from './fileInput/examples/FwbFileInputExample.vue'
+import FwbFileInputExampleHelper from './fileInput/examples/FwbFileInputExampleHelper.vue'
+import FwbFileInputExampleSize from './fileInput/examples/FwbFileInputExampleSize.vue'
+import FwbFileInputExampleDropZone from './fileInput/examples/FwbFileInputExampleDropZone.vue'
+import FwbFileInputExampleMultiple from './fileInput/examples/FwbFileInputExampleMultiple.vue'
 </script>
 
 # Vue FileInput - Flowbite
@@ -16,88 +16,92 @@ Original reference: [https://flowbite.com/docs/forms/file-input/](https://flowbi
 
 ## File upload example
 
+<fwb-file-input-example />
 ```vue
 <template>
-  <FileInput v-model="file" label="Upload file" />
+  <fwb-file-input v-model="file" label="Upload file" />
 </template>
 
 <script setup>
-import FileInput from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
 
-const file = ref()
+const file = ref(null)
 </script>
 ```
 
-<FileInpDefault />
-
 ## Multiple File upload
 
+<fwb-file-input-example-multiple />
 ```vue
 <template>
-  <FileInput multiple v-model="file" label="Multiple upload" />
+  <fwb-file-input v-model="files" label="Upload file" multiple />
+  <div v-if="files.length !== 0" class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md">
+    <div v-for="file in files" :key="file">
+      {{ file.name }}
+    </div>
+  </div>
 </template>
 
 <script setup>
-import FileInput from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
 
-const file = ref([])
+const files = ref([])
 </script>
 ```
 
-<MultipleFile />
-
-
 ## Helper text
 
+<fwb-file-input-example-helper />
 ```vue
 <template>
-  <FileInput label="Upload file">
-    <p class='!mt-1 text-sm text-gray-500 dark:text-gray-300'>SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
-  </FileInput>
+  <fwb-file-input v-model="file" label="Upload file">
+    <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">
+      SVG, PNG, JPG or GIF (MAX. 800x400px).
+    </p>
+  </fwb-file-input>
 </template>
 
 <script setup>
-import FileInput from 'flowbite-vue'
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
 </script>
 ```
 
-<FileInpHelper />
-
 ## Sizes
 
+<fwb-file-input-example-size />
 ```vue
 <template>
-  <div>
-    <FileInput size="xs" label="Small size" />
-    <FileInput size="sm" label="Default size" />
-    <FileInput size="lg" label="Large size" />
-  </div>
+  <fwb-file-input v-model="file" label="Small size" size="xs" />
+  <fwb-file-input v-model="file" label="Default size" size="sm" />
+  <fwb-file-input v-model="file" label="Large size" size="lg" />
 </template>
 
 <script setup>
-import FileInput from 'flowbite-vue'
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
 </script>
 ```
 
-<FileInpSize />
-
 ## Dropone
 
 
+<fwb-file-input-example-drop-zone />
 ```vue
 <template>
-  <FileInput :dropzone="true">
-    <p class="!mt-1 text-xs text-gray-500 dark:text-gray-400">
-      SVG, PNG, JPG or GIF (MAX. 800x400px)
-    </p>
-  </FileInput>
+  <fwb-file-input v-model="file" dropzone />
 </template>
 
 <script setup>
-import FileInput from 'flowbite-vue'
+import { ref } from 'vue'
+import { FwbFileInput } from 'flowbite-vue'
+
+const file = ref(null)
 </script>
 ```
-
-<FileInpDropZone />
diff --git a/docs/components/fileInput/examples/FileInpDefault.vue b/docs/components/fileInput/examples/FileInpDefault.vue
deleted file mode 100644
index 38d661e0..00000000
--- a/docs/components/fileInput/examples/FileInpDefault.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <FileInput v-model="file" label="Upload file" />
-  </div>
-</template>
-
-<script setup>
-import FileInput from '../../../../src/components/FileInput/FileInput.vue'
-import { ref } from 'vue'
-
-const file = ref(null)
-</script>
diff --git a/docs/components/fileInput/examples/FileInpDropZone.vue b/docs/components/fileInput/examples/FileInpDropZone.vue
deleted file mode 100644
index 4b1c8d67..00000000
--- a/docs/components/fileInput/examples/FileInpDropZone.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <FileInput v-model="file" :dropzone="true">
-    <p class="!mt-1 text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
-  </FileInput>
-</template>
-
-<script setup>
-import FileInput from '../../../../src/components/FileInput/FileInput.vue'
-import { ref } from 'vue'
-
-const file = ref(null)
-</script>
diff --git a/docs/components/fileInput/examples/FileInpHelper.vue b/docs/components/fileInput/examples/FileInpHelper.vue
deleted file mode 100644
index 05ce29f2..00000000
--- a/docs/components/fileInput/examples/FileInpHelper.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <FileInput v-model="file" label="Upload file">
-      <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
-    </FileInput>
-  </div>
-</template>
-
-<script setup>
-import FileInput from '../../../../src/components/FileInput/FileInput.vue'
-import { ref } from 'vue'
-
-const file = ref(null)
-</script>
diff --git a/docs/components/fileInput/examples/FileInpSize.vue b/docs/components/fileInput/examples/FileInpSize.vue
deleted file mode 100644
index b0fe5c1a..00000000
--- a/docs/components/fileInput/examples/FileInpSize.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="flex flex-col gap-5">
-    <FileInput size="xs" v-model="file" label="Small size" />
-    <FileInput size="sm" v-model="file" label="Default size" />
-    <FileInput size="lg" v-model="file" label="Large size" />
-  </div>
-</template>
-
-<script setup>
-import FileInput from '../../../../src/components/FileInput/FileInput.vue'
-import { ref } from 'vue'
-const file = ref(null)
-</script>
diff --git a/docs/components/fileInput/examples/FwbFileInputExample.vue b/docs/components/fileInput/examples/FwbFileInputExample.vue
new file mode 100644
index 00000000..16694185
--- /dev/null
+++ b/docs/components/fileInput/examples/FwbFileInputExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-file-input
+      v-model="file"
+      label="Upload file"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from '../../../../src/index'
+
+const file = ref(null)
+</script>
diff --git a/docs/components/fileInput/examples/FwbFileInputExampleDropZone.vue b/docs/components/fileInput/examples/FwbFileInputExampleDropZone.vue
new file mode 100644
index 00000000..8e8b99aa
--- /dev/null
+++ b/docs/components/fileInput/examples/FwbFileInputExampleDropZone.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-file-input
+      v-model="file"
+      dropzone
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from '../../../../src/index'
+
+const file = ref(null)
+</script>
diff --git a/docs/components/fileInput/examples/FwbFileInputExampleHelper.vue b/docs/components/fileInput/examples/FwbFileInputExampleHelper.vue
new file mode 100644
index 00000000..0f091cd5
--- /dev/null
+++ b/docs/components/fileInput/examples/FwbFileInputExampleHelper.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw">
+    <fwb-file-input
+      v-model="file"
+      label="Upload file"
+    >
+      <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">
+        SVG, PNG, JPG or GIF (MAX. 800x400px).
+      </p>
+    </fwb-file-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from '../../../../src/index'
+
+const file = ref(null)
+</script>
diff --git a/docs/components/fileInput/examples/FwbFileInputExampleMultiple.vue b/docs/components/fileInput/examples/FwbFileInputExampleMultiple.vue
new file mode 100644
index 00000000..85010d90
--- /dev/null
+++ b/docs/components/fileInput/examples/FwbFileInputExampleMultiple.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw">
+    <fwb-file-input
+      v-model="files"
+      label="Upload file"
+      multiple
+    />
+    <div
+      v-if="files.length !== 0"
+      class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md"
+    >
+      <div
+        v-for="file in files"
+        :key="file"
+      >
+        {{ file.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from '../../../../src/index'
+
+const files = ref([])
+</script>
diff --git a/docs/components/fileInput/examples/FwbFileInputExampleSize.vue b/docs/components/fileInput/examples/FwbFileInputExampleSize.vue
new file mode 100644
index 00000000..e688eace
--- /dev/null
+++ b/docs/components/fileInput/examples/FwbFileInputExampleSize.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-file-input
+      v-model="file"
+      size="xs"
+      label="Small size"
+    />
+    <fwb-file-input
+      v-model="file"
+      size="sm"
+      label="Default size"
+    />
+    <fwb-file-input
+      v-model="file"
+      size="lg"
+      label="Large size"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbFileInput } from '../../../../src/index'
+
+const file = ref(null)
+</script>
diff --git a/docs/components/fileInput/examples/MultipleFile.vue b/docs/components/fileInput/examples/MultipleFile.vue
deleted file mode 100644
index d50ac3a9..00000000
--- a/docs/components/fileInput/examples/MultipleFile.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <FileInput multiple v-model="files" label="Upload file" />
-    <div class="mt-4 -mb-7 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md" v-if="files.length !== 0">
-      <div v-for="file in files" :key="file">
-        {{ file.name }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import FileInput from '../../../../src/components/FileInput/FileInput.vue'
-import { ref } from 'vue'
-
-const files = ref([])
-</script>
diff --git a/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleButton.vue b/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleButton.vue
new file mode 100644
index 00000000..e9339ce9
--- /dev/null
+++ b/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleButton.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="vp-raw">
+    <div class="flex align-center gap-2 flex-wrap">
+      <flowbite-themable
+        v-for="themeName in themes"
+        :key="themeName"
+        :theme="themeName"
+      >
+        <fwb-button>
+          {{ themeName }}
+        </fwb-button>
+      </flowbite-themable>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { FlowbiteThemable, FwbButton } from '../../../../src/index'
+import type { FlowbiteTheme } from '../../../../src/components/utils/FlowbiteThemable/types'
+
+const themes: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
+
+defineProps({
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: 'blue',
+  },
+})
+</script>
diff --git a/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleDropdown.vue b/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleDropdown.vue
new file mode 100644
index 00000000..6e816042
--- /dev/null
+++ b/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleDropdown.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="vp-raw">
+    <span class="">Select theme:</span>
+    <div class="grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2">
+      <fwb-radio
+        v-model="activeTheme"
+        value="blue"
+      >
+        Blue
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="green"
+      >
+        Green
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="pink"
+      >
+        Pink
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="purple"
+      >
+        Purple
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="red"
+      >
+        Red
+      </fwb-radio>
+    </div>
+    <div class="inline-flex align-center gap-2 flex-wrap">
+      <flowbite-themable :theme="activeTheme">
+        <fwb-dropdown text="Dropdown">
+          Dropdown content...
+        </fwb-dropdown>
+      </flowbite-themable>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FlowbiteThemable, FwbDropdown, FwbRadio } from '../../../../src/index'
+import type { FlowbiteTheme } from '../../../../src/components/utils/FlowbiteThemable/types'
+
+const activeTheme = ref<FlowbiteTheme>('blue')
+</script>
diff --git a/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleTabs.vue b/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleTabs.vue
new file mode 100644
index 00000000..b0b1df9f
--- /dev/null
+++ b/docs/components/flowbiteThemable/examples/FlowbiteThemableExampleTabs.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="vp-raw">
+    <span class="">Select theme:</span>
+    <div class="grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2">
+      <fwb-radio
+        v-model="activeTheme"
+        value="blue"
+      >
+        Blue
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="green"
+      >
+        Green
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="pink"
+      >
+        Pink
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="purple"
+      >
+        Purple
+      </fwb-radio>
+      <fwb-radio
+        v-model="activeTheme"
+        value="red"
+      >
+        Red
+      </fwb-radio>
+    </div>
+    <flowbite-themable :theme="activeTheme">
+      <fwb-tabs
+        v-model="activeTab"
+        class="p-5"
+        :variant="tabsVariant"
+      >
+        <fwb-tab
+          name="first"
+          title="First"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
+        </fwb-tab>
+        <fwb-tab
+          name="second"
+          title="Second"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
+        </fwb-tab>
+        <fwb-tab
+          name="third"
+          title="Third"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
+        </fwb-tab>
+        <fwb-tab
+          name="fourth"
+          title="Fourth"
+          disabled
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
+        </fwb-tab>
+      </fwb-tabs>
+    </flowbite-themable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { ref } from 'vue'
+import { FlowbiteThemable, FwbRadio, FwbTab, FwbTabs } from '../../../../src/index'
+import type { TabsVariant } from '../../../../src/components/FwbTabs/types'
+import type { FlowbiteTheme } from '../../../../src/components/utils/FlowbiteThemable/types'
+
+const activeTab = ref('first')
+
+const activeTheme = ref<FlowbiteTheme>('blue')
+
+defineProps({
+  tabsVariant: {
+    type: String as PropType<TabsVariant>,
+    default: 'default',
+  },
+})
+</script>
diff --git a/docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue b/docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
deleted file mode 100644
index c06ec519..00000000
--- a/docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-      <flowbite-themable :key="theme" v-for="theme in themes" :theme="theme">
-        <Button>
-          {{ theme }}
-        </Button>
-      </flowbite-themable>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import { FlowbiteThemable, Button } from '../../../../../src/index'
-import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
-
-const themes: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
-
-defineProps({
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    default: 'blue',
-  },
-})
-</script>
diff --git a/docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue b/docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue
deleted file mode 100644
index b7691d11..00000000
--- a/docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-      <flowbite-themable :theme="theme">
-        <dropdown text="Text 1">
-          Content 1
-        </dropdown>
-        <dropdown text="Text 2">
-          Content 2
-        </dropdown>
-        <dropdown text="Text 3">
-          Content 3
-        </dropdown>
-      </flowbite-themable>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import { FlowbiteThemable, Dropdown } from '../../../../../src/index'
-import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
-
-defineProps({
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    default: 'blue',
-  },
-})
-</script>
diff --git a/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue
deleted file mode 100644
index bad376eb..00000000
--- a/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <flowbite-themable :theme="theme">
-      <tabs v-model="activeTab" class="p-5">
-        <tab name="first" title="First">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
-        </tab>
-        <tab name="second" title="Second">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
-        </tab>
-        <tab name="third" title="Third">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
-        </tab>
-        <tab name="fourth" title="Fourth" :disabled="true">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
-        </tab>
-      </tabs>
-    </flowbite-themable>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import { ref } from 'vue'
-import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
-import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
-const activeTab = ref('first')
-
-defineProps({
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    default: 'blue',
-  },
-})
-</script>
diff --git a/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue
deleted file mode 100644
index 78b99c7a..00000000
--- a/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <flowbite-themable :theme="theme">
-      <tabs variant="pills" v-model="activeTab" class="p-5">
-        <tab name="first" title="First">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
-        </tab>
-        <tab name="second" title="Second">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
-        </tab>
-        <tab name="third" title="Third">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
-        </tab>
-        <tab name="fourth" title="Fourth" :disabled="true">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
-        </tab>
-      </tabs>
-    </flowbite-themable>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import { ref } from 'vue'
-import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
-import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
-const activeTab = ref('first')
-
-defineProps({
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    default: 'blue',
-  },
-})
-</script>
diff --git a/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue
deleted file mode 100644
index 4e5336f3..00000000
--- a/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <flowbite-themable :theme="theme">
-      <tabs variant="underline" v-model="activeTab" class="p-5">
-        <tab name="first" title="First">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
-        </tab>
-        <tab name="second" title="Second">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
-        </tab>
-        <tab name="third" title="Third">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
-        </tab>
-        <tab name="fourth" title="Fourth" :disabled="true">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
-        </tab>
-      </tabs>
-    </flowbite-themable>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import { ref } from 'vue'
-import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
-import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
-const activeTab = ref('first')
-
-defineProps({
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    default: 'blue',
-  },
-})
-</script>
diff --git a/docs/components/flowbiteThemable/flowbiteThemable.md b/docs/components/flowbiteThemable/flowbiteThemable.md
index 3cb919e4..ba9e2df2 100644
--- a/docs/components/flowbiteThemable/flowbiteThemable.md
+++ b/docs/components/flowbiteThemable/flowbiteThemable.md
@@ -1,9 +1,7 @@
 <script setup>
-import FlowbiteThemableTabsPillsExample from './examples/tabs/FlowbiteThemableTabsPillsExample.vue';
-import FlowbiteThemableTabsUnderlineExample from './examples/tabs/FlowbiteThemableTabsUnderlineExample.vue';
-import FlowbiteThemableTabsDefaultExample from './examples/tabs/FlowbiteThemableTabsDefaultExample.vue';
-import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemableDropdownExample.vue';
-import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
+import FlowbiteThemableExampleTabs from './examples/FlowbiteThemableExampleTabs.vue'
+import FlowbiteThemableExampleButton from './examples/FlowbiteThemableExampleButton.vue'
+import FlowbiteThemableExampleDropdown from './examples/FlowbiteThemableExampleDropdown.vue'
 </script>
 
 # Vue Themable Configuration - Flowbite
@@ -16,97 +14,65 @@ WIP, Do not use it in production
 
 ## Tabs
 
+<flowbite-themable-example-tabs />
 ```vue
-<script setup>
-import { Tabs, Tab, FlowbiteThemable } from 'flowbite-vue'
-const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
-const variant = 'default' // see tabs docs
-</script>
 <template>
   <flowbite-themable :theme="theme">
-      <tabs :variant="variant" class="p-5">
+      <fwb-tabs :variant="variant">
         ...
-      </tabs>
+      </fwb-tabs>
   </flowbite-themable>
 </template>
+
+<script setup>
+import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+const variant = 'default' // see tabs docs
+</script>
 ```
 
-### **variant: pills**
+### variant: pills
 ---
-<FlowbiteThemableTabsPillsExample theme="blue" />
-
-<FlowbiteThemableTabsPillsExample theme="green" />
-
-<FlowbiteThemableTabsPillsExample theme="pink" />
-
-<FlowbiteThemableTabsPillsExample theme="purple" />
-
-<FlowbiteThemableTabsPillsExample theme="red" />
-
-### **variant: underline**
+<flowbite-themable-example-tabs tabs-variant="pills" />
 ---
-<FlowbiteThemableTabsUnderlineExample theme="blue" />
-
-<FlowbiteThemableTabsUnderlineExample theme="green" />
-
-<FlowbiteThemableTabsUnderlineExample theme="pink" />
-
-<FlowbiteThemableTabsUnderlineExample theme="purple" />
 
-<FlowbiteThemableTabsUnderlineExample theme="red" />
-
-### **variant: default**
+### variant: underline
+---
+<flowbite-themable-example-tabs tabs-variant="underline" />
 ---
-<FlowbiteThemableTabsDefaultExample theme="blue" />
-
-<FlowbiteThemableTabsDefaultExample theme="green" />
-
-<FlowbiteThemableTabsDefaultExample theme="pink" />
-
-<FlowbiteThemableTabsDefaultExample theme="purple" />
-
-<FlowbiteThemableTabsDefaultExample theme="red" />
 
 ## Dropdown
 
+<flowbite-themable-example-dropdown />
 ```vue
-<script setup>
-import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
-const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
-</script>
 <template>
   <flowbite-themable :theme="theme">
-      <dropdown>
+      <fwb-dropdown>
         ...
-      </dropdown>
+      </fwb-dropdown>
   </flowbite-themable>
 </template>
-```
-
-<FlowbiteThemableDropdownExample theme="blue" class="mb-2" />
 
-<FlowbiteThemableDropdownExample theme="green" class="mb-2" />
-
-<FlowbiteThemableDropdownExample theme="pink" class="mb-2" />
-
-<FlowbiteThemableDropdownExample theme="purple" class="mb-2" />
-
-<FlowbiteThemableDropdownExample theme="red" />
+<script setup>
+import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
+```
 
 ## Button
 
+<flowbite-themable-example-button />
 ```vue
-<script setup>
-import { Button, FlowbiteThemable } from 'flowbite-vue'
-const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
-</script>
 <template>
   <flowbite-themable :theme="theme">
-      <Button>
+      <fwb-button>
         ...
-      </Button>
+      </fwb-button>
   </flowbite-themable>
 </template>
-```
 
-<FlowbiteThemableButtonExample />
+<script setup>
+import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
+const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
+</script>
+```
diff --git a/docs/components/footer.md b/docs/components/footer.md
index bd4486f1..845c8a99 100644
--- a/docs/components/footer.md
+++ b/docs/components/footer.md
@@ -1,9 +1,9 @@
 <script setup>
-import FooterExample from './footer/examples/FooterExample.vue'
-import FooterWithLogoExample from './footer/examples/FooterWithLogoExample.vue'
-import FooterSocialMediaIconsExample from './footer/examples/FooterSocialMediaIconsExample.vue'
-import FooterSitemapLinksExample from './footer/examples/FooterSitemapLinksExample.vue'
-import StickyFooterExample from './footer/examples/StickyFooterExample.vue'
+import FwbFooterExample from './footer/examples/FwbFooterExample.vue'
+import FwbFooterExampleSitemapLinks from './footer/examples/FwbFooterExampleSitemapLinks.vue'
+import FwbFooterExampleSocialMediaIcons from './footer/examples/FwbFooterExampleSocialMediaIcons.vue'
+import FwbFooterExampleSticky from './footer/examples/FwbFooterExampleSticky.vue'
+import FwbFooterExampleWithLogo from './footer/examples/FwbFooterExampleWithLogo.vue'
 </script>
 # Vue Footer - Flowbite
 #### Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo
@@ -13,267 +13,338 @@ The footer is one of the most underestimated sections of a website being located
 ## Default footer
 Use this footer component to show a copyright notice and some helpful website links.
 
-<FooterExample />
-
+<fwb-footer-example />
 ```vue
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink  } from 'flowbite-vue'
-</script>
-
 <template>
-  <Footer>
-    <FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
-    <FooterLinkGroup>
-      <FooterLink href="#"> About </FooterLink>
-      <FooterLink href="#"> Privacy Policy </FooterLink>
-      <FooterLink href="#"> Licensing </FooterLink>
-      <FooterLink href="#"> Contact </FooterLink>
-    </FooterLinkGroup>
-  </Footer>
+  <fwb-footer>
+    <fwb-footer-copyright
+      by="Flowbite™"
+      href="https://flowbite.com/"
+      copyright-message="All Rights Reserved."
+    />
+    <fwb-footer-link-group>
+      <fwb-footer-link href="#">
+        About
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Privacy Policy
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Licensing
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Contact
+      </fwb-footer-link>
+    </fwb-footer-link-group>
+  </fwb-footer>
 </template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
 ```
 
 ## Footer with logo
 Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.
-<FooterWithLogoExample />
 
+<fwb-footer-example-with-logo />
 ```vue
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand } from 'flowbite-vue'
-</script>
-
 <template>
-  <Footer footer-type="logo">
+  <fwb-footer footer-type="logo">
     <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
       <div class="sm:flex sm:items-center sm:justify-between">
-        <FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
-        <FooterLinkGroup class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
-          <FooterLink href="/">About</FooterLink>
-          <FooterLink href="/">Privacy Policy</FooterLink>
-          <FooterLink href="/">Licensing</FooterLink>
-          <FooterLink href="/">Contact</FooterLink>
-        </FooterLinkGroup>
+        <fwb-footer-brand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
+        <fwb-footer-link-group class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
+          <fwb-footer-link href="/">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link href="/">
+            Contact
+          </fwb-footer-link>
+        </fwb-footer-link-group>
       </div>
-      <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-      <FooterCopyright href="/" by="Flowbite™" />
+      <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
+      <fwb-footer-copyright href="/" by="Flowbite™" />
     </div>
-  </Footer>
+  </fwb-footer>
 </template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
 ```
 
 ## Social media icons
 This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.
-<FooterSocialMediaIconsExample />
 
+<fwb-footer-example-social-media-icons />
 ```vue
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon  } from 'flowbite-vue'
-</script>
-
 <template>
-  <Footer footer-type="socialmedia">
+  <fwb-footer footer-type="socialmedia">
     <div class="md:flex md:justify-between">
-      <FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
+      <fwb-footer-brand alt="Flowbite Logo" href="https://flowbite.com" name="Flowbite" src="https://flowbite.com/docs/images/logo.svg" />
       <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
         <div>
-          <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
-          <FooterLinkGroup class="flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">Flowbite</FooterLink>
-            <FooterLink class="mb-4" href="/">Tailwind CSS</FooterLink>
-          </FooterLinkGroup>
+          <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+            Resources
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              Flowbite
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Tailwind CSS
+            </fwb-footer-link>
+          </fwb-footer-link-group>
         </div>
         <div>
-          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
-          <FooterLinkGroup class="flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">GitHub</FooterLink>
-            <FooterLink class="mb-4" href="/">Discord</FooterLink>
-          </FooterLinkGroup>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+            Follow us
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              GitHub
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Discord
+            </fwb-footer-link>
+          </fwb-footer-link-group>
         </div>
         <div>
-          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
-          <FooterLinkGroup class="flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
-            <FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
-          </FooterLinkGroup>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+            Legal
+          </h2>
+          <fwb-footer-link-group class="flex flex-col items-start">
+            <fwb-footer-link class="mb-4" href="/">
+              Privacy Policy
+            </fwb-footer-link>
+            <fwb-footer-link class="mb-4" href="/">
+              Terms & Conditions
+            </fwb-footer-link>
+          </fwb-footer-link-group>
         </div>
       </div>
     </div>
-    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
     <div class="sm:flex sm:items-center sm:justify-between">
-      <FooterCopyright href="/" by="Flowbite™" />
+      <fwb-footer-copyright by="Flowbite™" href="/" />
       <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
-        <FooterIcon href="/">
-          <svg class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path
-                fill-rule="evenodd"
-                d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
-                clip-rule="evenodd"
-            />
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path clip-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/">
-          <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 21 16"
-          >
-            <path
-                d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/">
-          <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 20 17"
-          >
-            <path
-                fill-rule="evenodd"
-                d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
-                clip-rule="evenodd"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/">
-          <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-          >
-            <path
-                fill-rule="evenodd"
-                d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-                clip-rule="evenodd"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/">
-          <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-          >
-            <path
-                fill-rule="evenodd"
-                d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
-                clip-rule="evenodd"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/">
+          <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
+        </fwb-footer-icon>
       </div>
     </div>
-  </Footer>
+  </fwb-footer>
 </template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
 ```
 
 ## Sitemap links
 If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.
 
-<FooterSitemapLinksExample />
-
-
+<fwb-footer-example-sitemap-links />
 ```vue
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterIcon } from 'flowbite-vue'
-</script>
-
 <template>
-  <Footer footer-type="sitemap">
+  <fwb-footer footer-type="sitemap">
     <div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
       <div>
-        <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
-        <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-          <FooterLink class="mb-4" href="/">About</FooterLink>
-          <FooterLink class="mb-4" href="/">Careers</FooterLink>
-          <FooterLink class="mb-4" href="/">Brand Center</FooterLink>
-          <FooterLink class="mb-4" href="/">Blog</FooterLink>
-        </FooterLinkGroup>
+        <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">
+          Company
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Careers
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Brand Center
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Blog
+          </fwb-footer-link>
+        </fwb-footer-link-group>
       </div>
       <div>
-        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
-        <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-          <FooterLink class="mb-4" href="/">Discord Server</FooterLink>
-          <FooterLink class="mb-4" href="/">Twitter</FooterLink>
-          <FooterLink class="mb-4" href="/">Facebook</FooterLink>
-          <FooterLink class="mb-4" href="/">Contact Us</FooterLink>
-        </FooterLinkGroup>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Download
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            Discord Server
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Twitter
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Facebook
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Contact Us
+          </fwb-footer-link>
+        </fwb-footer-link-group>
       </div>
       <div>
-        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
-        <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-          <FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
-          <FooterLink class="mb-4" href="/">Licensing</FooterLink>
-          <FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
-        </FooterLinkGroup>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Legal
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Terms & Conditions
+          </fwb-footer-link>
+        </fwb-footer-link-group>
       </div>
       <div>
-        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
-        <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-          <FooterLink class="mb-4" href="/">iOS</FooterLink>
-          <FooterLink class="mb-4" href="/">Android</FooterLink>
-          <FooterLink class="mb-4" href="/">Windows</FooterLink>
-          <FooterLink class="mb-4" href="/">MacOS</FooterLink>
-        </FooterLinkGroup>
+        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+          Download
+        </h2>
+        <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+          <fwb-footer-link class="mb-4" href="/">
+            iOS
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Android
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            Windows
+          </fwb-footer-link>
+          <fwb-footer-link class="mb-4" href="/">
+            MacOS
+          </fwb-footer-link>
+        </fwb-footer-link-group>
       </div>
     </div>
     <div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
-      <FooterCopyright class="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
+      <fwb-footer-copyright by="Flowbite™" class="text-sm text-gray-300 sm:text-center" href="/" />
       <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
-        <FooterIcon href="/" sr-text="Facebook page">
-          <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
-            <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd" />
+        <fwb-footer-icon href="/" sr-text="Facebook page">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 8 19" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/" sr-text="Discord community">
-          <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
-            <path
-                d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Discord community">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/" sr-text="Twitter page">
-          <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
-            <path
-                fill-rule="evenodd"
-                d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
-                clip-rule="evenodd"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Twitter page">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/" sr-text="GitHub account">
-          <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-                clip-rule="evenodd"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="GitHub account">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
-        <FooterIcon href="/" sr-text="Dribbble account">
-          <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
-                clip-rule="evenodd"
-            />
+        </fwb-footer-icon>
+        <fwb-footer-icon href="/" sr-text="Dribbble account">
+          <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" fill-rule="evenodd" />
           </svg>
-        </FooterIcon>
+        </fwb-footer-icon>
       </div>
     </div>
-  </Footer>
+  </fwb-footer>
 </template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
 ```
 
 ## Sticky footer
 Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
 
-<StickyFooterExample />
+<fwb-footer-example-sticky />
+```vue
+<template>
+  <fwb-footer sticky>
+    <fwb-footer-copyright
+      by="Flowbite™"
+      href="https://flowbite.com/"
+      copyright-message="All Rights Reserved."
+    />
+    <fwb-footer-link-group>
+      <fwb-footer-link href="#">
+        About
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Privacy Policy
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Licensing
+      </fwb-footer-link>
+      <fwb-footer-link href="#">
+        Contact
+      </fwb-footer-link>
+    </fwb-footer-link-group>
+  </fwb-footer>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/footer/examples/FooterExample.vue b/docs/components/footer/examples/FooterExample.vue
deleted file mode 100644
index 1e07e7ed..00000000
--- a/docs/components/footer/examples/FooterExample.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Footer>
-      <FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
-      <FooterLinkGroup>
-        <FooterLink href="#"> About </FooterLink>
-        <FooterLink href="#"> Privacy Policy </FooterLink>
-        <FooterLink href="#"> Licensing </FooterLink>
-        <FooterLink href="#"> Contact </FooterLink>
-      </FooterLinkGroup>
-    </Footer>
-  </div>
-</template>
-
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from '../../../../src/index'
-</script>
diff --git a/docs/components/footer/examples/FooterSitemapLinksExample.vue b/docs/components/footer/examples/FooterSitemapLinksExample.vue
deleted file mode 100644
index 57b87f57..00000000
--- a/docs/components/footer/examples/FooterSitemapLinksExample.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Footer footer-type="sitemap">
-      <div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
-        <div>
-          <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
-          <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">About</FooterLink>
-            <FooterLink class="mb-4" href="/">Careers</FooterLink>
-            <FooterLink class="mb-4" href="/">Brand Center</FooterLink>
-            <FooterLink class="mb-4" href="/">Blog</FooterLink>
-          </FooterLinkGroup>
-        </div>
-        <div>
-          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
-          <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">Discord Server</FooterLink>
-            <FooterLink class="mb-4" href="/">Twitter</FooterLink>
-            <FooterLink class="mb-4" href="/">Facebook</FooterLink>
-            <FooterLink class="mb-4" href="/">Contact Us</FooterLink>
-          </FooterLinkGroup>
-        </div>
-        <div>
-          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
-          <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
-            <FooterLink class="mb-4" href="/">Licensing</FooterLink>
-            <FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
-          </FooterLinkGroup>
-        </div>
-        <div>
-          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
-          <FooterLinkGroup class="text-gray-300 flex flex-col items-start">
-            <FooterLink class="mb-4" href="/">iOS</FooterLink>
-            <FooterLink class="mb-4" href="/">Android</FooterLink>
-            <FooterLink class="mb-4" href="/">Windows</FooterLink>
-            <FooterLink class="mb-4" href="/">MacOS</FooterLink>
-          </FooterLinkGroup>
-        </div>
-      </div>
-      <div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
-        <FooterCopyright class="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
-        <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
-          <FooterIcon href="/" sr-text="Facebook page">
-            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
-              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd" />
-            </svg>
-          </FooterIcon>
-          <FooterIcon href="/" sr-text="Discord community">
-            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
-              <path
-                d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
-              />
-            </svg>
-          </FooterIcon>
-          <FooterIcon href="/" sr-text="Twitter page">
-            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
-              <path
-                fill-rule="evenodd"
-                d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </FooterIcon>
-          <FooterIcon href="/" sr-text="GitHub account">
-            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-              <path
-                fill-rule="evenodd"
-                d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </FooterIcon>
-          <FooterIcon href="/" sr-text="Dribbble account">
-            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-              <path
-                fill-rule="evenodd"
-                d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </FooterIcon>
-        </div>
-      </div>
-    </Footer>
-  </div>
-</template>
-
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterIcon } from '../../../../src/index'
-</script>
diff --git a/docs/components/footer/examples/FooterWithLogoExample.vue b/docs/components/footer/examples/FooterWithLogoExample.vue
deleted file mode 100644
index f9a54fff..00000000
--- a/docs/components/footer/examples/FooterWithLogoExample.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Footer footer-type="logo">
-      <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
-        <div class="sm:flex sm:items-center sm:justify-between">
-          <FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
-          <FooterLinkGroup class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
-            <FooterLink href="/">About</FooterLink>
-            <FooterLink href="/">Privacy Policy</FooterLink>
-            <FooterLink href="/">Licensing</FooterLink>
-            <FooterLink href="/">Contact</FooterLink>
-          </FooterLinkGroup>
-        </div>
-        <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-        <FooterCopyright href="/" by="Flowbite™" />
-      </div>
-    </Footer>
-  </div>
-</template>
-
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand } from '../../../../src/index'
-</script>
diff --git a/docs/components/footer/examples/FwbFooterExample.vue b/docs/components/footer/examples/FwbFooterExample.vue
new file mode 100644
index 00000000..45989c92
--- /dev/null
+++ b/docs/components/footer/examples/FwbFooterExample.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw">
+    <fwb-footer>
+      <fwb-footer-copyright
+        by="Flowbite™"
+        copyright-message="All Rights Reserved."
+        href="https://flowbite.com/"
+      />
+      <fwb-footer-link-group>
+        <fwb-footer-link href="#">
+          About
+        </fwb-footer-link>
+        <fwb-footer-link href="#">
+          Privacy Policy
+        </fwb-footer-link>
+        <fwb-footer-link href="#">
+          Licensing
+        </fwb-footer-link>
+        <fwb-footer-link href="#">
+          Contact
+        </fwb-footer-link>
+      </fwb-footer-link-group>
+    </fwb-footer>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/footer/examples/FwbFooterExampleSitemapLinks.vue b/docs/components/footer/examples/FwbFooterExampleSitemapLinks.vue
new file mode 100644
index 00000000..e1d04241
--- /dev/null
+++ b/docs/components/footer/examples/FwbFooterExampleSitemapLinks.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="vp-raw">
+    <fwb-footer footer-type="sitemap">
+      <div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
+        <div>
+          <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">
+            Company
+          </h2>
+          <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              About
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Careers
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Brand Center
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Blog
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+            Download
+          </h2>
+          <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Discord Server
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Twitter
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Facebook
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Contact Us
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+            Legal
+          </h2>
+          <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Privacy Policy
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Licensing
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Terms & Conditions
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <div>
+          <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
+            Download
+          </h2>
+          <fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              iOS
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Android
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              Windows
+            </fwb-footer-link>
+            <fwb-footer-link
+              class="mb-4"
+              href="/"
+            >
+              MacOS
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+      </div>
+      <div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
+        <fwb-footer-copyright
+          by="Flowbite™"
+          class="text-sm text-gray-300 sm:text-center"
+          href="/"
+        />
+        <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
+          <fwb-footer-icon
+            href="/"
+            sr-text="Facebook page"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4"
+              fill="currentColor"
+              viewBox="0 0 8 19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </fwb-footer-icon>
+          <fwb-footer-icon
+            href="/"
+            sr-text="Discord community"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4"
+              fill="currentColor"
+              viewBox="0 0 21 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
+              />
+            </svg>
+          </fwb-footer-icon>
+          <fwb-footer-icon
+            href="/"
+            sr-text="Twitter page"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4"
+              fill="currentColor"
+              viewBox="0 0 20 17"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </fwb-footer-icon>
+          <fwb-footer-icon
+            href="/"
+            sr-text="GitHub account"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </fwb-footer-icon>
+          <fwb-footer-icon
+            href="/"
+            sr-text="Dribbble account"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </fwb-footer-icon>
+        </div>
+      </div>
+    </fwb-footer>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterIcon,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/footer/examples/FooterSocialMediaIconsExample.vue b/docs/components/footer/examples/FwbFooterExampleSocialMediaIcons.vue
similarity index 68%
rename from docs/components/footer/examples/FooterSocialMediaIconsExample.vue
rename to docs/components/footer/examples/FwbFooterExampleSocialMediaIcons.vue
index cf960163..77adfd1b 100644
--- a/docs/components/footer/examples/FooterSocialMediaIconsExample.vue
+++ b/docs/components/footer/examples/FwbFooterExampleSocialMediaIcons.vue
@@ -1,110 +1,166 @@
 <template>
   <div class="vp-raw w-full">
-    <Footer footer-type="socialmedia">
+    <fwb-footer footer-type="socialmedia">
       <div class="md:flex md:justify-between">
-        <FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
+        <fwb-footer-brand
+          alt="Flowbite Logo"
+          href="https://flowbite.com"
+          name="Flowbite"
+          src="https://flowbite.com/docs/images/logo.svg"
+        />
 
         <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
           <div>
-            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
-            <FooterLinkGroup class="flex flex-col items-start">
-              <FooterLink class="mb-4" href="/">Flowbite</FooterLink>
-              <FooterLink class="mb-4" href="/">Tailwind CSS</FooterLink>
-            </FooterLinkGroup>
+            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+              Resources
+            </h2>
+            <fwb-footer-link-group class="flex flex-col items-start">
+              <fwb-footer-link
+                class="mb-4"
+                href="/"
+              >
+                Flowbite
+              </fwb-footer-link>
+              <fwb-footer-link
+                class="mb-4"
+                href="/"
+              >
+                Tailwind CSS
+              </fwb-footer-link>
+            </fwb-footer-link-group>
           </div>
           <div>
-            <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
-            <FooterLinkGroup class="flex flex-col items-start">
-              <FooterLink class="mb-4" href="/">GitHub</FooterLink>
-              <FooterLink class="mb-4" href="/">Discord</FooterLink>
-            </FooterLinkGroup>
+            <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+              Follow us
+            </h2>
+            <fwb-footer-link-group class="flex flex-col items-start">
+              <fwb-footer-link
+                class="mb-4"
+                href="/"
+              >
+                GitHub
+              </fwb-footer-link>
+              <fwb-footer-link
+                class="mb-4"
+                href="/"
+              >
+                Discord
+              </fwb-footer-link>
+            </fwb-footer-link-group>
           </div>
           <div>
-            <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
-            <FooterLinkGroup class="flex flex-col items-start">
-              <FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
-              <FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
-            </FooterLinkGroup>
+            <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+              Legal
+            </h2>
+            <fwb-footer-link-group class="flex flex-col items-start">
+              <fwb-footer-link
+                class="mb-4"
+                href="/"
+              >
+                Privacy Policy
+              </fwb-footer-link>
+              <fwb-footer-link
+                class="mb-4"
+                href="/"
+              >
+                Terms & Conditions
+              </fwb-footer-link>
+            </fwb-footer-link-group>
           </div>
         </div>
       </div>
-      <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+      <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
       <div class="sm:flex sm:items-center sm:justify-between">
-        <FooterCopyright href="/" by="Flowbite™" />
+        <fwb-footer-copyright
+          by="Flowbite™"
+          href="/"
+        />
         <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
-          <FooterIcon href="/">
-            <svg class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <fwb-footer-icon href="/">
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
               <path
-                fill-rule="evenodd"
-                d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                 clip-rule="evenodd"
+                d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                fill-rule="evenodd"
               />
             </svg>
-          </FooterIcon>
-          <FooterIcon href="/">
+          </fwb-footer-icon>
+          <fwb-footer-icon href="/">
             <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               fill="currentColor"
               viewBox="0 0 21 16"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
               />
             </svg>
-          </FooterIcon>
-          <FooterIcon href="/">
+          </fwb-footer-icon>
+          <fwb-footer-icon href="/">
             <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               fill="currentColor"
               viewBox="0 0 20 17"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
-                d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
                 clip-rule="evenodd"
+                d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
+                fill-rule="evenodd"
               />
             </svg>
-          </FooterIcon>
-          <FooterIcon href="/">
+          </fwb-footer-icon>
+          <fwb-footer-icon href="/">
             <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               fill="currentColor"
               viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
-                d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
                 clip-rule="evenodd"
+                d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
+                fill-rule="evenodd"
               />
             </svg>
-          </FooterIcon>
-          <FooterIcon href="/">
+          </fwb-footer-icon>
+          <fwb-footer-icon href="/">
             <svg
-              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
               fill="currentColor"
               viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
-                d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
                 clip-rule="evenodd"
+                d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
+                fill-rule="evenodd"
               />
             </svg>
-          </FooterIcon>
+          </fwb-footer-icon>
         </div>
       </div>
-    </Footer>
+    </fwb-footer>
   </div>
 </template>
 
 <script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from '../../../../src/index'
+import {
+  FwbFooter,
+  FwbFooterBrand,
+  FwbFooterCopyright,
+  FwbFooterIcon,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from '../../../../src/index'
 </script>
diff --git a/docs/components/footer/examples/FwbFooterExampleSticky.vue b/docs/components/footer/examples/FwbFooterExampleSticky.vue
new file mode 100644
index 00000000..ea82367d
--- /dev/null
+++ b/docs/components/footer/examples/FwbFooterExampleSticky.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="vp-raw  relative">
+    <div
+      class="overflow-scroll bg-white dark:bg-gray-900"
+      style="height: 200px"
+    >
+      <div
+        class="px-20 py-5"
+        style="height: 800px;"
+      >
+        <p class="mb-5">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </p>
+        <p>Perferendis, ducimus laboriosam veritatis dolorem culpa fugiat eum voluptate fugit, enim eaque aspernatur optio saepe doloremque hic voluptates est dignissimos ex quae?</p>
+      </div>
+      <fwb-footer
+        class="rounded-none"
+        sticky
+      >
+        <fwb-footer-copyright
+          by="Flowbite™"
+          copyright-message="All Rights Reserved."
+          href="https://flowbite.com/"
+        />
+        <fwb-footer-link-group>
+          <fwb-footer-link href="#">
+            About
+          </fwb-footer-link>
+          <fwb-footer-link href="#">
+            Privacy Policy
+          </fwb-footer-link>
+          <fwb-footer-link href="#">
+            Licensing
+          </fwb-footer-link>
+          <fwb-footer-link href="#">
+            Contact
+          </fwb-footer-link>
+        </fwb-footer-link-group>
+      </fwb-footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/footer/examples/FwbFooterExampleWithLogo.vue b/docs/components/footer/examples/FwbFooterExampleWithLogo.vue
new file mode 100644
index 00000000..cae375ce
--- /dev/null
+++ b/docs/components/footer/examples/FwbFooterExampleWithLogo.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="vp-raw">
+    <fwb-footer footer-type="logo">
+      <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+        <div class="sm:flex sm:items-center sm:justify-between">
+          <fwb-footer-brand
+            alt="Flowbite Logo"
+            href="https://flowbite.com"
+            name="Flowbite"
+            src="https://flowbite.com/docs/images/logo.svg"
+          />
+          <fwb-footer-link-group class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
+            <fwb-footer-link href="/">
+              About
+            </fwb-footer-link>
+            <fwb-footer-link href="/">
+              Privacy Policy
+            </fwb-footer-link>
+            <fwb-footer-link href="/">
+              Licensing
+            </fwb-footer-link>
+            <fwb-footer-link href="/">
+              Contact
+            </fwb-footer-link>
+          </fwb-footer-link-group>
+        </div>
+        <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
+        <fwb-footer-copyright
+          by="Flowbite™"
+          href="/"
+        />
+      </div>
+    </fwb-footer>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbFooter,
+  FwbFooterBrand,
+  FwbFooterCopyright,
+  FwbFooterLink,
+  FwbFooterLinkGroup,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/footer/examples/StickyFooterExample.vue b/docs/components/footer/examples/StickyFooterExample.vue
deleted file mode 100644
index 3f490f02..00000000
--- a/docs/components/footer/examples/StickyFooterExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="vp-raw relative">
-    <div style="height: 300px" class="overflow-scroll pb-16 pt-4 px-4 bg-white dark:bg-gray-900">Some content</div>
-    <Footer sticky class="rounded-none">
-      <FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
-      <FooterLinkGroup>
-        <FooterLink href="#"> About </FooterLink>
-        <FooterLink href="#"> Privacy Policy </FooterLink>
-        <FooterLink href="#"> Licensing </FooterLink>
-        <FooterLink href="#"> Contact </FooterLink>
-      </FooterLinkGroup>
-    </Footer>
-  </div>
-</template>
-
-<script setup>
-import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from '../../../../src/index'
-</script>
diff --git a/docs/components/heading.md b/docs/components/heading.md
index ae3e840f..02f8dbc5 100644
--- a/docs/components/heading.md
+++ b/docs/components/heading.md
@@ -1,12 +1,12 @@
 <script setup>
-import H1 from './typography/heading/H1.vue'
-import H2 from './typography/heading/H2.vue'
-import H3 from './typography/heading/H3.vue'
-import H4 from './typography/heading/H4.vue'
-import H5 from './typography/heading/H5.vue'
-import H6 from './typography/heading/H6.vue'
-import HColor from './typography/heading/HColor.vue'
-import HCustom from './typography/heading/HCustom.vue'
+import FwbHExampleLevel1 from './typography/heading/FwbHExampleLevel1.vue'
+import FwbHExampleLevel2 from './typography/heading/FwbHExampleLevel2.vue'
+import FwbHExampleLevel3 from './typography/heading/FwbHExampleLevel3.vue'
+import FwbHExampleLevel4 from './typography/heading/FwbHExampleLevel4.vue'
+import FwbHExampleLevel5 from './typography/heading/FwbHExampleLevel5.vue'
+import FwbHExampleLevel6 from './typography/heading/FwbHExampleLevel6.vue'
+import FwbHExampleColor from './typography/heading/FwbHExampleColor.vue'
+import FwbHExampleCustom from './typography/heading/FwbHExampleCustom.vue'
 </script>
 
 # Vue Heading - Flowbite
@@ -17,135 +17,127 @@ import HCustom from './typography/heading/HCustom.vue'
 
 Use the `tag="h1"` as the most important text element to indicate the title of your web page.
 
-<H1 />
 
 ```vue
 <template>
-  <Heading tag="h1">This is my heading</Heading>
+  <fwb-heading tag="h1">Heading 1</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-level1 />
 
 
-## Heading one (H2)
+## Heading two (H2)
 
 The H2 tag can be used as subtitles of the page’s sections.
 
-<H2 />
-
 ```vue
 <template>
-  <Heading tag="h2">This is my heading</Heading>
+  <fwb-heading tag="h2">Heading 2</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-level2 />
 
 
-## Heading one (H3)
+## Heading three (H3)
 
 Use the H3 tags inside sections that already have a H2 available.
 
-<H3 />
-
 ```vue
 <template>
-  <Heading tag="h3">This is my heading</Heading>
+  <fwb-heading tag="h3">Heading 3</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-level3 />
 
 
-## Heading one (H4)
+## Heading four (H4)
 
 The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
 
-<H4 />
-
 ```vue
 <template>
-  <Heading tag="h4">This is my heading</Heading>
+  <fwb-heading tag="h4">Heading 4</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-level4 />
 
 
-## Heading one (H5)
+## Heading five (H5)
 
 The H5 tag is most often used in longer articles with other heading already available or in sidebars.
 
-<H5 />
-
 ```vue
 <template>
-  <Heading tag="h5">This is my heading</Heading>
+  <fwb-heading tag="h5">Heading 5</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-level5 />
 
 
-## Heading one (H6)
+## Heading six (H6)
 
 Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
 
-<H6 />
-
 ```vue
 <template>
-  <Heading tag="h6">This is my heading</Heading>
+  <fwb-heading tag="h6">Heading 6</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-level6 />
 
 
 ## Color
 
 Use the `color` prop to set the text color.
 
-<HColor />
-
 ```vue
 <template>
-  <Heading color="text-green-400" tag="h1">This is my heading</Heading>
+  <fwb-heading color="text-green-400">Green eading</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
+<fwb-h-example-color />
 
 
 ## Custom classes
 
 Use the `class` attribute to apply the tailwind classes.
 
-<HCustom />
 
 ```vue
 <template>
-  <Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading>
+  <fwb-heading class="!text-xl italic underline">Custom heading</fwb-heading>
 </template>
 
 <script setup>
-import Heading from 'flowbite-vue'
+import { FwbHeading } from 'flowbite-vue'
 </script>
 ```
-
-
+<fwb-h-example-custom />
diff --git a/docs/components/image.md b/docs/components/image.md
index 35753fa2..14c056f8 100644
--- a/docs/components/image.md
+++ b/docs/components/image.md
@@ -1,10 +1,10 @@
 <script setup>
-import Img from './typography/image/Img.vue'
-import ImgCap from './typography/image/ImgCap.vue'
-import ImgSize from './typography/image/ImgSize.vue'
-import ImgAlign from './typography/image/ImgAlign.vue'
-import ImgBlur from './typography/image/ImgBlur.vue'
-import ImgCustom from './typography/image/ImgCustom.vue'
+import FwbImgExample from './typography/image/FwbImgExample.vue'
+import FwbImgExampleCaption from './typography/image/FwbImgExampleCaption.vue'
+import FwbImgExampleSize from './typography/image/FwbImgExampleSize.vue'
+import FwbImgExampleAlign from './typography/image/FwbImgExampleAlign.vue'
+import FwbImgExampleGrayscale from './typography/image/FwbImgExampleGrayscale.vue'
+import FwbImgExampleCustom from './typography/image/FwbImgExampleCustom.vue'
 </script>
 
 # Vue Images - Flowbite
@@ -17,15 +17,17 @@ Use this example to show the a responsive image that won’t grow beyond the max
 
 ```vue
 <template>
-  <Img src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+  <fwb-img
+    alt="flowbite-vue"
+    src="/images/examples/image.png"
+  />
 </template>
 
 <script setup>
-import Img from 'flowbite-vue'
+import { FwbImg } from 'flowbite-vue'
 </script>
 ```
-
-<Img />
+<fwb-img-example />
 
 ## Image caption
 
@@ -33,15 +35,19 @@ This example can be used to add a caption for the image often used inside articl
 
 ```vue
 <template>
-  <Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+  <fwb-img
+    alt="flowbite-vue"
+    caption="flowbite-vue"
+    src="/images/examples/image.png"
+  />
 </template>
 
 <script setup>
-import Img from 'flowbite-vue'
+import { FwbImg } from 'flowbite-vue'
 </script>
 ```
+<fwb-img-example-caption />
 
-<ImgCap />
 
 ## Sizes
 
@@ -49,15 +55,18 @@ Set the size of the image using the `w-size` and `h-size` or `max-w-size` utilit
 
 ```vue
 <template>
-  <Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+  <fwb-img
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="/images/examples/image.png"
+  />
 </template>
 
 <script setup>
-import Img from 'flowbite-vue'
+import { FwbImg } from 'flowbite-vue'
 </script>
 ```
-
-<ImgSize />
+<fwb-img-example-size />
 
 ## Alignment
 
@@ -65,15 +74,19 @@ Align the image component to the center or right side of the document page using
 
 ```vue
 <template>
-  <Img align="ml-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+  <fwb-img
+    alignment="mx-auto"
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="/images/examples/image.png"
+  />
 </template>
 
 <script setup>
-import Img from 'flowbite-vue'
+import { FwbImg } from 'flowbite-vue'
 </script>
 ```
-
-<ImgAlign />
+<fwb-img-example-align />
 
 ## Grayscale
 
@@ -81,20 +94,19 @@ Use the filter option and apply a grayscale to the image element using the grays
 
 ```vue
 <template>
-  <Img
-    size="max-w-lg"
-    alt="My gallery"
+  <fwb-img
+    alt="flowbite-vue"
     img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
-    src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
+    size="max-w-lg"
+    src="/images/examples/image.png"
   />
 </template>
 
 <script setup>
-import Img from 'flowbite-vue'
+import { FwbImg } from 'flowbite-vue'
 </script>
 ```
-
-<ImgBlur />
+<fwb-img-example-grayscale />
 
 ## Custom classes
 
@@ -102,12 +114,16 @@ Use the `img-class` prop to apply tailwind classes.
 
 ```vue
 <template>
-  <Img img-class="rounded-lg border-[1px]" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
+  <fwb-img
+    alt="flowbite-vue"
+    img-class="rounded-lg border-[1px]"
+    size="max-w-lg"
+    src="/images/examples/image.png"
+  />
 </template>
 
 <script setup>
-import Img from 'flowbite-vue'
+import { FwbImg } from 'flowbite-vue'
 </script>
 ```
-
-<ImgCustom />
+<fwb-img-example-custom />
diff --git a/docs/components/input.md b/docs/components/input.md
index 5ae41076..fad13eda 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -1,12 +1,12 @@
 <script setup>
-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'
-import InputRequiredExample from './input/examples/InputRequiredExample.vue'
-import InputValidationExample from './input/examples/InputValidationExample.vue'
+import FwbInputExample from './input/examples/FwbInputExample.vue'
+import FwbInputExampleSize from './input/examples/FwbInputExampleSize.vue'
+import FwbInputExampleDisabled from './input/examples/FwbInputExampleDisabled.vue'
+import FwbInputExampleHelper from './input/examples/FwbInputExampleHelper.vue'
+import FwbInputExamplePrefix from './input/examples/FwbInputExamplePrefix.vue'
+import FwbInputExampleSuffix from './input/examples/FwbInputExampleSuffix.vue'
+import FwbInputExampleRequired from './input/examples/FwbInputExampleRequired.vue'
+import FwbInputExampleValidation from './input/examples/FwbInputExampleValidation.vue'
 </script>
 
 # Vue Input - Flowbite
@@ -24,125 +24,196 @@ The input field is an important part of the form element that can be used to cre
 On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.
 
 ## Default
+
+<fwb-input-example />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
+<template>
+  <fwb-input
+    v-model="name"
+    placeholder="enter your first name"
+    label="First name"
+  />
+</template>
+
+<script lang="ts" setup>
 import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
 
 const name = ref('')
 </script>
-<template>
-    <Input v-model="name" placeholder="enter your first name" label="First name" />
-</template>
 ```
 
-<InputExample />
-
 ## Size
+
+<fwb-input-example-size />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
-</script>
 <template>
-    <Input size="sm" placeholder="enter your first name" label="Small" />
-    <Input size="md" placeholder="enter your last name" label="Medium" />
-    <Input size="lg" placeholder="enter your second name" label="Large" />
+  <fwb-input v-model="name" label="Small" placeholder="enter your name" size="sm" />
+  <fwb-input v-model="name" label="Medium" placeholder="enter your name" size="md" />
+  <fwb-input v-model="name" label="Large" placeholder="enter your name" size="lg" />
 </template>
-```
 
-<InputSizeExample />
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
 
 ## Disabled
+
+<fwb-input-example-disabled />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
-</script>
 <template>
-  <Input :disabled="true" placeholder="enter your first name" label="First name" />
+  <fwb-input
+    v-model="name"
+    disabled
+    label="First name"
+    placeholder="enter your first name"
+  />
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
 ```
 
 ## Required
 
+<fwb-input-example-required />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
-</script>
 <template>
-  <Input required placeholder="enter your first name" label="First name" />
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+    required
+  />
 </template>
-```
 
-<InputRequiredExample />
+<script setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
 
 ## Slot - Helper
+
+<fwb-input-example-helper />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
-</script>
 <template>
-  <Input placeholder="enter your first name" label="First name">
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+  >
     <template #helper>
-      We’ll never share your details. Read our <a href="#" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Privacy Policy</a>.
+      We'll never share your details. Read our
+      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
+        Privacy Policy
+      </fwb-a>.
     </template>
-  </Input>
+  </fwb-input>
 </template>
-```
 
-<InputHelperExample />
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbA, FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
 
 ## Slot - Prefix
+
+<fwb-input-example-prefix />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
-</script>
 <template>
-  <Input placeholder="enter your first name" label="First name">
+  <fwb-input v-model="name" label="Search" placeholder="enter your search query">
     <template #prefix>
-      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
     </template>
-  </Input>
+  </fwb-input>
 </template>
-```
 
-<InputPrefixExample />
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
 
 ## Slot - Suffix
+<fwb-input-example-suffix />
 ```vue
-<script setup>
-import { Input, Button } from 'flowbite-vue'
-</script>
 <template>
-  <Input size="lg" placeholder="enter your search query" label="Search">
+  <fwb-input
+    v-model="query"
+    label="Search"
+    placeholder="enter your search query"
+    size="lg"
+  >
     <template #prefix>
-      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
     </template>
     <template #suffix>
-      <Button>Search</Button>
+      <fwb-button>Search</fwb-button>
     </template>
-  </Input>
+  </fwb-input>
 </template>
-```
 
-<InputSuffixExample />
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbInput } from 'flowbite-vue'
+
+const query = ref('')
+</script>
+```
 
 ## Slot - Validation
 
-- Set validation status via `validationStatus` props, which accepts `'success'` or `'error'`.
+- Set validation status via `validationStatus` prop, which accepts `'success'` or `'error'`.
 - Add validation message via `validationMessage` slot.
 
+<fwb-input-example-validation />
 ```vue
-<script setup>
-import { Input } from 'flowbite-vue'
-</script>
 <template>
-  <Input v-model='email' required placeholder="enter your email address" label="Email" validation-status='success' />
-  <Input v-model='email' required placeholder="enter your email address" label="Email" validation-status='error'>
+  <fwb-input
+    v-model="email"
+    required
+    placeholder="enter your email address"
+    label="Email"
+    validation-status="success"
+  />
+  <hr class="mt-4 border-0">
+  <fwb-input
+    v-model="email"
+    required
+    placeholder="enter your email address"
+    label="Email"
+    validation-status="error"
+  >
     <template #validationMessage>
       Please enter a valid email address
     </template>
-  </Input>
+  </fwb-input>
 </template>
-```
 
-<InputValidationExample />
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const email = ref('')
+</script>
+```
diff --git a/docs/components/input/examples/FwbInputExample.vue b/docs/components/input/examples/FwbInputExample.vue
new file mode 100644
index 00000000..aaecd8b7
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      label="First name"
+      placeholder="enter your first name"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExampleDisabled.vue b/docs/components/input/examples/FwbInputExampleDisabled.vue
new file mode 100644
index 00000000..b4e05992
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleDisabled.vue
@@ -0,0 +1,15 @@
+<template>
+  <fwb-input
+    v-model="name"
+    disabled
+    label="First name"
+    placeholder="enter your first name"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExampleHelper.vue b/docs/components/input/examples/FwbInputExampleHelper.vue
new file mode 100644
index 00000000..7cbc2ee5
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleHelper.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      label="First name"
+      placeholder="enter your first name"
+    >
+      <template #helper>
+        We'll never share your details. Read our
+        <fwb-a
+          href="#"
+          color="text-blue-600 dark:text-blue-500"
+        >
+          Privacy Policy
+        </fwb-a>.
+      </template>
+    </fwb-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbA, FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExamplePrefix.vue b/docs/components/input/examples/FwbInputExamplePrefix.vue
new file mode 100644
index 00000000..ae2ba57c
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExamplePrefix.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      label="Search"
+      placeholder="enter your search query"
+    >
+      <template #prefix>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5 text-gray-500 dark:text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+      </template>
+    </fwb-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExampleRequired.vue b/docs/components/input/examples/FwbInputExampleRequired.vue
new file mode 100644
index 00000000..1bf5643b
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleRequired.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      label="First name"
+      placeholder="enter your first name"
+      required
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExampleSize.vue b/docs/components/input/examples/FwbInputExampleSize.vue
new file mode 100644
index 00000000..6dfe2827
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleSize.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-input
+      v-model="name"
+      label="Small"
+      placeholder="enter your name"
+      size="sm"
+    />
+    <fwb-input
+      v-model="name"
+      label="Medium"
+      placeholder="enter your name"
+      size="md"
+    />
+    <fwb-input
+      v-model="name"
+      label="Large"
+      placeholder="enter your name"
+      size="lg"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExampleSuffix.vue b/docs/components/input/examples/FwbInputExampleSuffix.vue
new file mode 100644
index 00000000..0424dfd8
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleSuffix.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      label="Search"
+      placeholder="enter your search query"
+      size="lg"
+    >
+      <template #prefix>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5 text-gray-500 dark:text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+      </template>
+      <template #suffix>
+        <fwb-button>Search</fwb-button>
+      </template>
+    </fwb-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbButton, FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>
diff --git a/docs/components/input/examples/FwbInputExampleValidation.vue b/docs/components/input/examples/FwbInputExampleValidation.vue
new file mode 100644
index 00000000..86261a79
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleValidation.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="email"
+      required
+      placeholder="enter your email address"
+      label="Email"
+      validation-status="success"
+    />
+    <hr class="mt-4 border-0">
+    <fwb-input
+      v-model="email"
+      required
+      placeholder="enter your email address"
+      label="Email"
+      validation-status="error"
+    >
+      <template #validationMessage>
+        Please enter a valid email address
+      </template>
+    </fwb-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const email = ref('')
+</script>
diff --git a/docs/components/input/examples/InputDisabledExample.vue b/docs/components/input/examples/InputDisabledExample.vue
deleted file mode 100644
index 29987cc3..00000000
--- a/docs/components/input/examples/InputDisabledExample.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <Input :disabled="true" placeholder="enter your first name" label="First name" />
-</template>
-<script lang="ts" setup>
-import { Input } from '../../../../src/index'
-</script>
diff --git a/docs/components/input/examples/InputExample.vue b/docs/components/input/examples/InputExample.vue
deleted file mode 100644
index a1057ccf..00000000
--- a/docs/components/input/examples/InputExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <Input v-model="name" placeholder="enter your first name" label="First name" />
-</template>
-<script lang="ts" setup>
-import { Input } from '../../../../src/index'
-import { ref } from 'vue'
-
-const name = ref('')
-</script>
diff --git a/docs/components/input/examples/InputHelperExample.vue b/docs/components/input/examples/InputHelperExample.vue
deleted file mode 100644
index 6984a8cc..00000000
--- a/docs/components/input/examples/InputHelperExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Input v-model='name' placeholder="enter your first name" label="First name">
-      <template #helper>
-        We’ll never share your details. Read our <a href="#" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Privacy Policy</a>.
-      </template>
-    </Input>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Input } from '../../../../src/index'
-
-const name = ref('')
-</script>
diff --git a/docs/components/input/examples/InputPrefixExample.vue b/docs/components/input/examples/InputPrefixExample.vue
deleted file mode 100644
index f58980d3..00000000
--- a/docs/components/input/examples/InputPrefixExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Input v-model='name' placeholder="enter your search query" label="Search">
-      <template #prefix>
-        <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-      </template>
-    </Input>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Input } from '../../../../src/index'
-
-const name = ref('')
-</script>
diff --git a/docs/components/input/examples/InputRequiredExample.vue b/docs/components/input/examples/InputRequiredExample.vue
deleted file mode 100644
index 62411d11..00000000
--- a/docs/components/input/examples/InputRequiredExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <div class="vp-raw">
-      <Input v-model='name' required placeholder="enter your first name" label="First name">
-      </Input>
-    </div>
-  </template>
-  <script lang="ts" setup>
-  import { ref } from 'vue'
-  import { Input } from '../../../../src/index'
-
-  const name = ref('')
-  </script>
diff --git a/docs/components/input/examples/InputSizeExample.vue b/docs/components/input/examples/InputSizeExample.vue
deleted file mode 100644
index a0ad55a3..00000000
--- a/docs/components/input/examples/InputSizeExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col align-center gap-2 flex-wrap">
-    <Input v-model='name' size="sm" placeholder="enter your first name" label="Small" />
-    <Input v-model='name' size="md" placeholder="enter your last name" label="Medium" />
-    <Input v-model='name' size="lg" placeholder="enter your second name" label="Large" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Input } from '../../../../src/index'
-const name = ref('')
-</script>
diff --git a/docs/components/input/examples/InputSuffixExample.vue b/docs/components/input/examples/InputSuffixExample.vue
deleted file mode 100644
index d2ea6abb..00000000
--- a/docs/components/input/examples/InputSuffixExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Input v-model='name' size="lg" placeholder="enter your search query" label="Search">
-      <template #prefix>
-        <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-      </template>
-      <template #suffix>
-        <Button>Search</Button>
-      </template>
-    </Input>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Input, Button } from '../../../../src/index'
-
-const name = ref('')
-</script>
diff --git a/docs/components/input/examples/InputValidationExample.vue b/docs/components/input/examples/InputValidationExample.vue
deleted file mode 100644
index c252abbd..00000000
--- a/docs/components/input/examples/InputValidationExample.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <Input v-model='email' required placeholder="enter your email address" label="Email" validation-status='success' />
-    <hr class='mt-4 border-0'>
-    <Input v-model='email' required placeholder="enter your email address" label="Email" validation-status='error'>
-      <template #validationMessage>
-        Please enter a valid email address
-      </template>
-    </Input>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Input } from '../../../../src/index'
-
-const email = ref('')
-</script>
diff --git a/docs/components/link.md b/docs/components/link.md
index fb4cc010..d939371c 100644
--- a/docs/components/link.md
+++ b/docs/components/link.md
@@ -1,7 +1,7 @@
 <script setup>
-import A from './typography/link/A.vue'
-import APara from './typography/link/APara.vue'
-import ACustom from './typography/link/ACustom.vue'
+import FwbAExample from './typography/link/FwbAExample.vue'
+import FwbAExampleParagraph from './typography/link/FwbAExampleParagraph.vue'
+import FwbAExampleCustom from './typography/link/FwbAExampleCustom.vue'
 </script>
 
 # Vue Links - Flowbite
@@ -14,34 +14,34 @@ Use this example to set default styles to an inline link element.
 
 ```vue
 <template>
-  <A href="/"> Flowbite-vue </A>
+  <fwb-a href="#"> Flowbite-vue </fwb-a>
 </template>
 
 <script setup>
-import A from 'flowbite-vue'
+import { FwbA } from 'flowbite-vue'
 </script>
 ```
+<fwb-a-example />
 
-<A />
-
-## Para link
+## Paragraph link
 
 Use this example to set a link inside a paragraph with an underline style.
 
 ```vue
 <template>
-  <P>
-    The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
+  <fwb-p>
+    The free updates that will be provided is based on the <fwb-a href="#"
+    class="underline hover:no-underline">roadmap</fwb-a> that we have laid
+    out for this project. It is also possible that we will provide
     extra updates outside of the roadmap as well.
-  </P>
+  </fwb-p>
 </template>
 
 <script setup>
-import { P, A } from 'flowbite-vue'
+import { FwbA, FwbP } from 'flowbite-vue'
 </script>
 ```
-
-<APara />
+<fwb-a-example-paragraph />
 
 ## Custom classes
 
@@ -49,12 +49,11 @@ Use `class` attribute prop to apply the tailwind classes.
 
 ```vue
 <template>
-  <A class="underline italic" href="/"> Flowbite-vue </A>
+  <fwb-a class="text-orange-500 italic" href="#"> Flowbite-vue </fwb-a>
 </template>
 
 <script setup>
-import A from 'flowbite-vue'
+import { FwbA } from 'flowbite-vue'
 </script>
 ```
-
-<ACustom />
+<fwb-a-example-custom />
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 2bd219af..15de46aa 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -1,8 +1,8 @@
 <script setup>
-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'
+import FwbListGroupExample from './listGroup/examples/FwbListGroupExample.vue'
+import FwbListGroupExampleDisabled from './listGroup/examples/FwbListGroupExampleDisabled.vue'
+import FwbListGroupExampleHover from './listGroup/examples/FwbListGroupExampleHover.vue'
+import FwbListGroupExampleIcon from './listGroup/examples/FwbListGroupExampleIcon.vue'
 </script>
 
 # Vue List Group - Flowbite
@@ -17,114 +17,132 @@ Original reference: [https://flowbite.com/docs/components/list-group/](https://f
 
 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
+## Default
+
+<fwb-list-group-example />
 ```vue
-<script setup>
-import { ListGroup, ListGroupItem } from 'flowbite-vue'
-</script>
 <template>
-  <list-group>
-    <list-group-item :hover="false">Item 1</list-group-item>
-    <list-group-item :hover="false">Item 2</list-group-item>
-    <list-group-item :hover="false">Item 3</list-group-item>
-    <list-group-item :hover="false">Item 4</list-group-item>
-    <list-group-item :hover="false">Item 5</list-group-item>
-  </list-group>
+  <fwb-list-group>
+    <fwb-list-group-item>Item 1</fwb-list-group-item>
+    <fwb-list-group-item>Item 2</fwb-list-group-item>
+    <fwb-list-group-item>Item 3</fwb-list-group-item>
+    <fwb-list-group-item>Item 4</fwb-list-group-item>
+    <fwb-list-group-item>Item 5</fwb-list-group-item>
+  </fwb-list-group>
 </template>
-```
 
-<ListGroupExample />
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
+```
 
 ## Hover
+
+<fwb-list-group-example-hover />
 ```vue
-<script setup>
-import { ListGroup, ListGroupItem } from 'flowbite-vue'
-</script>
 <template>
-  <list-group>
-    <list-group-item>Item 1</list-group-item>
-    <list-group-item>Item 2</list-group-item>
-    <list-group-item>Item 3</list-group-item>
-    <list-group-item>Item 4</list-group-item>
-    <list-group-item>Item 5</list-group-item>
-  </list-group>
+  <fwb-list-group>
+    <fwb-list-group-item hover>Item 1</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 2</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 3</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 4</fwb-list-group-item>
+    <fwb-list-group-item hover>Item 5</fwb-list-group-item>
+  </fwb-list-group>
 </template>
-```
 
-<ListGroupHoverExample />
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
+```
 
 ## Icon
 
+<fwb-list-group-example-icon />
 ```vue
-<script setup>
-import { ListGroup, ListGroupItem } from 'flowbite-vue'
-</script>
 <template>
-  <list-group>
-    <list-group-item>
+  <fwb-list-group>
+    <fwb-list-group-item>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" fill-rule="evenodd" />
+        </svg>
       </template>
       Profile
-    </list-group-item>
-    <list-group-item>
+    </fwb-list-group-item>
+    <fwb-list-group-item>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+        </svg>
       </template>
       Settings
-    </list-group-item>
-    <list-group-item>
+    </fwb-list-group-item>
+    <fwb-list-group-item>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" fill-rule="evenodd" />
+        </svg>
       </template>
       Messages
-    </list-group-item>
-    <list-group-item>
+    </fwb-list-group-item>
+    <fwb-list-group-item>
       <template #suffix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" fill-rule="evenodd" />
+        </svg>
       </template>
       Download
-    </list-group-item>
-  </list-group>
+    </fwb-list-group-item>
+  </fwb-list-group>
 </template>
-```
 
-<ListGroupHoverIconExample />
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
+```
 
 ## Disabled
 
+<fwb-list-group-example-disabled />
 ```vue
-<script setup>
-import { ListGroup, ListGroupItem } from 'flowbite-vue'
-</script>
 <template>
-  <list-group>
-    <list-group-item>
+  <fwb-list-group>
+    <fwb-list-group-item>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" fill-rule="evenodd" />
+        </svg>
       </template>
       Profile
-    </list-group-item>
-    <list-group-item>
+    </fwb-list-group-item>
+    <fwb-list-group-item>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+        </svg>
       </template>
       Settings
-    </list-group-item>
-    <list-group-item>
+    </fwb-list-group-item>
+    <fwb-list-group-item>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" fill-rule="evenodd" />
+        </svg>
       </template>
       Messages
-    </list-group-item>
-    <list-group-item disabled>
+    </fwb-list-group-item>
+    <fwb-list-group-item disabled>
       <template #prefix>
-        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
+        <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" fill-rule="evenodd" />
+        </svg>
       </template>
       Download
-    </list-group-item>
-  </list-group>
+    </fwb-list-group-item>
+  </fwb-list-group>
 </template>
-```
 
-<ListGroupHoverIconDisabledExample />
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/listGroup/examples/FwbListGroupExample.vue b/docs/components/listGroup/examples/FwbListGroupExample.vue
new file mode 100644
index 00000000..29fc8cf2
--- /dev/null
+++ b/docs/components/listGroup/examples/FwbListGroupExample.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="vp-raw">
+    <fwb-list-group>
+      <fwb-list-group-item>
+        Item 1
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        Item 2
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        Item 3
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        Item 4
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        Item 5
+      </fwb-list-group-item>
+    </fwb-list-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/listGroup/examples/FwbListGroupExampleDisabled.vue b/docs/components/listGroup/examples/FwbListGroupExampleDisabled.vue
new file mode 100644
index 00000000..a35ba5dc
--- /dev/null
+++ b/docs/components/listGroup/examples/FwbListGroupExampleDisabled.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="vp-raw">
+    <fwb-list-group>
+      <fwb-list-group-item>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        Profile
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" /></svg>
+        </template>
+        Settings
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        Messages
+      </fwb-list-group-item>
+      <fwb-list-group-item disabled>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        Download
+      </fwb-list-group-item>
+    </fwb-list-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/listGroup/examples/FwbListGroupExampleHover.vue b/docs/components/listGroup/examples/FwbListGroupExampleHover.vue
new file mode 100644
index 00000000..a82c352c
--- /dev/null
+++ b/docs/components/listGroup/examples/FwbListGroupExampleHover.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <fwb-list-group>
+      <fwb-list-group-item hover>
+        Item 1
+      </fwb-list-group-item>
+      <fwb-list-group-item hover>
+        Item 2
+      </fwb-list-group-item>
+      <fwb-list-group-item hover>
+        Item 3
+      </fwb-list-group-item>
+      <fwb-list-group-item hover>
+        Item 4
+      </fwb-list-group-item>
+      <fwb-list-group-item hover>
+        Item 5
+      </fwb-list-group-item>
+    </fwb-list-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/listGroup/examples/FwbListGroupExampleIcon.vue b/docs/components/listGroup/examples/FwbListGroupExampleIcon.vue
new file mode 100644
index 00000000..738b2ea0
--- /dev/null
+++ b/docs/components/listGroup/examples/FwbListGroupExampleIcon.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="vp-raw">
+    <fwb-list-group>
+      <fwb-list-group-item>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        Profile
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" /></svg>
+        </template>
+        Settings
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <template #prefix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        Messages
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <template #suffix>
+          <svg
+            class="w-4 h-4 fill-current"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        Download
+      </fwb-list-group-item>
+    </fwb-list-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/docs/components/listGroup/examples/ListGroupExample.vue b/docs/components/listGroup/examples/ListGroupExample.vue
deleted file mode 100644
index b5879d28..00000000
--- a/docs/components/listGroup/examples/ListGroupExample.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <list-group>
-      <list-group-item :hover="false">Item 1</list-group-item>
-      <list-group-item :hover="false">Item 2</list-group-item>
-      <list-group-item :hover="false">Item 3</list-group-item>
-      <list-group-item :hover="false">Item 4</list-group-item>
-      <list-group-item :hover="false">Item 5</list-group-item>
-    </list-group>
-  </div>
-</template>
-<script setup>
-import { ListGroup, ListGroupItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/listGroup/examples/ListGroupHoverExample.vue b/docs/components/listGroup/examples/ListGroupHoverExample.vue
deleted file mode 100644
index 76d123dd..00000000
--- a/docs/components/listGroup/examples/ListGroupHoverExample.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <list-group>
-      <list-group-item>Item 1</list-group-item>
-      <list-group-item>Item 2</list-group-item>
-      <list-group-item>Item 3</list-group-item>
-      <list-group-item>Item 4</list-group-item>
-      <list-group-item>Item 5</list-group-item>
-    </list-group>
-  </div>
-</template>
-<script setup>
-import { ListGroup, ListGroupItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue b/docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue
deleted file mode 100644
index 87d59575..00000000
--- a/docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <list-group>
-      <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
-        </template>
-        Profile
-      </list-group-item>
-      <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
-        </template>
-        Settings
-      </list-group-item>
-      <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
-        </template>
-        Messages
-      </list-group-item>
-      <list-group-item disabled>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
-        </template>
-        Download
-      </list-group-item>
-    </list-group>
-  </div>
-</template>
-<script setup>
-import { ListGroup, ListGroupItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/listGroup/examples/ListGroupHoverIconExample.vue b/docs/components/listGroup/examples/ListGroupHoverIconExample.vue
deleted file mode 100644
index e13fc54c..00000000
--- a/docs/components/listGroup/examples/ListGroupHoverIconExample.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <list-group>
-      <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
-        </template>
-        Profile
-      </list-group-item>
-      <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
-        </template>
-        Settings
-      </list-group-item>
-      <list-group-item>
-        <template #prefix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
-        </template>
-        Messages
-      </list-group-item>
-      <list-group-item>
-        <template #suffix>
-          <svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
-        </template>
-        Download
-      </list-group-item>
-    </list-group>
-  </div>
-</template>
-<script setup>
-import { ListGroup, ListGroupItem } from '../../../../src/index'
-</script>
diff --git a/docs/components/modal.md b/docs/components/modal.md
index da22950f..7eaad07d 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -1,8 +1,8 @@
 <script setup>
-import ModalExample from './modal/examples/ModalExample.vue';
-import ModalSizeExample from './modal/examples/ModalSizeExample.vue';
-import ModalEscapableExample from './modal/examples/ModalEscapableExample.vue';
-import ModalPersistentExample from './modal/examples/ModalPersistentExample.vue';
+import FwbModalExample from './modal/examples/FwbModalExample.vue'
+import FwbModalExampleSize from './modal/examples/FwbModalExampleSize.vue'
+import FwbModalExampleEscapable from './modal/examples/FwbModalExampleEscapable.vue'
+import FwbModalExamplePersistent from './modal/examples/FwbModalExamplePersistent.vue'
 </script>
 # Vue Modal - Flowbite
 
@@ -20,51 +20,53 @@ Get started with multiple sizes, colors, and styles built with the utility class
 
 ## Default modal
 
-<ModalExample />
-
+<fwb-modal-example />
 ```vue
-<script setup>
-import { Modal } from 'flowbite-vue'
+<template>
+  <fwb-button @click="showModal">
+    Open modal
+  </fwb-button>
+
+  <fwb-modal v-if="isShowModal" @close="closeModal">
+    <template #header>
+      <div class="flex items-center text-lg">
+        Terms of Service
+      </div>
+    </template>
+    <template #body>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+      </p>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+      </p>
+    </template>
+    <template #footer>
+      <div class="flex justify-between">
+        <fwb-button @click="closeModal" color="alternative">
+          Decline
+        </fwb-button>
+        <fwb-button @click="closeModal" color="green">
+          I accept
+        </fwb-button>
+      </div>
+    </template>
+  </fwb-modal>
+</template>
+
+<script lang="ts" setup>
 import { ref } from 'vue'
+import { FwbButton, FwbModal } from 'flowbite-vue'
 
 const isShowModal = ref(false)
-function closeModal() {
+
+function closeModal () {
   isShowModal.value = false
 }
-function showModal() {
+function showModal () {
   isShowModal.value = true
 }
 </script>
-<template>
-    <button @click="showModal" type="button" class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-        Show modal
-    </button>
-    <Modal :size="size" v-if="isShowModal" @close="closeModal">
-      <template #header>
-        <div class="flex items-center text-lg">
-          Terms of Service
-        </div>
-      </template>
-      <template #body>
-        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-          With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
-        </p>
-        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-          The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
-        </p>
-      </template>
-      <template #footer>
-        <div class="flex justify-between">
-          <button @click="closeModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
-            Decline
-          </button>
-          <button @click="closeModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-            I accept
-          </button>
-        </div>
-      </template>
-    </Modal>
-</template>
 ```
 
 ## Size
@@ -75,19 +77,18 @@ You can use four different modal sizing options starting from small to extra lar
 
 The default value is: `2xl`
 
-Demo:
-<ModalSizeExample/>
-
+<fwb-modal-example-size />
 ```vue
-<script setup>
-import { Modal } from 'flowbite-vue'
-</script>
 <template>
-    <Modal size="xs" />
-    <Modal size="md" />
-    <Modal size="xl" />
-    <Modal size="5xl" />
+  <fwb-modal size="xs" />
+  <fwb-modal size="md" />
+  <fwb-modal size="xl" />
+  <fwb-modal size="5xl" />
 </template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
 ```
 
 ## Escapable
@@ -100,49 +101,47 @@ This means that you may close the modal by
  - Clicking outside of the modal
  - Pressing the escape key
 
-In some situations, your user may be required to interact with the modal content. If this is the case, you can set the `escapable` property to false. The developer can then choose when they want to close the modal.
-
-Demo:
-<ModalEscapableExample/>
+In some situations, your user may be required to interact with the modal content. If this is the case, you can set the `not-escapable` property to `true`. The developer can then choose when they want to close the modal.
 
+<fwb-modal-example-escapable />
 ```vue
-<script setup>
-import { Modal } from 'flowbite-vue'
-</script>
 <template>
-    <Modal />
-    <Modal :escapable="false" />
+  <fwb-modal />
+  <fwb-modal not-escapable />
 </template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
 ```
 
 ## Persistent
 
 Clicking outside of the element or pressing esc key will not send `close` event.
 
-Demo:
-<ModalPersistentExample />
-
+<fwb-modal-example-persistent />
 ```vue
-<script setup>
-import { Modal } from 'flowbite-vue'
-</script>
 <template>
-    <Modal persistent />
+  <fwb-modal persistent />
 </template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
 ```
 
 ## API
 
 ### Props:
 
-| Name       | Values                                                    | Default |
-|------------|-----------------------------------------------------------|---------|
-| size       | `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` | 2xl     |
-| escapable  | `true`, `false`                                           | `true`  |
-| persistent | `true`, `false`                                           | `true`  |
+| Name         | Values                                                    | Default |
+|--------------|-----------------------------------------------------------|---------|
+| size         | `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` | 2xl     |
+| notEscapable | `true`, `false`                                           | `false` |
+| persistent   | `true`, `false`                                           | `true`  |
 
 ### Events:
-| Name                | Type                                                                             |
-|---------------------|----------------------------------------------------------------------------------|
-| `close`             | Clicked on the close button, pressed `Esc`, or clicked outside the modal content |
-| `click:outside`     | Clicked outside the modal content                                                |
+| Name            | Type                                                                             |
+|-----------------|----------------------------------------------------------------------------------|
+| `close`         | Clicked on the close button, pressed `Esc`, or clicked outside the modal content |
+| `click:outside` | Clicked outside the modal content                                                |
diff --git a/docs/components/modal/examples/ModalExample.vue b/docs/components/modal/examples/FwbModalExample.vue
similarity index 51%
rename from docs/components/modal/examples/ModalExample.vue
rename to docs/components/modal/examples/FwbModalExample.vue
index 9abf5ca7..3bfba80b 100644
--- a/docs/components/modal/examples/ModalExample.vue
+++ b/docs/components/modal/examples/FwbModalExample.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="vp-raw flex justify-start">
-    <button @click="showModal" type="button" class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+    <fwb-button @click="showModal">
       {{ triggerText }}
-    </button>
-    <Modal :escapable="escapable" :size="size" v-if="isShowModal" @close="closeModal" :persistent="persistent">
+    </fwb-button>
+    <fwb-modal
+      v-if="isShowModal"
+      :not-escapable="notEscapable"
+      :persistent="persistent"
+      :size="size"
+      @close="closeModal"
+    >
       <template #header>
         <div class="flex items-center text-lg">
           Terms of Service
@@ -19,40 +25,49 @@
       </template>
       <template #footer>
         <div class="flex justify-between">
-          <button @click="closeModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+          <fwb-button
+            color="alternative"
+            @click="closeModal"
+          >
             Decline
-          </button>
-          <button @click="closeModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          </fwb-button>
+          <fwb-button
+            color="green"
+            @click="closeModal"
+          >
             I accept
-          </button>
+          </fwb-button>
         </div>
       </template>
-    </Modal>
+    </fwb-modal>
   </div>
 </template>
 <script lang="ts" setup>
-import { Modal } from '../../../../src/index'
-import type { ModalSize } from '../../../../src/components/Modal/types'
 import { ref } from 'vue'
+import { FwbButton, FwbModal } from '../../../../src/index'
+import { type ModalSize } from '../../../../src/components/FwbModal/types'
 
 interface ModalProps {
   size?: ModalSize,
-  escapable?: boolean,
+  notEscapable?: boolean,
   persistent?: boolean,
   triggerText?: string
 }
+
 withDefaults(defineProps<ModalProps>(), {
   size: '2xl',
-  escapable: true,
+  notEscapable: false,
   persistent: false,
-  triggerText: 'Demo Modal',
+  triggerText: 'Open Modal',
 })
 
 const isShowModal = ref(false)
-function closeModal() {
+
+function closeModal () {
   isShowModal.value = false
 }
-function showModal() {
+
+function showModal () {
   isShowModal.value = true
 }
 </script>
diff --git a/docs/components/modal/examples/FwbModalExampleEscapable.vue b/docs/components/modal/examples/FwbModalExampleEscapable.vue
new file mode 100644
index 00000000..862ae5e7
--- /dev/null
+++ b/docs/components/modal/examples/FwbModalExampleEscapable.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex justify-start space-x-2">
+    <fwb-modal-example trigger-text="Escapable" />
+    <fwb-modal-example
+      not-escapable
+      trigger-text="Not Escapable"
+    />
+  </div>
+</template>
+
+<script setup>
+import FwbModalExample from './FwbModalExample.vue'
+</script>
diff --git a/docs/components/modal/examples/FwbModalExamplePersistent.vue b/docs/components/modal/examples/FwbModalExamplePersistent.vue
new file mode 100644
index 00000000..8e50d880
--- /dev/null
+++ b/docs/components/modal/examples/FwbModalExamplePersistent.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw">
+    <fwb-modal-example
+      persistent
+      trigger-text="Persistent"
+    />
+  </div>
+</template>
+
+<script setup>
+import FwbModalExample from './FwbModalExample.vue'
+</script>
diff --git a/docs/components/modal/examples/FwbModalExampleSize.vue b/docs/components/modal/examples/FwbModalExampleSize.vue
new file mode 100644
index 00000000..9a78dd3a
--- /dev/null
+++ b/docs/components/modal/examples/FwbModalExampleSize.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="vp-raw flex justify-start space-x-2">
+    <span>
+      <fwb-modal-example
+        size="xs"
+        trigger-text="SM Modal"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        size="md"
+        trigger-text="MD Modal"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        size="xl"
+        trigger-text="XL Modal"
+      />
+    </span>
+    <span>
+      <fwb-modal-example
+        size="5xl"
+        trigger-text="5XL Modal"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import FwbModalExample from './FwbModalExample.vue'
+</script>
diff --git a/docs/components/modal/examples/ModalEscapableExample.vue b/docs/components/modal/examples/ModalEscapableExample.vue
deleted file mode 100644
index bf5f58b7..00000000
--- a/docs/components/modal/examples/ModalEscapableExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="vp-raw flex justify-start space-x-2">
-    <span>
-      <ModalExample trigger-text="Escapable" />
-    </span>
-    <span>
-      <ModalExample :escapable="false" trigger-text="Not Escapable" />
-    </span>
-  </div>
-</template>
-<script setup>
-import ModalExample from './ModalExample.vue'
-</script>
diff --git a/docs/components/modal/examples/ModalPersistentExample.vue b/docs/components/modal/examples/ModalPersistentExample.vue
deleted file mode 100644
index 4db42b26..00000000
--- a/docs/components/modal/examples/ModalPersistentExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw">
-      <ModalExample trigger-text="Persistent" :persistent="true" />
-  </div>
-</template>
-<script setup>
-import ModalExample from './ModalExample.vue'
-</script>
diff --git a/docs/components/modal/examples/ModalSizeExample.vue b/docs/components/modal/examples/ModalSizeExample.vue
deleted file mode 100644
index 6d8b7a99..00000000
--- a/docs/components/modal/examples/ModalSizeExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw flex justify-start space-x-2">
-    <span>
-      <ModalExample size="xs" trigger-text="SM Modal" />
-    </span>
-    <span>
-      <ModalExample size="md" trigger-text="MD Modal" />
-    </span>
-    <span>
-      <ModalExample size="xl" trigger-text="XL Modal" />
-    </span>
-    <span>
-      <ModalExample size="5xl" trigger-text="5XL Modal" />
-    </span>
-  </div>
-</template>
-<script setup>
-import ModalExample from './ModalExample.vue'
-</script>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index efacfbad..44d5cf92 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -1,8 +1,8 @@
 <script setup>
-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'
+import FwbNavbarExample from './navbar/examples/FwbNavbarExample.vue'
+import FwbNavbarExampleSolid from './navbar/examples/FwbNavbarExampleSolid.vue'
+import FwbNavbarExampleActionButton from './navbar/examples/FwbNavbarExampleActionButton.vue'
+import FwbNavbarExampleCustomMobileIcon from './navbar/examples/FwbNavbarExampleCustomMobileIcon.vue'
 
 </script>
 # Vue Navbar – Flowbite
@@ -10,110 +10,171 @@ The navbar component can be used to show a list of navigation links positioned o
 
 ## Default navbar
 
+<fwb-navbar-example />
 ```vue
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
-</script>
 <template>
-    <Navbar>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink isActive link="#">Home</NavbarLink>
-          <NavbarLink link="#">Services</NavbarLink>
-          <NavbarLink link="#">Pricing</NavbarLink>
-          <NavbarLink link="#">Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-    </Navbar>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
 </template>
-```
 
-<NavbarExample />
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
+```
 
 ## Solid navbar
+
+<fwb-navbar-example-solid />
 ```vue
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
-</script>
 <template>
-    <Navbar solid>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink is-active>Home</NavbarLink>
-          <NavbarLink>Services</NavbarLink>
-          <NavbarLink>Pricing</NavbarLink>
-          <NavbarLink>Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-    </Navbar>
+  <fwb-navbar solid>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
 </template>
-```
 
-<NavbarSolidExample />
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
+```
 
 ## Navbar with action button
+
+<fwb-navbar-example-action-button />
 ```vue
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
-</script>
 <template>
-    <Navbar>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink is-active>Home</NavbarLink>
-          <NavbarLink>Services</NavbarLink>
-          <NavbarLink>Pricing</NavbarLink>
-          <NavbarLink>Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-      <template #right-side>
-        <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
-      </template>
-    </Navbar>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #right-side>
+      <fwb-button>
+        Get started
+      </fwb-button>
+    </template>
+  </fwb-navbar>
 </template>
-```
 
-<NavbarActionButtonExample />
+<script setup>
+import {
+  FwbButton,
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
+```
 
 ## Navbar with custom mobile icon
+
+<fwb-navbar-example-custom-mobile-icon />
 ```vue
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
-</script>
 <template>
-    <Navbar>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink is-active>Home</NavbarLink>
-          <NavbarLink>Services</NavbarLink>
-          <NavbarLink>Pricing</NavbarLink>
-          <NavbarLink>Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-      <template #menu-icon>
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
-      </template>
-    </Navbar>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #menu-icon>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-navbar>
 </template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue'
+</script>
 ```
-<NavbarCustomMobileIconExample />
diff --git a/docs/components/navbar/examples/FwbNavbarExample.vue b/docs/components/navbar/examples/FwbNavbarExample.vue
new file mode 100644
index 00000000..c42150eb
--- /dev/null
+++ b/docs/components/navbar/examples/FwbNavbarExample.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="vp-raw">
+    <fwb-navbar>
+      <template #logo>
+        <fwb-navbar-logo
+          alt="Flowbite logo"
+          image-url="https://flowbite.com/docs/images/logo.svg"
+          link="https://www.google.com/"
+        >
+          Flowbite
+        </fwb-navbar-logo>
+      </template>
+      <template #default="{isShowMenu}">
+        <fwb-navbar-collapse :is-show-menu="isShowMenu">
+          <fwb-navbar-link
+            is-active
+            link="#"
+          >
+            Home
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Services
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Pricing
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Contact
+          </fwb-navbar-link>
+        </fwb-navbar-collapse>
+      </template>
+    </fwb-navbar>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/navbar/examples/FwbNavbarExampleActionButton.vue b/docs/components/navbar/examples/FwbNavbarExampleActionButton.vue
new file mode 100644
index 00000000..5a240584
--- /dev/null
+++ b/docs/components/navbar/examples/FwbNavbarExampleActionButton.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="vp-raw">
+    <fwb-navbar>
+      <template #logo>
+        <fwb-navbar-logo
+          alt="Flowbite logo"
+          image-url="https://flowbite.com/docs/images/logo.svg"
+          link="https://www.google.com/"
+        >
+          Flowbite
+        </fwb-navbar-logo>
+      </template>
+      <template #default="{isShowMenu}">
+        <fwb-navbar-collapse :is-show-menu="isShowMenu">
+          <fwb-navbar-link
+            is-active
+            link="#"
+          >
+            Home
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Services
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Pricing
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Contact
+          </fwb-navbar-link>
+        </fwb-navbar-collapse>
+      </template>
+      <template #right-side>
+        <fwb-button>
+          Get started
+        </fwb-button>
+      </template>
+    </fwb-navbar>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbButton,
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/navbar/examples/FwbNavbarExampleCustomMobileIcon.vue b/docs/components/navbar/examples/FwbNavbarExampleCustomMobileIcon.vue
new file mode 100644
index 00000000..eb86a0d6
--- /dev/null
+++ b/docs/components/navbar/examples/FwbNavbarExampleCustomMobileIcon.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="vp-raw">
+    <fwb-navbar>
+      <template #logo>
+        <fwb-navbar-logo
+          alt="Flowbite logo"
+          image-url="https://flowbite.com/docs/images/logo.svg"
+          link="https://www.google.com/"
+        >
+          Flowbite
+        </fwb-navbar-logo>
+      </template>
+      <template #default="{isShowMenu}">
+        <fwb-navbar-collapse :is-show-menu="isShowMenu">
+          <fwb-navbar-link
+            is-active
+            link="#"
+          >
+            Home
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Services
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Pricing
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Contact
+          </fwb-navbar-link>
+        </fwb-navbar-collapse>
+      </template>
+      <template #menu-icon>
+        <svg
+          class="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+      </template>
+    </fwb-navbar>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/navbar/examples/FwbNavbarExampleSolid.vue b/docs/components/navbar/examples/FwbNavbarExampleSolid.vue
new file mode 100644
index 00000000..6329a47d
--- /dev/null
+++ b/docs/components/navbar/examples/FwbNavbarExampleSolid.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="vp-raw">
+    <fwb-navbar solid>
+      <template #logo>
+        <fwb-navbar-logo
+          alt="Flowbite logo"
+          image-url="https://flowbite.com/docs/images/logo.svg"
+          link="https://www.google.com/"
+        >
+          Flowbite
+        </fwb-navbar-logo>
+      </template>
+      <template #default="{isShowMenu}">
+        <fwb-navbar-collapse :is-show-menu="isShowMenu">
+          <fwb-navbar-link
+            is-active
+            link="#"
+          >
+            Home
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Services
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Pricing
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Contact
+          </fwb-navbar-link>
+        </fwb-navbar-collapse>
+      </template>
+    </fwb-navbar>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/navbar/examples/NavbarActionButtonExample.vue b/docs/components/navbar/examples/NavbarActionButtonExample.vue
deleted file mode 100644
index 1b63d8b2..00000000
--- a/docs/components/navbar/examples/NavbarActionButtonExample.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Navbar>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink is-active>Home</NavbarLink>
-          <NavbarLink>Services</NavbarLink>
-          <NavbarLink>Pricing</NavbarLink>
-          <NavbarLink>Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-      <template #right-side>
-        <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
-      </template>
-    </Navbar>
-  </div>
-</template>
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
-</script>
diff --git a/docs/components/navbar/examples/NavbarCustomMobileIconExample.vue b/docs/components/navbar/examples/NavbarCustomMobileIconExample.vue
deleted file mode 100644
index 7d6d71bd..00000000
--- a/docs/components/navbar/examples/NavbarCustomMobileIconExample.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Navbar>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink is-active>Home</NavbarLink>
-          <NavbarLink>Services</NavbarLink>
-          <NavbarLink>Pricing</NavbarLink>
-          <NavbarLink>Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-      <template #menu-icon>
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
-      </template>
-    </Navbar>
-  </div>
-</template>
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
-</script>
diff --git a/docs/components/navbar/examples/NavbarExample.vue b/docs/components/navbar/examples/NavbarExample.vue
deleted file mode 100644
index 2cf866c7..00000000
--- a/docs/components/navbar/examples/NavbarExample.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Navbar>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink isActive link="#">Home</NavbarLink>
-          <NavbarLink link="#">Services</NavbarLink>
-          <NavbarLink link="#">Pricing</NavbarLink>
-          <NavbarLink link="#">Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-    </Navbar>
-  </div>
-</template>
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
-</script>
diff --git a/docs/components/navbar/examples/NavbarSolidExample.vue b/docs/components/navbar/examples/NavbarSolidExample.vue
deleted file mode 100644
index fd2608f0..00000000
--- a/docs/components/navbar/examples/NavbarSolidExample.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Navbar solid>
-      <template #logo>
-        <NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
-          Flowbite
-        </NavbarLogo>
-      </template>
-      <template #default="{isShowMenu}">
-        <NavbarCollapse :isShowMenu="isShowMenu">
-          <NavbarLink is-active>Home</NavbarLink>
-          <NavbarLink>Services</NavbarLink>
-          <NavbarLink>Pricing</NavbarLink>
-          <NavbarLink>Contact</NavbarLink>
-        </NavbarCollapse>
-      </template>
-    </Navbar>
-  </div>
-</template>
-<script setup>
-import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
-</script>
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 68e6f2c6..6480a1ff 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -1,11 +1,11 @@
 <script setup>
-import PaginationExample from './pagination/examples/PaginationExample.vue';
-import PaginationNavigationExample from './pagination/examples/PaginationNavigationExample.vue';
-import PaginationTableExample from './pagination/examples/PaginationTableExample.vue';
-import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
-import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
-import PaginationWithCustomSlice from './pagination/examples/PaginationWithCustomSlice.vue';
-import PaginationSlotsExample from './pagination/examples/PaginationSlotsExample.vue';
+import PaginationExample from './pagination/examples/FwbPaginationExample.vue';
+import PaginationNavigationExample from './pagination/examples/FwbPaginationExampleNavigation.vue';
+import PaginationTableExample from './pagination/examples/FwbPaginationExampleTable.vue';
+import PaginationWithIconsExample from './pagination/examples/FwbPaginationExampleWithIcons.vue';
+import PaginationWithCustomTextExample from './pagination/examples/FwbPaginationExampleWithCustomText.vue';
+import PaginationWithCustomSlice from './pagination/examples/FwbPaginationExampleWithCustomSlice.vue';
+import PaginationSlotsExample from './pagination/examples/FwbPaginationExampleSlots.vue';
 </script>
 # Vue Pagination - Flowbite
 #### Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
@@ -18,14 +18,14 @@ Use the following list of pagination items based on two sizes powered by Tailwin
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-items="100"></Pagination>
-  <Pagination v-model="currentPage" :total-items="100" large></Pagination>
+  <fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
+  <fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
 </template>
 ```
 
@@ -36,13 +36,13 @@ The following pagination component example shows how you can use SVG icons inste
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
+  <fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
 </template>
 ```
 
@@ -57,13 +57,13 @@ This prop means left side and right side pages row slicing. In the example it ha
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
+  <fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
 </template>
 ```
 
@@ -73,14 +73,14 @@ const currentPage = ref(1)
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
   <div class="flex items-center justify-center text-center">
-    <Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
+    <fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
   </div>
 </template>
 ```
@@ -88,7 +88,7 @@ const currentPage = ref(1)
 <PaginationNavigationExample />
 
 ## Pagination with table layout
-To use that layout you have to pass required props: 
+To use that layout you have to pass required props:
 - `per-page`: it's items count displayed on each page.
 - `total-items`: it's the total items count.
 
@@ -96,15 +96,15 @@ And there you don't need to use `total-pages` prop.
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
   <div class="flex items-center justify-center text-center">
-    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
-    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
   </div>
 </template>
 ```
@@ -115,13 +115,13 @@ const currentPage = ref(1)
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
+  <fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
 </template>
 ```
 <PaginationWithCustomTextExample />
@@ -133,13 +133,13 @@ const currentPage = ref(1)
 
 ```vue
 <script setup>
-import { Pagination } from 'flowbite-vue'
+import { FwbPagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-items="100" :show-labels="false">
+  <fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
     <template #prev-icon>⬅️</template>
     <template #next-icon>➡️</template>
     <template v-slot:page-button="{ page, setPage }">
@@ -150,7 +150,7 @@ const currentPage = ref(1)
         {{ page }}
       </button>
     </template>
-  </Pagination>
+  </fwb-pagination>
   Current page: {{ currentPage }}
 </template>
 ```
diff --git a/docs/components/pagination/examples/FwbPaginationExample.vue b/docs/components/pagination/examples/FwbPaginationExample.vue
new file mode 100644
index 00000000..ad31ba8e
--- /dev/null
+++ b/docs/components/pagination/examples/FwbPaginationExample.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw flex flex-col items-center">
+    <fwb-pagination
+      v-model="currentPage"
+      :total-items="100"
+      class="mb-2"
+    />
+    <fwb-pagination
+      v-model="currentPage"
+      :total-items="100"
+      large
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { FwbPagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/FwbPaginationExampleNavigation.vue b/docs/components/pagination/examples/FwbPaginationExampleNavigation.vue
new file mode 100644
index 00000000..0798bc88
--- /dev/null
+++ b/docs/components/pagination/examples/FwbPaginationExampleNavigation.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw flex justify-center">
+    <fwb-pagination
+      v-model="currentPage"
+      :layout="'navigation'"
+      :total-pages="100"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbPagination } from '../../../../src/index'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/PaginationSlotsExample.vue b/docs/components/pagination/examples/FwbPaginationExampleSlots.vue
similarity index 64%
rename from docs/components/pagination/examples/PaginationSlotsExample.vue
rename to docs/components/pagination/examples/FwbPaginationExampleSlots.vue
index 20fbc6f0..ff5d58f7 100644
--- a/docs/components/pagination/examples/PaginationSlotsExample.vue
+++ b/docs/components/pagination/examples/FwbPaginationExampleSlots.vue
@@ -1,22 +1,30 @@
 <template>
   <div class="vp-raw flex flex-col items-center">
-    <Pagination v-model="currentPage" :total-items="100" :show-labels="false">
-      <template #prev-icon>⬅️</template>
-      <template #next-icon>➡️</template>
-      <template v-slot:page-button="{ page, setPage }">
+    <fwb-pagination
+      v-model="currentPage"
+      :total-items="100"
+      :show-labels="false"
+    >
+      <template #prev-icon>
+        ⬅️
+      </template>
+      <template #next-icon>
+        ➡️
+      </template>
+      <template #page-button="{ page, setPage }">
         <button
-          @click="setPage(page)"
           class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          @click="setPage(page)"
         >
           {{ page }}
         </button>
       </template>
-    </Pagination>
+    </fwb-pagination>
     Current page: {{ currentPage }}
   </div>
 </template>
 <script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
+import { FwbPagination } from '../../../../src/index'
 import { ref } from 'vue'
 
 const currentPage = ref<number>(1)
diff --git a/docs/components/pagination/examples/FwbPaginationExampleTable.vue b/docs/components/pagination/examples/FwbPaginationExampleTable.vue
new file mode 100644
index 00000000..83a09f70
--- /dev/null
+++ b/docs/components/pagination/examples/FwbPaginationExampleTable.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="vp-raw flex flex-col items-center justify-center text-center">
+    <fwb-pagination
+      v-model="currentPage"
+      :layout="'table'"
+      :per-page="20"
+      :total-items="998"
+      class="mb-2"
+    />
+    <fwb-pagination
+      v-model="currentPage"
+      :layout="'table'"
+      :per-page="20"
+      :total-items="998"
+      large
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbPagination } from '../../../../src/index'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/FwbPaginationExampleWithCustomSlice.vue b/docs/components/pagination/examples/FwbPaginationExampleWithCustomSlice.vue
new file mode 100644
index 00000000..7669c572
--- /dev/null
+++ b/docs/components/pagination/examples/FwbPaginationExampleWithCustomSlice.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw flex justify-center">
+    <fwb-pagination
+      v-model="currentPage"
+      :slice-length="4"
+      :total-pages="100"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbPagination } from '../../../../src/index'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/FwbPaginationExampleWithCustomText.vue b/docs/components/pagination/examples/FwbPaginationExampleWithCustomText.vue
new file mode 100644
index 00000000..bfda4c39
--- /dev/null
+++ b/docs/components/pagination/examples/FwbPaginationExampleWithCustomText.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw flex justify-center">
+    <fwb-pagination
+      v-model="currentPage"
+      :total-pages="100"
+      previous-label="<<<"
+      next-label=">>>"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbPagination } from '../../../../src/index'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/FwbPaginationExampleWithIcons.vue b/docs/components/pagination/examples/FwbPaginationExampleWithIcons.vue
new file mode 100644
index 00000000..4d57134b
--- /dev/null
+++ b/docs/components/pagination/examples/FwbPaginationExampleWithIcons.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="vp-raw flex flex-col items-center">
+    <fwb-pagination
+      v-model="currentPage"
+      :total-pages="100"
+      :show-labels="false"
+      class="mb-2"
+    >
+      <template #prev-icon>
+        <span class="sr-only">Previous</span>
+        <svg
+          class="w-2.5 h-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 6 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M5 1 1 5l4 4"
+          />
+        </svg>
+      </template>
+      <template #next-icon>
+        <span class="sr-only">Next</span>
+        <svg
+          class="w-2.5 h-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 6 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 9 4-4-4-4"
+          />
+        </svg>
+      </template>
+    </fwb-pagination>
+    <fwb-pagination
+      v-model="currentPage"
+      :total-pages="100"
+      :show-labels="false"
+      large
+    >
+      <template #prev-icon>
+        <span class="sr-only">Previous</span>
+        <svg
+          class="w-2.5 h-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 6 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M5 1 1 5l4 4"
+          />
+        </svg>
+      </template>
+      <template #next-icon>
+        <span class="sr-only">Next</span>
+        <svg
+          class="w-2.5 h-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 6 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 9 4-4-4-4"
+          />
+        </svg>
+      </template>
+    </fwb-pagination>
+  </div>
+</template>
+<script lang="ts" setup>
+import { FwbPagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue
deleted file mode 100644
index a5a4b9d4..00000000
--- a/docs/components/pagination/examples/PaginationExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col items-center">
-    <Pagination v-model="currentPage" :total-items="100" class="mb-2"></Pagination>
-    <Pagination v-model="currentPage" :total-items="100" large></Pagination>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
-import { ref } from 'vue'
-
-const currentPage = ref<number>(1)
-</script>
diff --git a/docs/components/pagination/examples/PaginationNavigationExample.vue b/docs/components/pagination/examples/PaginationNavigationExample.vue
deleted file mode 100644
index aadd1bf7..00000000
--- a/docs/components/pagination/examples/PaginationNavigationExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="vp-raw flex items-center justify-center text-center">
-    <Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
-import { ref } from 'vue'
-
-const currentPage = ref<number>(1)
-</script>
diff --git a/docs/components/pagination/examples/PaginationTableExample.vue b/docs/components/pagination/examples/PaginationTableExample.vue
deleted file mode 100644
index 244de3ec..00000000
--- a/docs/components/pagination/examples/PaginationTableExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col items-center justify-center text-center">
-    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
-    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
-  </div>
-</template>
-<script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
-import { ref } from 'vue'
-
-const currentPage = ref<number>(1)
-</script>
diff --git a/docs/components/pagination/examples/PaginationWithCustomSlice.vue b/docs/components/pagination/examples/PaginationWithCustomSlice.vue
deleted file mode 100644
index c2abdfc1..00000000
--- a/docs/components/pagination/examples/PaginationWithCustomSlice.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="vp-raw flex items-center justify-center">
-    <Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
-import { ref } from 'vue'
-
-const currentPage = ref<number>(1)
-</script>
diff --git a/docs/components/pagination/examples/PaginationWithCustomTextExample.vue b/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
deleted file mode 100644
index f450695d..00000000
--- a/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col items-center">
-    <Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
-import { ref } from 'vue'
-
-const currentPage = ref<number>(1)
-</script>
diff --git a/docs/components/pagination/examples/PaginationWithIconsExample.vue b/docs/components/pagination/examples/PaginationWithIconsExample.vue
deleted file mode 100644
index 8a1c0359..00000000
--- a/docs/components/pagination/examples/PaginationWithIconsExample.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col items-center">
-    <Pagination v-model="currentPage" :total-pages="100" :show-labels="false" class="mb-2">
-      <template #prev-icon>
-        <span class="sr-only">Previous</span>
-        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
-        </svg>
-      </template>
-      <template #next-icon>
-        <span class="sr-only">Next</span>
-        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
-        </svg>
-      </template>
-    </Pagination>
-    <Pagination v-model="currentPage" :total-pages="100" :show-labels="false" large>
-      <template #prev-icon>
-        <span class="sr-only">Previous</span>
-        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
-        </svg>
-      </template>
-      <template #next-icon>
-        <span class="sr-only">Next</span>
-        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
-        </svg>
-      </template>
-    </Pagination>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Pagination } from '../../../../src/index'
-import { ref } from 'vue'
-
-const currentPage = ref<number>(1)
-</script>
diff --git a/docs/components/paragraph.md b/docs/components/paragraph.md
index 29a79258..a08927b7 100644
--- a/docs/components/paragraph.md
+++ b/docs/components/paragraph.md
@@ -1,8 +1,8 @@
 <script setup>
-import P from './typography/p/P.vue'
-import PWeight from './typography/p/PWeight.vue'
-import PAlign from './typography/p/PAlign.vue'
-import PCustom from './typography/p/PCustom.vue'
+import FwbPExample from './typography/p/FwbPExample.vue'
+import FwbPExampleAlign from './typography/p/FwbPExampleAlign.vue'
+import FwbPExampleCustom from './typography/p/FwbPExampleCustom.vue'
+import FwbPExampleWeight from './typography/p/FwbPExampleWeight.vue'
 </script>
 
 # Vue Paragraph - Flowbite
@@ -15,22 +15,26 @@ Use this example of a paragraph element to use inside article content or a landi
 
 ```vue
 <template>
-  <P class="mb-2">
-    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
-    have richer contextual information to rapidly respond to requests, incidents, and changes.
-  </P>
-  <P>
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+  <fwb-p class="mb-2">
+    Track work across the enterprise through an open, collaborative platform.
+    Link issues across Jira and ingest data from other software development
+    tools, so your IT support and operations teams have richer contextual
+    information to rapidly respond to requests, incidents, and changes.
+  </fwb-p>
+  <fwb-p>
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
-  </P>
+  </fwb-p>
 </template>
 
 <script setup>
-import P from 'flowbite-vue'
+import { FwbP } from 'flowbite-vue'
 </script>
 ```
 
-<P />
+<fwb-p-example />
 
 ## Weight
 
@@ -38,22 +42,26 @@ Use `weight` prop to set the text-weight.
 
 ```vue
 <template>
-  <P class="mb-2" weight="light">
-    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
-    have richer contextual information to rapidly respond to requests, incidents, and changes.
-  </P>
-  <P weight="light">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+  <fwb-p class="mb-2" weight="light">
+    Track work across the enterprise through an open, collaborative platform.
+    Link issues across Jira and ingest data from other software development
+    tools, so your IT support and operations teams have richer contextual
+    information to rapidly respond to requests, incidents, and changes.
+  </fwb-p>
+  <fwb-p weight="bold">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
-  </P>
+  </fwb-p>
 </template>
 
 <script setup>
-import P from 'flowbite-vue'
+import { FwbP } from 'flowbite-vue'
 </script>
 ```
 
-<PWeight />
+<fwb-p-example-weight />
 
 ## Alignment
 
@@ -61,18 +69,32 @@ Use `align` prop to set the text alignment.
 
 ```vue
 <template>
-  <P align="center">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+  <fwb-p  align="left" class="mb-2">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
-  </P>
+  </fwb-p>
+  <fwb-p align="center" class="mb-2">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
+  <fwb-p align="right" class="mb-2">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
+    audit trail for every change.
+  </fwb-p>
 </template>
 
 <script setup>
-import P from 'flowbite-vue'
+import { FwbP } from 'flowbite-vue'
 </script>
 ```
 
-<PAlign />
+<fwb-p-example-align />
 
 ## Custom classes
 
@@ -80,15 +102,17 @@ Use `class` attribute to apply the tailwind classes.
 
 ```vue
 <template>
-  <P class="!text-green-400 italic">
-    Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
+  <fwb-p class="text-green-600 dark:text-green-400 italic">
+    Deliver great service experiences fast - without the complexityof
+    traditional ITSM solutions. Accelerate critical development work,
+    eliminate toil, and deploy changes with ease, with a complete
     audit trail for every change.
-  </P>
+  </fwb-p>
 </template>
 
 <script setup>
-import P from 'flowbite-vue'
+import { FwbP } from 'flowbite-vue'
 </script>
 ```
 
-<PCustom />
+<fwb-p-example-custom />
diff --git a/docs/components/progress.md b/docs/components/progress.md
index 6e03ef08..9c147192 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -1,9 +1,9 @@
 <script setup>
-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'
+import FwbProgressExample from './progress/examples/FwbProgressExample.vue'
+import FwbProgressExampleColor from './progress/examples/FwbProgressExampleColor.vue'
+import FwbProgressExampleLabelInside from './progress/examples/FwbProgressExampleLabelInside.vue'
+import FwbProgressExampleLabelOutside from './progress/examples/FwbProgressExampleLabelOutside.vue'
+import FwbProgressExampleSize from './progress/examples/FwbProgressExampleSize.vue'
 
 
 </script>
@@ -11,92 +11,93 @@ import ProgressColorExample from './progress/examples/ProgressColorExample.vue'
 
 ## Default
 
+<fwb-progress-example />
 ```vue
-<script setup>
-import { Progress } from 'flowbite-vue'
-</script>
 <template>
-  <Progress progress="45"></Progress>
+  <fwb-progress :progress="45" />
 </template>
-```
 
-<ProgressExample />
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
+```
 
 ## Sizes
 You can also use different sizes by using various sizing.
 
+<fwb-progress-example-size />
 ```vue
-<script setup>
-import { Progress } from 'flowbite-vue'
-</script>
 <template>
-  <!-- small size -->
-  <Progress size="sm" label="Small" progress="45"></Progress>
-  <!-- medium size -->
-  <Progress size="md" label="Medium" progress="45"></Progress>
-  <!-- large size -->
-  <Progress size="lg" label="Large" progress="45"></Progress>
-  <!-- extra large size -->
-  <Progress size="xl" label="Extra Large" progress="45"></Progress>
+  <div class="grid gap-2">
+    <fwb-progress :progress="25" size="sm" label="Small" />
+    <fwb-progress :progress="50" size="md" label="Medium" />
+    <fwb-progress :progress="75" size="lg" label="Large" />
+    <fwb-progress :progress="100" size="xl" label="Extra Large" />
+  </div>
 </template>
-```
 
-<ProgressSizeExample />
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
+```
 
 ## With label inside
 Here is an example of using a progress bar with the label inside the bar.
 
+<fwb-progress-example-label-inside />
 ```vue
-<script setup>
-import { Progress } from 'flowbite-vue'
-</script>
 <template>
-  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
+  <fwb-progress
+    :progress="50"
+    label-position="inside"
+    label-progress
+    size="lg"
+  />
 </template>
-```
 
-<ProgressInsideLabelExample />
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
+```
 
 ## With label outside
 And this is an example of using a progress bar outside the bar.
 
+<fwb-progress-example-label-outside />
 ```vue
-<script setup>
-import { Progress } from 'flowbite-vue'
-</script>
 <template>
-  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+  <fwb-progress
+    :progress="42"
+    label-position="outside"
+    label-progress
+    label="Flowbite Vue 3"
+  />
 </template>
-```
 
-<ProgressOutsideLabelExample />
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
+```
 
 ## Colors
 You can also apply color.
 
+<fwb-progress-example-color />
 ```vue
-<script setup>
-import { Progress } from 'flowbite-vue'
-</script>
 <template>
-  <!-- Default color -->
-  <Progress label="Default" progress="45"></Progress>
-  <!-- Dark -->
-  <Progress color="dark" label="Dark" progress="45"></Progress>
-  <!-- Blue -->
-  <Progress color="blue" label="Blue" progress="45"></Progress>
-  <!-- Red -->
-  <Progress color="red" label="Red" progress="45"></Progress>
-  <!-- Green -->
-  <Progress color="green" label="Green" progress="45"></Progress>
-  <!-- Yellow -->
-  <Progress color="yellow" label="Yellow" progress="45"></Progress>
-  <!-- Indigo -->
-  <Progress color="indigo" label="Indigo" progress="45"></Progress>
-  <!-- Purple -->
-  <Progress color="purple" label="Purple" progress="45"></Progress>
-
+  <div class="grid gap-2">
+    <fwb-progress :progress="12.5" label="Default"  />
+    <fwb-progress :progress="25" color="dark" label="Dark"  />
+    <fwb-progress :progress="37.5" color="blue" label="Blue"  />
+    <fwb-progress :progress="50" color="red" label="Red"  />
+    <fwb-progress :progress="62.5" color="green" label="Green"  />
+    <fwb-progress :progress="75" color="yellow" label="Yellow"  />
+    <fwb-progress :progress="87.5" color="indigo" label="Indigo"  />
+    <fwb-progress :progress="100" color="purple" label="Purple"  />
+  </div>
 </template>
-```
 
-<ProgressColorExample />
+<script setup>
+import { FwbProgress } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/progress/examples/FwbProgressExample.vue b/docs/components/progress/examples/FwbProgressExample.vue
new file mode 100644
index 00000000..ca926055
--- /dev/null
+++ b/docs/components/progress/examples/FwbProgressExample.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="vp-raw">
+    <fwb-progress :progress="45" />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from '../../../../src/index'
+</script>
diff --git a/docs/components/progress/examples/FwbProgressExampleColor.vue b/docs/components/progress/examples/FwbProgressExampleColor.vue
new file mode 100644
index 00000000..1320a02a
--- /dev/null
+++ b/docs/components/progress/examples/FwbProgressExampleColor.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-progress
+      label="Default"
+      :progress="12.5"
+    />
+    <fwb-progress
+      color="dark"
+      label="Dark"
+      :progress="25"
+    />
+    <fwb-progress
+      color="blue"
+      label="Blue"
+      :progress="37.5"
+    />
+    <fwb-progress
+      color="red"
+      label="Red"
+      :progress="50"
+    />
+    <fwb-progress
+      color="green"
+      label="Green"
+      :progress="62.5"
+    />
+    <fwb-progress
+      color="yellow"
+      label="Yellow"
+      :progress="75"
+    />
+    <fwb-progress
+      color="indigo"
+      label="Indigo"
+      :progress="87.5"
+    />
+    <fwb-progress
+      color="purple"
+      label="Purple"
+      :progress="100"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from '../../../../src/index'
+</script>
diff --git a/docs/components/progress/examples/FwbProgressExampleLabelInside.vue b/docs/components/progress/examples/FwbProgressExampleLabelInside.vue
new file mode 100644
index 00000000..d57ba862
--- /dev/null
+++ b/docs/components/progress/examples/FwbProgressExampleLabelInside.vue
@@ -0,0 +1,12 @@
+<template>
+  <fwb-progress
+    :progress="50"
+    label-position="inside"
+    label-progress
+    size="lg"
+  />
+</template>
+
+<script setup>
+import { FwbProgress } from '../../../../src/index'
+</script>
diff --git a/docs/components/progress/examples/FwbProgressExampleLabelOutside.vue b/docs/components/progress/examples/FwbProgressExampleLabelOutside.vue
new file mode 100644
index 00000000..1e8da10a
--- /dev/null
+++ b/docs/components/progress/examples/FwbProgressExampleLabelOutside.vue
@@ -0,0 +1,12 @@
+<template>
+  <fwb-progress
+    :progress="42"
+    label-position="outside"
+    label-progress
+    label="Flowbite Vue 3"
+  />
+</template>
+
+<script setup>
+import { FwbProgress } from '../../../../src/index'
+</script>
diff --git a/docs/components/progress/examples/FwbProgressExampleSize.vue b/docs/components/progress/examples/FwbProgressExampleSize.vue
new file mode 100644
index 00000000..5c714ce5
--- /dev/null
+++ b/docs/components/progress/examples/FwbProgressExampleSize.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-progress
+      :progress="25"
+      label="Small"
+      size="sm"
+    />
+    <fwb-progress
+      :progress="50"
+      label="Medium"
+      size="md"
+    />
+    <fwb-progress
+      :progress="75"
+      label="Large"
+      size="lg"
+    />
+    <fwb-progress
+      :progress="100"
+      label="Extra Large"
+      size="xl"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbProgress } from '../../../../src/index'
+</script>
diff --git a/docs/components/progress/examples/ProgressColorExample.vue b/docs/components/progress/examples/ProgressColorExample.vue
deleted file mode 100644
index 75f7bcab..00000000
--- a/docs/components/progress/examples/ProgressColorExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col grid gap-4">
-    <Progress label="Default" progress="45"></Progress>
-    <Progress color="dark" label="Dark" progress="45"></Progress>
-    <Progress color="blue" label="Blue" progress="45"></Progress>
-    <Progress color="red" label="Red" progress="45"></Progress>
-    <Progress color="green" label="Green" progress="45"></Progress>
-    <Progress color="yellow" label="Yellow" progress="45"></Progress>
-    <Progress color="indigo" label="Indigo" progress="45"></Progress>
-    <Progress color="purple" label="Purple" progress="45"></Progress>
-  </div>
-</template>
-<script setup>
-import { Progress } from '../../../../src/index'
-</script>
diff --git a/docs/components/progress/examples/ProgressExample.vue b/docs/components/progress/examples/ProgressExample.vue
deleted file mode 100644
index bd62efb4..00000000
--- a/docs/components/progress/examples/ProgressExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Progress progress="45"></Progress>
-  </div>
-</template>
-<script setup>
-import { Progress } from '../../../../src/index'
-</script>
diff --git a/docs/components/progress/examples/ProgressInsideLabelExample.vue b/docs/components/progress/examples/ProgressInsideLabelExample.vue
deleted file mode 100644
index 08e7a38e..00000000
--- a/docs/components/progress/examples/ProgressInsideLabelExample.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
-</template>
-<script setup>
-import { Progress } from '../../../../src/index'
-</script>
diff --git a/docs/components/progress/examples/ProgressOutsideLabelExample.vue b/docs/components/progress/examples/ProgressOutsideLabelExample.vue
deleted file mode 100644
index b356812a..00000000
--- a/docs/components/progress/examples/ProgressOutsideLabelExample.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
-</template>
-<script setup>
-import { Progress } from '../../../../src/index'
-</script>
diff --git a/docs/components/progress/examples/ProgressSizeExample.vue b/docs/components/progress/examples/ProgressSizeExample.vue
deleted file mode 100644
index 4c503348..00000000
--- a/docs/components/progress/examples/ProgressSizeExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="flex flex-col grid gap-4">
-    <Progress size="sm" label="Small" progress="45"></Progress>
-    <Progress size="md" label="Medium" progress="45"></Progress>
-    <Progress size="lg" label="Large" progress="45"></Progress>
-    <Progress size="xl" label="Extra Large" progress="45"></Progress>
-  </div>
-</template>
-<script setup>
-import { Progress } from '../../../../src/index'
-</script>
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 6e1118d2..37241b47 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -1,11 +1,11 @@
 <script setup>
-import DefaultRadio from './radio/examples/DefaultRadio.vue'
-import DisabledRadio from './radio/examples/DisabledRadio.vue'
-import ListRadio from './radio/examples/ListRadio.vue'
-import HorizontalListRadio from './radio/examples/HorizontalListRadio.vue'
-import InlineRadio from './radio/examples/InlineRadio.vue'
-import LinkRadio from './radio/examples/LinkRadio.vue'
-import BorderedRadio from './radio/examples/BorderedRadio.vue'
+import FwbRadioExample from './radio/examples/FwbRadioExample.vue'
+import FwbRadioExampleBordered from './radio/examples/FwbRadioExampleBordered.vue'
+import FwbRadioExampleDisabled from './radio/examples/FwbRadioExampleDisabled.vue'
+import FwbRadioExampleInline from './radio/examples/FwbRadioExampleInline.vue'
+import FwbRadioExampleLink from './radio/examples/FwbRadioExampleLink.vue'
+import FwbRadioExampleList from './radio/examples/FwbRadioExampleList.vue'
+import FwbRadioExampleListHorizontal from './radio/examples/FwbRadioExampleListHorizontal.vue'
 </script>
 
 # Vue Toggle Radio - Flowbite
@@ -20,113 +20,216 @@ Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.co
 
 ## Radio examples
 
+<fwb-radio-example />
 ```vue
 <template>
-  <div>
-    <Radio name="default radio" v-model="picked" value="one" label="Default radio" />
-    <Radio name="default radio" v-model="picked" value="two" label="Checked state" />
-  </div>
+  <fwb-radio v-model="picked" name="radio" label="Radio 1" value="one" />
+  <fwb-radio v-model="picked" name="radio" label="Radio 2" value="two" />
 </template>
 
 <script setup>
-import Radio from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
 
-const picked = ref('one')
+const picked = ref()
 </script>
 ```
 
-<DefaultRadio />
-
 ## Disabled Radio
 
+<fwb-radio-example-disabled />
 ```vue
 <template>
-  <div>
-    <Radio name="disabled-radio" v-model="picked" value="one" label="Disabled radio" :disabled="true" />
-    <Radio name="disabled-radio" v-model="picked" value="two" label="Disabled checked" :disabled="true" />
-  </div>
+  <fwb-radio
+    v-model="picked"
+    disabled
+    label="Disabled radio"
+    name="radio-disabled"
+    value="one"
+  />
+  <fwb-radio
+    v-model="picked"
+    disabled
+    label="Disabled checked"
+    name="radio-disabled"
+    value="two"
+  />
 </template>
-```
 
-<DisabledRadio />
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('two')
+</script>
+```
 
 ## Radio list group
 
+<fwb-radio-example-list />
 ```vue
 <template>
-  <div>
-    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked }}</span></p>
-    <ul class="w-48 !p-0 text-sm text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="svelte" label="Svelte" /></li>
-      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="vue" label="Vue JS" /></li>
-      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="react" label="React" /></li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="list-radio" v-model="picked" value="angular" label="Angular" /></li>
-    </ul>
-  </div>
+  <fwb-p class="mb-2">
+    Technology {{ picked }}
+  </fwb-p>
+
+  <fwb-list-group>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Svelte"
+        name="list-radio"
+        value="Svelte"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Vue JS"
+        name="list-radio"
+        value="Vue JS"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="React"
+        name="list-radio"
+        value="React"
+      />
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-radio
+        v-model="picked"
+        label="Angular"
+        name="list-radio"
+        value="Angular"
+      />
+    </fwb-list-group-item>
+  </fwb-list-group>
 </template>
-```
 
-<ListRadio />
+<script setup>
+import { ref } from 'vue'
+import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from 'flowbite-vue'
+
+const picked = ref('Vue JS')
+</script>
+```
 
 ## Horizontal list group
 
+<fwb-radio-example-list-horizontal />
 ```vue
 <template>
-  <div>
-    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked1 }}</span></p>
-    <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="svelte" label="Svelte" /></li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="vue" label="Vue JS" /></li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="react" label="React" /></li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600"><Radio name="hor-radio" v-model="picked1" value="angular" label="Angular" /></li>
-    </ul>
-  </div>
+  <fwb-p class="mb-2">
+    Technology {{ picked }}
+  </fwb-p>
+  <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Svelte"
+        name="radio-horizontal"
+        value="Svelte"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Vue JS"
+        name="radio-horizontal"
+        value="Vue JS"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="React"
+        name="radio-horizontal"
+        value="React"
+      />
+    </li>
+    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+      <fwb-radio
+        v-model="picked"
+        label="Angular"
+        name="radio-horizontal"
+        value="Angular"
+      />
+    </li>
+  </ul>
 </template>
-```
 
-<HorizontalListRadio />
+<script setup>
+import { ref } from 'vue'
+import { FwbP, FwbRadio } from 'flowbite-vue'
+
+const picked = ref('svelte')
+</script>
+```
 
 ## Inline Radio
 
+<fwb-radio-example-inline />
 ```vue
 <template>
   <div class="flex w-96">
-    <Radio v-model="picked" value="first" label="Inline 1" />
-    <Radio v-model="picked" value="sec" label="Inline 2" />
-    <Radio v-model="picked" value="third" label="Inline 3" />
-    <Radio v-model="picked" value="fourth" label="Inline 4" />
+    <fwb-radio v-model="picked" label="Inline 1" value="first" />
+    <fwb-radio v-model="picked" label="Inline 2" value="second" />
+    <fwb-radio v-model="picked" label="Inline 3" value="third" />
+    <fwb-radio v-model="picked" label="Inline 4" value="fourth" />
   </div>
 </template>
-```
 
-<InlineRadio />
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('first')
+</script>
+```
 
 ## Radio with a link
 
+<fwb-radio-example-link />
 ```vue
 <template>
-  <Radio v-model="picked" value="first" name="with-link">
-    I agree with the <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">terms and conditions</a>.
-  </Radio>
+  <fwb-radio v-model="picked" name="with-link" value="first">
+    I agree with the
+    <fwb-a class="ml-1" href="#">
+      terms and conditions
+    </fwb-a>.
+  </fwb-radio>
 </template>
-```
 
-<LinkRadio />
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbRadio } from 'flowbite-vue'
+
+const picked = ref()
+</script>
+```
 
 ## Bordered Radio
 
+<fwb-radio-example-bordered />
 ```vue
 <template>
   <div class="grid grid-cols-2 gap-6">
     <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
-      <Radio v-model="picked" value="fs" label="Radio 1" />
+      <fwb-radio v-model="picked" label="Radio 1" name="radio-bordered" value="one" />
     </div>
     <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
-      <Radio v-model="picked" value="sec" label="Radio 2" />
+      <fwb-radio v-model="picked" label="Radio 2" name="radio-bordered" value="two" />
     </div>
   </div>
 </template>
-```
 
-<BorderedRadio />
\ No newline at end of file
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from 'flowbite-vue'
+
+const picked = ref('one')
+</script>
+```
diff --git a/docs/components/radio/examples/BorderedRadio.vue b/docs/components/radio/examples/BorderedRadio.vue
index b398d510..e69de29b 100644
--- a/docs/components/radio/examples/BorderedRadio.vue
+++ b/docs/components/radio/examples/BorderedRadio.vue
@@ -1,17 +0,0 @@
-<template>
-  <div class="grid grid-cols-2 gap-6">
-    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
-      <Radio v-model="picked" value="fs" label="Radio 1" />
-    </div>
-    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
-      <Radio v-model="picked" value="sec" label="Radio 2" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked = ref('fs')
-</script>
diff --git a/docs/components/radio/examples/DefaultRadio.vue b/docs/components/radio/examples/DefaultRadio.vue
deleted file mode 100644
index 45ff99aa..00000000
--- a/docs/components/radio/examples/DefaultRadio.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <Radio name="default radio" v-model="picked" value="one" label="Default radio" />
-    <Radio name="default radio" v-model="picked" value="two" label="Checked state" />
-  </div>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked = ref('one')
-</script>
diff --git a/docs/components/radio/examples/DisabledRadio.vue b/docs/components/radio/examples/DisabledRadio.vue
deleted file mode 100644
index 2b6118c8..00000000
--- a/docs/components/radio/examples/DisabledRadio.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <Radio name="disabled-radio" v-model="picked" value="one" label="Disabled radio" :disabled="true" />
-    <Radio name="disabled-radio" v-model="picked" value="two" label="Disabled checked" :disabled="true" />
-  </div>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked = ref('one')
-</script>
diff --git a/docs/components/radio/examples/FwbRadioExample.vue b/docs/components/radio/examples/FwbRadioExample.vue
new file mode 100644
index 00000000..13c2f988
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExample.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="vp-raw">
+    <fwb-radio
+      v-model="picked"
+      label="Radio 1"
+      name="radio"
+      value="one"
+    />
+    <fwb-radio
+      v-model="picked"
+      label="Radio 2"
+      name="radio"
+      value="two"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from '../../../../src/index'
+
+const picked = ref()
+</script>
diff --git a/docs/components/radio/examples/FwbRadioExampleBordered.vue b/docs/components/radio/examples/FwbRadioExampleBordered.vue
new file mode 100644
index 00000000..fc0b25f2
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExampleBordered.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vp-raw grid grid-cols-2 gap-6">
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <fwb-radio
+        v-model="picked"
+        label="Radio 1"
+        name="radio-bordered"
+        value="one"
+      />
+    </div>
+    <div class="flex items-center p-2 border border-gray-200 rounded dark:border-gray-700">
+      <fwb-radio
+        v-model="picked"
+        label="Radio 2"
+        name="radio-bordered"
+        value="two"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from '../../../../src/index'
+
+const picked = ref('one')
+</script>
diff --git a/docs/components/radio/examples/FwbRadioExampleDisabled.vue b/docs/components/radio/examples/FwbRadioExampleDisabled.vue
new file mode 100644
index 00000000..c04f2cf2
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExampleDisabled.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="vp-raw">
+    <fwb-radio
+      v-model="picked"
+      disabled
+      label="Disabled radio"
+      name="radio-disabled"
+      value="one"
+    />
+    <fwb-radio
+      v-model="picked"
+      disabled
+      label="Disabled checked"
+      name="radio-disabled"
+      value="two"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from '../../../../src/index'
+
+const picked = ref('two')
+</script>
diff --git a/docs/components/radio/examples/FwbRadioExampleInline.vue b/docs/components/radio/examples/FwbRadioExampleInline.vue
new file mode 100644
index 00000000..fe6788b9
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExampleInline.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="vp-raw flex w-96">
+    <fwb-radio
+      v-model="picked"
+      label="Inline 1"
+      value="first"
+    />
+    <fwb-radio
+      v-model="picked"
+      label="Inline 2"
+      value="second"
+    />
+    <fwb-radio
+      v-model="picked"
+      label="Inline 3"
+      value="third"
+    />
+    <fwb-radio
+      v-model="picked"
+      label="Inline 4"
+      value="fourth"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRadio } from '../../../../src/index'
+
+const picked = ref('first')
+</script>
diff --git a/docs/components/radio/examples/FwbRadioExampleLink.vue b/docs/components/radio/examples/FwbRadioExampleLink.vue
new file mode 100644
index 00000000..8755dd07
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExampleLink.vue
@@ -0,0 +1,22 @@
+<template>
+  <fwb-radio
+    v-model="picked"
+    name="with-link"
+    value="first"
+  >
+    I agree with the
+    <fwb-a
+      class="ml-1"
+      href="#"
+    >
+      terms and conditions
+    </fwb-a>.
+  </fwb-radio>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbRadio } from '../../../../src/index'
+
+const picked = ref()
+</script>
diff --git a/docs/components/radio/examples/FwbRadioExampleList.vue b/docs/components/radio/examples/FwbRadioExampleList.vue
new file mode 100644
index 00000000..5d5e2314
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExampleList.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="vp-raw">
+    <fwb-p class="mb-2">
+      Technology {{ picked }}
+    </fwb-p>
+
+    <fwb-list-group>
+      <fwb-list-group-item>
+        <fwb-radio
+          v-model="picked"
+          label="Svelte"
+          name="list-radio"
+          value="Svelte"
+        />
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <fwb-radio
+          v-model="picked"
+          label="Vue JS"
+          name="list-radio"
+          value="Vue JS"
+        />
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <fwb-radio
+          v-model="picked"
+          label="React"
+          name="list-radio"
+          value="React"
+        />
+      </fwb-list-group-item>
+      <fwb-list-group-item>
+        <fwb-radio
+          v-model="picked"
+          label="Angular"
+          name="list-radio"
+          value="Angular"
+        />
+      </fwb-list-group-item>
+    </fwb-list-group>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from '../../../../src/index'
+
+const picked = ref('Vue JS')
+</script>
diff --git a/docs/components/radio/examples/FwbRadioExampleListHorizontal.vue b/docs/components/radio/examples/FwbRadioExampleListHorizontal.vue
new file mode 100644
index 00000000..94d10b01
--- /dev/null
+++ b/docs/components/radio/examples/FwbRadioExampleListHorizontal.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="vp-raw">
+    <fwb-p class="mb-2">
+      Technology {{ picked }}
+    </fwb-p>
+    <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <fwb-radio
+          v-model="picked"
+          label="Svelte"
+          name="radio-horizontal"
+          value="Svelte"
+        />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <fwb-radio
+          v-model="picked"
+          label="Vue JS"
+          name="radio-horizontal"
+          value="Vue JS"
+        />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <fwb-radio
+          v-model="picked"
+          label="React"
+          name="radio-horizontal"
+          value="React"
+        />
+      </li>
+      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+        <fwb-radio
+          v-model="picked"
+          label="Angular"
+          name="radio-horizontal"
+          value="Angular"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbP, FwbRadio } from '../../../../src/index'
+
+const picked = ref('svelte')
+</script>
diff --git a/docs/components/radio/examples/HorizontalListRadio.vue b/docs/components/radio/examples/HorizontalListRadio.vue
deleted file mode 100644
index da6183ae..00000000
--- a/docs/components/radio/examples/HorizontalListRadio.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked1 }}</span>
-    </p>
-    <ul
-      class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="hor-radio" v-model="picked1" value="svelte" label="Svelte" />
-      </li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="hor-radio" v-model="picked1" value="vue" label="Vue JS" />
-      </li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="hor-radio" v-model="picked1" value="react" label="React" />
-      </li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="hor-radio" v-model="picked1" value="angular" label="Angular" />
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked1 = ref('svelte')
-</script>
diff --git a/docs/components/radio/examples/InlineRadio.vue b/docs/components/radio/examples/InlineRadio.vue
deleted file mode 100644
index 4fd808fd..00000000
--- a/docs/components/radio/examples/InlineRadio.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="flex w-96">
-    <Radio v-model="picked" value="first" label="Inline 1" />
-    <Radio v-model="picked" value="sec" label="Inline 2" />
-    <Radio v-model="picked" value="third" label="Inline 3" />
-    <Radio v-model="picked" value="fourth" label="Inline 4" />
-  </div>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked = ref('first')
-</script>
diff --git a/docs/components/radio/examples/LinkRadio.vue b/docs/components/radio/examples/LinkRadio.vue
deleted file mode 100644
index b7597a7b..00000000
--- a/docs/components/radio/examples/LinkRadio.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <Radio v-model="picked" value="first" name="with-link">
-    I agree with the <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">terms and conditions</a>.
-  </Radio>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked = ref('first')
-</script>
diff --git a/docs/components/radio/examples/ListRadio.vue b/docs/components/radio/examples/ListRadio.vue
deleted file mode 100644
index 1827344c..00000000
--- a/docs/components/radio/examples/ListRadio.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{{ picked }}</span>
-    </p>
-    <ul
-      class="w-48 !p-0 text-sm text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="list-radio" v-model="picked" value="svelte" label="Svelte" />
-      </li>
-      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="list-radio" v-model="picked" value="vue" label="Vue JS" />
-      </li>
-      <li class="w-full !m-0 pl-3 flex border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="list-radio" v-model="picked" value="react" label="React" />
-      </li>
-      <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
-        <Radio name="list-radio" v-model="picked" value="angular" label="Angular" />
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-import Radio from '../../../../src/components/Radio/Radio.vue'
-import { ref } from 'vue'
-
-const picked = ref('svelte')
-</script>
diff --git a/docs/components/range.md b/docs/components/range.md
index d1d4fdfc..1cff6ae7 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -1,9 +1,9 @@
 <script setup>
-import DefaultRange from './range/examples/DefaultRange.vue'
-import DisabledRange from './range/examples/DisabledRange.vue'
-import MinMaxRange from './range/examples/MinMaxRange.vue'
-import StepsRange from './range/examples/StepsRange.vue'
-import SizeRange from './range/examples/SizeRange.vue'
+import FwbRangeExample from './range/examples/FwbRangeExample.vue'
+import FwbRangeExampleDisabled from './range/examples/FwbRangeExampleDisabled.vue'
+import FwbRangeExampleMinMax from './range/examples/FwbRangeExampleMinMax.vue'
+import FwbRangeExampleSize from './range/examples/FwbRangeExampleSize.vue'
+import FwbRangeExampleSteps from './range/examples/FwbRangeExampleSteps.vue'
 </script>
 
 # Vue Toggle Range - Flowbite
@@ -17,63 +17,55 @@ Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.co
 
 ## Default
 
+<fwb-range-example />
 ```vue
 <template>
-  <Range v-model="value" />
+  <fwb-range v-model="value" />
+  <pre>Current value: {{ value }}</pre>
 </template>
 
 <script setup>
-import Range from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbRange } from 'flowbite-vue'
 
-const value = ref('10')
+const value = ref(10)
 </script>
-
 ```
 
-<DefaultRange />
-
 ## Disabled state
 
+<fwb-range-example-disabled />
 ```vue
 <template>
-  <Range v-model="value" label="Disabled range" :disabled="true" />
+  <fwb-range v-model="value" disabled label="Disabled range" />
 </template>
-</script>
 ```
 
-<DisabledRange />
-
 ## Min and Max
 
+<fwb-range-example-min-max />
 ```vue
 <template>
-  <Range v-model="value" label="Min-max range" min="0" max="10" />
+  <fwb-range v-model="value" :max="15" :min="5" label="Min-max range" />
 </template>
 ```
 
-<MinMaxRange />
-
 ## Steps
 
+<fwb-range-example-steps />
 ```vue
 <template>
-  <Range v-model="value"  label="Steps range" steps="5" />
+  <fwb-range v-model="value" :steps="5" label="Steps range" />
 </template>
 ```
 
-<StepsRange />
-
 ## Sizes
 
+<fwb-range-example-size />
 ```vue
 <template>
-  <div>
-    <Range v-model="value1" label="Small range" size="sm" />
-    <Range v-model="value2" label="Medium range" size="md" />
-    <Range v-model="value3" label="Large range" size="lg" />
-  </div>
+  <fwb-range v-model="value1" label="Small range" size="sm" />
+  <fwb-range v-model="value2" label="Medium range" size="md" />
+  <fwb-range v-model="value3" label="Large range" size="lg" />
 </template>
 ```
-
-<SizeRange />
diff --git a/docs/components/range/examples/DefaultRange.vue b/docs/components/range/examples/DefaultRange.vue
deleted file mode 100644
index f7baf2ba..00000000
--- a/docs/components/range/examples/DefaultRange.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Range v-model="value" />
-  </div>
-</template>
-
-<script setup>
-import Range from '../../../../src/components/Range/Range.vue'
-import { ref } from 'vue'
-
-const value = ref('10')
-</script>
diff --git a/docs/components/range/examples/DisabledRange.vue b/docs/components/range/examples/DisabledRange.vue
deleted file mode 100644
index 5f6fff44..00000000
--- a/docs/components/range/examples/DisabledRange.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Range v-model="value" label="Disabled range" :disabled="true" />
-  </div>
-</template>
-
-<script setup>
-import Range from '../../../../src/components/Range/Range.vue'
-import { ref } from 'vue'
-
-const value = ref('10')
-</script>
diff --git a/docs/components/range/examples/FwbRangeExample.vue b/docs/components/range/examples/FwbRangeExample.vue
new file mode 100644
index 00000000..4768a18f
--- /dev/null
+++ b/docs/components/range/examples/FwbRangeExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw">
+    <fwb-range v-model.number="value" />
+    <pre>Selected value: {{ value }}</pre>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from '../../../../src/index'
+
+const value = ref(10)
+</script>
diff --git a/docs/components/range/examples/FwbRangeExampleDisabled.vue b/docs/components/range/examples/FwbRangeExampleDisabled.vue
new file mode 100644
index 00000000..2ce5ae8a
--- /dev/null
+++ b/docs/components/range/examples/FwbRangeExampleDisabled.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw">
+    <fwb-range
+      v-model.number="value"
+      disabled
+      label="Disabled range"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from '../../../../src/index'
+
+const value = ref(10)
+</script>
diff --git a/docs/components/range/examples/FwbRangeExampleMinMax.vue b/docs/components/range/examples/FwbRangeExampleMinMax.vue
new file mode 100644
index 00000000..346a8626
--- /dev/null
+++ b/docs/components/range/examples/FwbRangeExampleMinMax.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw">
+    <fwb-range
+      v-model.number="value"
+      :max="15"
+      :min="5"
+      label="Min-max range"
+    />
+    <pre>Selected value: {{ value }}</pre>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from '../../../../src/index'
+
+const value = ref(10)
+</script>
diff --git a/docs/components/range/examples/FwbRangeExampleSize.vue b/docs/components/range/examples/FwbRangeExampleSize.vue
new file mode 100644
index 00000000..c93256ad
--- /dev/null
+++ b/docs/components/range/examples/FwbRangeExampleSize.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw grid gap-3">
+    <fwb-range
+      v-model.number="value1"
+      label="Small range"
+      size="sm"
+    />
+    <fwb-range
+      v-model.number="value2"
+      label="Medium range"
+      size="md"
+    />
+    <fwb-range
+      v-model.number="value3"
+      label="Large range"
+      size="lg"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from '../../../../src/index'
+
+const value1 = ref(10)
+const value2 = ref(10)
+const value3 = ref(10)
+</script>
diff --git a/docs/components/range/examples/FwbRangeExampleSteps.vue b/docs/components/range/examples/FwbRangeExampleSteps.vue
new file mode 100644
index 00000000..7aa9ace8
--- /dev/null
+++ b/docs/components/range/examples/FwbRangeExampleSteps.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw">
+    <fwb-range
+      v-model.number="value"
+      :steps="5"
+      label="Steps range"
+    />
+    <pre>Selected value: {{ value }}</pre>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbRange } from '../../../../src/index'
+
+const value = ref(10)
+</script>
diff --git a/docs/components/range/examples/MinMaxRange.vue b/docs/components/range/examples/MinMaxRange.vue
deleted file mode 100644
index c01eda45..00000000
--- a/docs/components/range/examples/MinMaxRange.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Range v-model="value" label="Min-max range" min="0" max="10" />
-  </div>
-</template>
-
-<script setup>
-import Range from '../../../../src/components/Range/Range.vue'
-import { ref } from 'vue'
-
-const value = ref('10')
-</script>
diff --git a/docs/components/range/examples/SizeRange.vue b/docs/components/range/examples/SizeRange.vue
deleted file mode 100644
index 5174030f..00000000
--- a/docs/components/range/examples/SizeRange.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3">
-    <Range v-model="value1" label="Small range" size="sm" />
-    <Range v-model="value2" label="Medium range" size="md" />
-    <Range v-model="value3" label="Large range" size="lg" />
-  </div>
-</template>
-
-<script setup>
-import Range from '../../../../src/components/Range/Range.vue'
-import { ref } from 'vue'
-
-const value1 = ref('10')
-const value2 = ref('10')
-const value3 = ref('10')
-</script>
diff --git a/docs/components/range/examples/StepsRange.vue b/docs/components/range/examples/StepsRange.vue
deleted file mode 100644
index 9d85db60..00000000
--- a/docs/components/range/examples/StepsRange.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Range v-model="value" label="Steps range" steps="5" />
-  </div>
-</template>
-
-<script setup>
-import Range from '../../../../src/components/Range/Range.vue'
-import { ref } from 'vue'
-
-const value = ref('10')
-</script>
diff --git a/docs/components/rating.md b/docs/components/rating.md
index 6fb0fd5b..d367e1cc 100644
--- a/docs/components/rating.md
+++ b/docs/components/rating.md
@@ -1,77 +1,82 @@
 <script setup>
-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'
+import FwbRatingExample from './rating/examples/FwbRatingExample.vue'
+import FwbRatingExampleWithText from './rating/examples/FwbRatingExampleWithText.vue'
+import FwbRatingExampleCount from './rating/examples/FwbRatingExampleCount.vue'
+import FwbRatingExampleStarSizes from './rating/examples/FwbRatingExampleStarSizes.vue'
 </script>
 # Vue Rating - Flowbite
 
 ## Default rating
 Use this simple example of a star rating component for showing review results.
+
+<fwb-rating-example />
 ```vue
-<script setup>
-import { Rating } from 'flowbite-vue'
-</script>
 <template>
-    <Rating :rating="4" />
+  <fwb-rating :rating="4" />
 </template>
-```
 
-<RatingExample />
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
+```
 
 ## Rating with text
 If you also want to show a text near the stars you can use this example as a reference.
+
+<fwb-rating-example-with-text />
 ```vue
-<script setup>
-import { Rating } from 'flowbite-vue'
-</script>
 <template>
-    <Rating :rating="4">
-      <template #besideText>
-          <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
-        </template>
-    </Rating>
+  <fwb-rating :rating="4.75">
+    <template #besideText>
+      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        4.75 out of 5
+      </p>
+    </template>
+  </fwb-rating>
 </template>
-```
 
-<RatingWithTextExample />
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
+```
 
 ## Rating count
 Aggregate more results by using this example to show the amount of reviews and the average score.
+
+<fwb-rating-example-count />
 ```vue
-<script setup>
-import { Rating } from 'flowbite-vue'
-</script>
 <template>
-    <Rating
-      :rating="1"
-      :scale="1"
-      review-text="73 reviews"
-      review-link="#"
-    >
-      <template #besideText>
-        <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
-      </template>
-    </Rating>
+  <fwb-rating
+    :rating="1"
+    :scale="1"
+    review-link="#"
+    review-text="73 reviews"
+  >
+    <template #besideText>
+      <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">
+        4.95
+      </p>
+    </template>
+  </fwb-rating>
 </template>
-```
 
-<RatingCountExample />
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
+```
 
 ## Star sizes
 Check out the different sizing options for the star review component from small, medium, and large.
+
+<fwb-rating-example-star-sizes />
 ```vue
-<script setup>
-import { Rating } from 'flowbite-vue'
-</script>
 <template>
-    <!-- Small -->
-    <Rating size="sm" :rating="4" />
-    <!-- Medium -->
-    <Rating size="md" :rating="4" />
-    <!-- Large -->
-    <Rating size="lg" :rating="4" />
+    <fwb-rating size="sm" :rating="4" />
+    <fwb-rating size="md" :rating="4" />
+    <fwb-rating size="lg" :rating="4" />
 </template>
-```
 
-<RatingStarSizesExample />
+<script setup>
+import { FwbRating } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/rating/examples/FwbRatingExample.vue b/docs/components/rating/examples/FwbRatingExample.vue
new file mode 100644
index 00000000..4b483914
--- /dev/null
+++ b/docs/components/rating/examples/FwbRatingExample.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="vp-raw">
+    <fwb-rating :rating="4" />
+  </div>
+</template>
+
+<script setup>
+import { FwbRating } from '../../../../src/index'
+</script>
diff --git a/docs/components/rating/examples/RatingCountExample.vue b/docs/components/rating/examples/FwbRatingExampleCount.vue
similarity index 64%
rename from docs/components/rating/examples/RatingCountExample.vue
rename to docs/components/rating/examples/FwbRatingExampleCount.vue
index 08cc1b9b..d6650fe3 100644
--- a/docs/components/rating/examples/RatingCountExample.vue
+++ b/docs/components/rating/examples/FwbRatingExampleCount.vue
@@ -1,17 +1,20 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Rating
+  <div class="vp-raw">
+    <fwb-rating
       :rating="1"
       :scale="1"
-      review-text="73 reviews"
       review-link="#"
+      review-text="73 reviews"
     >
       <template #besideText>
-        <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
+        <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">
+          4.95
+        </p>
       </template>
-    </Rating>
+    </fwb-rating>
   </div>
 </template>
+
 <script setup>
-import { Rating } from '../../../../src/index'
+import { FwbRating } from '../../../../src/index'
 </script>
diff --git a/docs/components/rating/examples/FwbRatingExampleStarSizes.vue b/docs/components/rating/examples/FwbRatingExampleStarSizes.vue
new file mode 100644
index 00000000..426f262b
--- /dev/null
+++ b/docs/components/rating/examples/FwbRatingExampleStarSizes.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-rating
+      :rating="4"
+      size="sm"
+    />
+    <fwb-rating
+      :rating="4"
+      size="md"
+    />
+    <fwb-rating
+      :rating="4"
+      size="lg"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbRating } from '../../../../src/index'
+</script>
diff --git a/docs/components/rating/examples/FwbRatingExampleWithText.vue b/docs/components/rating/examples/FwbRatingExampleWithText.vue
new file mode 100644
index 00000000..e76a1a8e
--- /dev/null
+++ b/docs/components/rating/examples/FwbRatingExampleWithText.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-rating :rating="4.75">
+      <template #besideText>
+        <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+          4.75 out of 5
+        </p>
+      </template>
+    </fwb-rating>
+  </div>
+</template>
+
+<script setup>
+import { FwbRating } from '../../../../src/index'
+</script>
diff --git a/docs/components/rating/examples/RatingExample.vue b/docs/components/rating/examples/RatingExample.vue
deleted file mode 100644
index cb1626d2..00000000
--- a/docs/components/rating/examples/RatingExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Rating :rating="4" />
-  </div>
-</template>
-<script setup>
-import { Rating } from '../../../../src/index'
-</script>
diff --git a/docs/components/rating/examples/RatingStarSizesExample.vue b/docs/components/rating/examples/RatingStarSizesExample.vue
deleted file mode 100644
index 800c7e0e..00000000
--- a/docs/components/rating/examples/RatingStarSizesExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col gap-5">
-    <!-- Small -->
-    <Rating size="sm" :rating="4" />
-    <!-- Medium -->
-    <Rating size="md" :rating="4" />
-    <!-- Large -->
-    <Rating size="lg" :rating="4" />
-  </div>
-</template>
-<script setup>
-import { Rating } from '../../../../src/index'
-</script>
diff --git a/docs/components/rating/examples/RatingWithTextExample.vue b/docs/components/rating/examples/RatingWithTextExample.vue
deleted file mode 100644
index aa7230cc..00000000
--- a/docs/components/rating/examples/RatingWithTextExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Rating :rating="4">
-      <template #besideText>
-          <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
-        </template>
-    </Rating>
-  </div>
-</template>
-<script setup>
-import { Rating } from '../../../../src/index'
-</script>
diff --git a/docs/components/select.md b/docs/components/select.md
index dcfee55f..5a362ce6 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -1,8 +1,8 @@
 <script setup>
-import SelectExample from './select/examples/SelectExample.vue';
-import DisabledSelect from './select/examples/DisabledSelect.vue';
-import SelectSize from './select/examples/SelectSize.vue';
-import UnderlinedSelect from './select/examples/UnderlinedSelect.vue';
+import FwbSelectExample from './select/examples/FwbSelectExample.vue'
+import FwbSelectExampleDisabled from './select/examples/FwbSelectExampleDisabled.vue'
+import FwbSelectExampleSize from './select/examples/FwbSelectExampleSize.vue'
+import FwbSelectExampleUnderlined from './select/examples/FwbSelectExampleUnderlined.vue'
 </script>
 
 # Vue Select - Flowbite
@@ -18,59 +18,117 @@ Original reference: [https://flowbite.com/docs/forms/select/](https://flowbite.c
 The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.
 
 ## Default
+
+<fwb-select-example />
 ```vue
+<template>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+  />
+</template>
+
 <script setup>
 import { ref } from 'vue'
-import { Select } from 'flowbite-vue'
+import { FwbSelect } from 'flowbite-vue'
 
-let selected = ref('')
+const selected = ref('')
 const countries = [
   { value: 'us', name: 'United States' },
   { value: 'ca', name: 'Canada' },
   { value: 'fr', name: 'France' },
 ]
 </script>
-<template>
-    <Select v-model="selected" :options="countries" />
-</template>
 ```
 
-<SelectExample />
-
 ## Disabled
 
+<fwb-select-example-disabled />
 ```vue
 <template>
-  <div>
-    <Select v-model="selected" :options="countries" placeholder="You can't select" :disabled="true" />
-  </div>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    disabled
+    label="Select a country"
+    placeholder="You can't select"
+  />
 </template>
-```
 
-<DisabledSelect />
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
+```
 
 ## Underlined
 
+<fwb-select-example-underlined />
 ```vue
 <template>
-  <div>
-    <Select v-model="selected" :options="countries" :underline="true" />
-  </div>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    underline
+  />
 </template>
-```
 
-<UnderlinedSelect />
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
+```
 
 ## Size
 
+<fwb-select-example-size />
 ```vue
 <template>
-  <div>
-    <Select v-model="selected" :options="countries" :size="lg" />
-    <Select v-model="selected" :options="countries" :size="md" />
-    <Select v-model="selected" :options="countries" :size="sm" />
-  </div>
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="sm"
+  />
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="md"
+  />
+  <fwb-select
+    v-model="selected"
+    :options="countries"
+    label="Select a country"
+    size="lg"
+  />
 </template>
-```
 
-<SelectSize />
\ No newline at end of file
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from 'flowbite-vue'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
+```
diff --git a/docs/components/select/examples/DisabledSelect.vue b/docs/components/select/examples/DisabledSelect.vue
deleted file mode 100644
index e6b4508f..00000000
--- a/docs/components/select/examples/DisabledSelect.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <Select v-model="selected" :options="countries" placeholder="You can't select" label="Select a country" :disabled="true" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select } from '../../../../src/index'
-
-let selected = ref('')
-const countries = [
-  { value: 'us', name: 'United States' },
-  { value: 'ca', name: 'Canada' },
-  { value: 'fr', name: 'France' },
-]
-</script>
\ No newline at end of file
diff --git a/docs/components/select/examples/FwbSelectExample.vue b/docs/components/select/examples/FwbSelectExample.vue
new file mode 100644
index 00000000..a0c11b6d
--- /dev/null
+++ b/docs/components/select/examples/FwbSelectExample.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw">
+    <fwb-select
+      v-model="selected"
+      :options="countries"
+      label="Select a country"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from '../../../../src/index'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
diff --git a/docs/components/select/examples/FwbSelectExampleDisabled.vue b/docs/components/select/examples/FwbSelectExampleDisabled.vue
new file mode 100644
index 00000000..d7553fdc
--- /dev/null
+++ b/docs/components/select/examples/FwbSelectExampleDisabled.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <fwb-select
+      v-model="selected"
+      :options="countries"
+      disabled
+      label="Select a country"
+      placeholder="You can't select"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from '../../../../src/index'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
diff --git a/docs/components/select/examples/FwbSelectExampleSize.vue b/docs/components/select/examples/FwbSelectExampleSize.vue
new file mode 100644
index 00000000..7e5fcc7d
--- /dev/null
+++ b/docs/components/select/examples/FwbSelectExampleSize.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-select
+      v-model="selected"
+      :options="countries"
+      label="Select a country"
+      size="sm"
+    />
+    <fwb-select
+      v-model="selected"
+      :options="countries"
+      label="Select a country"
+      size="md"
+    />
+    <fwb-select
+      v-model="selected"
+      :options="countries"
+      label="Select a country"
+      size="lg"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from '../../../../src/index'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
diff --git a/docs/components/select/examples/FwbSelectExampleUnderlined.vue b/docs/components/select/examples/FwbSelectExampleUnderlined.vue
new file mode 100644
index 00000000..92b2d483
--- /dev/null
+++ b/docs/components/select/examples/FwbSelectExampleUnderlined.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="vp-raw">
+    <fwb-select
+      v-model="selected"
+      :options="countries"
+      label="Select a country"
+      underline
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbSelect } from '../../../../src/index'
+
+const selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
diff --git a/docs/components/select/examples/SelectExample.vue b/docs/components/select/examples/SelectExample.vue
deleted file mode 100644
index d1f84fd5..00000000
--- a/docs/components/select/examples/SelectExample.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <Select v-model="selected" :options="countries" label="Select a country" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select } from '../../../../src/index'
-
-let selected = ref('')
-const countries = [
-  { value: 'us', name: 'United States' },
-  { value: 'ca', name: 'Canada' },
-  { value: 'fr', name: 'France' },
-]
-</script>
\ No newline at end of file
diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
deleted file mode 100644
index 55837753..00000000
--- a/docs/components/select/examples/SelectSize.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <Select v-model="selected" :options="countries" label="Select a country" size="lg" />
-    <Select v-model="selected" :options="countries" label="Select a country" size="md" />
-    <Select v-model="selected" :options="countries" label="Select a country" size="sm" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select } from '../../../../src/index'
-
-let selected = ref('')
-const countries = [
-  { value: 'us', name: 'United States' },
-  { value: 'ca', name: 'Canada' },
-  { value: 'fr', name: 'France' },
-]
-</script>
\ No newline at end of file
diff --git a/docs/components/select/examples/UnderlinedSelect.vue b/docs/components/select/examples/UnderlinedSelect.vue
deleted file mode 100644
index 809ac8bb..00000000
--- a/docs/components/select/examples/UnderlinedSelect.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <Select v-model="selected" :options="countries" label="Select a country" :underline="true" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select } from '../../../../src/index'
-
-let selected = ref('')
-const countries = [
-  { value: 'us', name: 'United States' },
-  { value: 'ca', name: 'Canada' },
-  { value: 'fr', name: 'France' },
-]
-</script>
\ No newline at end of file
diff --git a/docs/components/sidebar.md b/docs/components/sidebar.md
index 3b51ffd4..09322647 100644
--- a/docs/components/sidebar.md
+++ b/docs/components/sidebar.md
@@ -1,9 +1,9 @@
 <script setup>
-import SidebarExample from './sidebar/examples/SidebarExample.vue'
-import SidebarDropdownExample from './sidebar/examples/SidebarDropdownExample.vue'
-import SidebarGroupExample from './sidebar/examples/SidebarGroupExample.vue'
-import SidebarCtaExample from './sidebar/examples/SidebarCtaExample.vue'
-import SidebarLogoExample from './sidebar/examples/SidebarLogoExample.vue'
+import FwbSidebarExample from './sidebar/examples/FwbSidebarExample.vue'
+import FwbSidebarDropdownExample from './sidebar/examples/FwbSidebarDropdownExample.vue'
+import FwbSidebarGroupExample from './sidebar/examples/FwbSidebarGroupExample.vue'
+import FwbSidebarCtaExample from './sidebar/examples/FwbSidebarCtaExample.vue'
+import FwbSidebarLogoExample from './sidebar/examples/FwbSidebarLogoExample.vue'
 </script>
 # Vue Sidebar - Flowbite
 #### Use the sidebar component to show a list of menu items and multi-level menu items on either side of the page to navigate on your website
@@ -12,12 +12,12 @@ The sidebar component can be used as a complementary element relative to the nav
 ## Default sidebar
 Use this example to show a responsive list of menu items inside the sidebar with icons and labels.
 
-<SidebarExample />
+<FwbSidebarExample />
 
 ```vue
 <template>
-  <Sidebar>
-      <SidebarItem>
+  <fwb-sidebar>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -31,8 +31,8 @@ Use this example to show a responsive list of menu items inside the sidebar with
           </svg>
         </template>
         <template #default>Dashboard</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -50,8 +50,8 @@ Use this example to show a responsive list of menu items inside the sidebar with
         <template #suffix>
           <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -69,8 +69,8 @@ Use this example to show a responsive list of menu items inside the sidebar with
         <template #suffix>
           <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -85,8 +85,8 @@ Use this example to show a responsive list of menu items inside the sidebar with
           </svg>
         </template>
         <template #default>Users</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -101,8 +101,8 @@ Use this example to show a responsive list of menu items inside the sidebar with
           </svg>
         </template>
         <template #default>Products</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -115,8 +115,8 @@ Use this example to show a responsive list of menu items inside the sidebar with
           </svg>
         </template>
         <template #default>Sign In</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -135,24 +135,24 @@ Use this example to show a responsive list of menu items inside the sidebar with
           </svg>
         </template>
         <template #default>Sign Up</template>
-      </SidebarItem>
-    </Sidebar>
+      </fwb-sidebar-item>
+    </fwb-sidebar>
 </template>
 <script setup>
-import { Sidebar, SidebarItem } from 'flowbite-vue'
+import { FwbSidebar, FwbSidebarItem } from 'flowbite-vue'
 </script>
 
 ```
 
 ## Multi-level menu
-Use this sidebar example to create multi-level menu items by using the SidebarDropdownItem component.
+Use this sidebar example to create multi-level menu items by using the FwbSidebarDropdownItem component.
 
-<SidebarDropdownExample />
+<FwbSidebarDropdownExample />
 
 ```vue
 <template>
-  <Sidebar>
-    <SidebarItem>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -166,8 +166,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Dashboard</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -185,8 +185,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
       </template>
-    </SidebarItem>
-    <SidebarDropdownItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-dropdown-item>
       <template #icon>
         <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -201,26 +201,26 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       </template>
       <template #trigger> E-commerce </template>
       <template #default>
-        <SidebarItem class="pl-11"> Products </SidebarItem>
-        <SidebarItem class="pl-11"> Sign In </SidebarItem>
-        <SidebarItem class="pl-11"> Sign Up </SidebarItem>
+        <fwb-sidebar-item class="pl-11"> Products </fwb-sidebar-item>
+        <fwb-sidebar-item class="pl-11"> Sign In </fwb-sidebar-item>
+        <fwb-sidebar-item class="pl-11"> Sign Up </fwb-sidebar-item>
       </template>
-    </SidebarDropdownItem>
-  </Sidebar>
+    </fwb-sidebar-dropdown-item>
+  </fwb-sidebar>
 </template>
 <script setup>
-  import { Sidebar, SidebarItem, SidebarDropdownItem } from 'flowbite-vue'
+  import { FwbSidebar, FwbSidebarItem, FwbSidebarDropdownItem } from 'flowbite-vue'
 </script>
 ```
 
 ## Content separator
 
-<SidebarGroupExample />
+<FwbSidebarGroupExample />
 
 ```vue
 <template>
-  <Sidebar>
-    <SidebarItem>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -234,8 +234,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Dashboard</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -253,8 +253,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
       </template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -272,8 +272,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
       </template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -288,8 +288,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Users</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -304,8 +304,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Products</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -318,8 +318,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Sign In</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -338,9 +338,9 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Sign Up</template>
-    </SidebarItem>
-    <SidebarItemGroup border>
-      <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item-group border>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -355,8 +355,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
           </svg>
         </template>
         <template #default>Upgrade to Pro</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -369,8 +369,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
           </svg>
         </template>
         <template #default>Documentation</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -384,8 +384,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
           </svg>
         </template>
         <template #default>Components</template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -400,23 +400,23 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
           </svg>
         </template>
         <template #default>Help</template>
-      </SidebarItem>
-    </SidebarItemGroup>
-  </Sidebar>
+      </fwb-sidebar-item>
+    </fwb-sidebar-item-group>
+  </fwb-sidebar>
 </template>
 <script setup>
-  import { Sidebar, SidebarItemGroup, SidebarItem } from 'flowbite-vue'
+  import { FwbSidebar, FwbSidebarItemGroup, FwbSidebarItem } from 'flowbite-vue'
 </script>
 ```
 
 ## CTA button
 
-<SidebarCtaExample />
+<FwbSidebarCtaExample />
 
 ```vue
 <template>
-  <Sidebar>
-    <SidebarItem>
+  <fwb-sidebar>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -430,8 +430,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Dashboard</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -449,8 +449,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
       </template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -468,8 +468,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
       </template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -484,8 +484,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Users</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -500,8 +500,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Products</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -514,8 +514,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Sign In</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -534,28 +534,28 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Sign Up</template>
-    </SidebarItem>
+    </fwb-sidebar-item>
 
-    <SidebarCta v-if="isShowCta" label="Beta" @close="toggleCta">
+    <fwb-sidebar-cta v-if="isShowCta" label="Beta" @close="toggleCta">
       <p class="mb-3 text-sm text-blue-800 dark:text-blue-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
       <a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a>
-    </SidebarCta>
-  </Sidebar>
+    </fwb-sidebar-cta>
+  </fwb-sidebar>
 </template>
 <script setup>
-  import { Sidebar, SidebarCta, SidebarItem } from 'flowbite-vue'
+  import { FwbSidebar, FwbSidebarCta, FwbSidebarItem } from 'flowbite-vue'
 </script>
 ```
 
 ## Logo branding
 
-<SidebarLogoExample />
+<FwbSidebarLogoExample />
 
 ```vue
 <template>
-  <Sidebar>
-    <SidebarLogo name="Flowbite" logo="https://flowbite.com/docs/images/logo.svg" tag="router-link" />
-    <SidebarItem>
+  <fwb-sidebar>
+    <fwb-sidebar-logo name="Flowbite" logo="https://flowbite.com/docs/images/logo.svg" tag="router-link" />
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -569,8 +569,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Dashboard</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -588,8 +588,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
       </template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -607,8 +607,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
       <template #suffix>
         <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
       </template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -623,8 +623,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Users</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -639,8 +639,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Products</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -653,8 +653,8 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Sign In</template>
-    </SidebarItem>
-    <SidebarItem>
+    </fwb-sidebar-item>
+    <fwb-sidebar-item>
       <template #icon>
         <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -673,11 +673,11 @@ Use this sidebar example to create multi-level menu items by using the SidebarDr
         </svg>
       </template>
       <template #default>Sign Up</template>
-    </SidebarItem>
-  </Sidebar>
+    </fwb-sidebar-item>
+  </fwb-sidebar>
 </template>
 <script setup>
-  import { Sidebar, SidebarItem, SidebarLogo } from 'flowbite-vue'
+  import { FwbSidebar, FwbSidebarItem, FwbSidebarLogo } from 'flowbite-vue'
 </script>
 ```
 
diff --git a/docs/components/sidebar/examples/SidebarCtaExample.vue b/docs/components/sidebar/examples/FwbSidebarCtaExample.vue
similarity index 77%
rename from docs/components/sidebar/examples/SidebarCtaExample.vue
rename to docs/components/sidebar/examples/FwbSidebarCtaExample.vue
index 767c3ed9..14216568 100644
--- a/docs/components/sidebar/examples/SidebarCtaExample.vue
+++ b/docs/components/sidebar/examples/FwbSidebarCtaExample.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vp-raw flex flex-col relative">
-    <Sidebar class="!h-full relative">
-      <SidebarItem>
+    <fwb-sidebar class="!h-full relative">
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +14,11 @@
             <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
           </svg>
         </template>
-        <template #default>Dashboard</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Dashboard
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +32,14 @@
             />
           </svg>
         </template>
-        <template #default>Kanban</template>
+        <template #default>
+          Kanban
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -49,12 +53,14 @@
             />
           </svg>
         </template>
-        <template #default> Inbox </template>
+        <template #default>
+          Inbox
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -68,9 +74,11 @@
             />
           </svg>
         </template>
-        <template #default>Users</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Users
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -84,9 +92,11 @@
             />
           </svg>
         </template>
-        <template #default>Products</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Products
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -95,12 +105,20 @@
             fill="none"
             viewBox="0 0 18 16"
           >
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
+            />
           </svg>
         </template>
-        <template #default>Sign In</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Sign In
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -118,22 +136,33 @@
             />
           </svg>
         </template>
-        <template #default>Sign Up</template>
-      </SidebarItem>
+        <template #default>
+          Sign Up
+        </template>
+      </fwb-sidebar-item>
 
-      <SidebarCta v-if="isShowCta" label="Beta" @close="toggleCta">
-        <p class="mb-3 text-sm text-blue-800 dark:text-blue-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
-        <a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a>
-      </SidebarCta>
-    </Sidebar>
+      <fwb-sidebar-cta
+        v-if="isShowCta"
+        label="Beta"
+        @close="toggleCta"
+      >
+        <p class="mb-3 text-sm text-blue-800 dark:text-blue-400">
+          Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.
+        </p>
+        <a
+          class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
+          href="#"
+        >Turn new navigation off</a>
+      </fwb-sidebar-cta>
+    </fwb-sidebar>
   </div>
 </template>
 <script setup>
-import { Sidebar, SidebarCta, SidebarItem } from '../../../../src/index'
+import { FwbSidebar, FwbSidebarCta, FwbSidebarItem } from '../../../../src/index'
 import { ref } from 'vue'
 
 const isShowCta = ref(true)
-function toggleCta() {
+function toggleCta () {
   isShowCta.value = !isShowCta.value
 }
 </script>
diff --git a/docs/components/sidebar/examples/SidebarDropdownExample.vue b/docs/components/sidebar/examples/FwbSidebarDropdownExample.vue
similarity index 76%
rename from docs/components/sidebar/examples/SidebarDropdownExample.vue
rename to docs/components/sidebar/examples/FwbSidebarDropdownExample.vue
index 0993e0b8..2a6b2a47 100644
--- a/docs/components/sidebar/examples/SidebarDropdownExample.vue
+++ b/docs/components/sidebar/examples/FwbSidebarDropdownExample.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vp-raw flex flex-col relative">
-    <Sidebar class="!h-full relative">
-      <SidebarItem>
+    <fwb-sidebar class="!h-full relative">
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +14,11 @@
             <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
           </svg>
         </template>
-        <template #default>Dashboard</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Dashboard
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +32,14 @@
             />
           </svg>
         </template>
-        <template #default>Kanban</template>
+        <template #default>
+          Kanban
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
         </template>
-      </SidebarItem>
-      <SidebarDropdownItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-dropdown-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -48,16 +52,24 @@
             <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
           </svg>
         </template>
-        <template #trigger> E-commerce </template>
+        <template #trigger>
+          E-commerce
+        </template>
         <template #default>
-          <SidebarItem class="pl-11"> Products </SidebarItem>
-          <SidebarItem class="pl-11"> Sign In </SidebarItem>
-          <SidebarItem class="pl-11"> Sign Up </SidebarItem>
+          <fwb-sidebar-item class="pl-11">
+            Products
+          </fwb-sidebar-item>
+          <fwb-sidebar-item class="pl-11">
+            Sign In
+          </fwb-sidebar-item>
+          <fwb-sidebar-item class="pl-11">
+            Sign Up
+          </fwb-sidebar-item>
         </template>
-      </SidebarDropdownItem>
-    </Sidebar>
+      </fwb-sidebar-dropdown-item>
+    </fwb-sidebar>
   </div>
 </template>
 <script setup>
-import { Sidebar, SidebarItem, SidebarDropdownItem } from '../../../../src/index'
+import { FwbSidebar, FwbSidebarDropdownItem, FwbSidebarItem } from '../../../../src/index'
 </script>
diff --git a/docs/components/sidebar/examples/SidebarLogoExample.vue b/docs/components/sidebar/examples/FwbSidebarExample.vue
similarity index 83%
rename from docs/components/sidebar/examples/SidebarLogoExample.vue
rename to docs/components/sidebar/examples/FwbSidebarExample.vue
index 95a2015e..36996f4e 100644
--- a/docs/components/sidebar/examples/SidebarLogoExample.vue
+++ b/docs/components/sidebar/examples/FwbSidebarExample.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="vp-raw flex flex-col relative">
-    <Sidebar class="!h-full relative">
-      <SidebarLogo name="Flowbite" logo="https://flowbite.com/docs/images/logo.svg" tag="router-link" />
-      <SidebarItem>
+    <fwb-sidebar class="!h-full relative">
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -15,9 +14,11 @@
             <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
           </svg>
         </template>
-        <template #default>Dashboard</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Dashboard
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -31,12 +32,14 @@
             />
           </svg>
         </template>
-        <template #default>Kanban</template>
+        <template #default>
+          Kanban
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -50,12 +53,14 @@
             />
           </svg>
         </template>
-        <template #default> Inbox </template>
+        <template #default>
+          Inbox
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -69,9 +74,11 @@
             />
           </svg>
         </template>
-        <template #default>Users</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Users
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -85,9 +92,11 @@
             />
           </svg>
         </template>
-        <template #default>Products</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Products
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -96,12 +105,20 @@
             fill="none"
             viewBox="0 0 18 16"
           >
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
+            />
           </svg>
         </template>
-        <template #default>Sign In</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Sign In
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -119,11 +136,13 @@
             />
           </svg>
         </template>
-        <template #default>Sign Up</template>
-      </SidebarItem>
-    </Sidebar>
+        <template #default>
+          Sign Up
+        </template>
+      </fwb-sidebar-item>
+    </fwb-sidebar>
   </div>
 </template>
 <script setup>
-import { Sidebar, SidebarItem, SidebarLogo } from '../../../../src/index'
+import { FwbSidebar, FwbSidebarItem } from '../../../../src/index'
 </script>
diff --git a/docs/components/sidebar/examples/SidebarGroupExample.vue b/docs/components/sidebar/examples/FwbSidebarGroupExample.vue
similarity index 84%
rename from docs/components/sidebar/examples/SidebarGroupExample.vue
rename to docs/components/sidebar/examples/FwbSidebarGroupExample.vue
index 7d088a10..482d9b31 100644
--- a/docs/components/sidebar/examples/SidebarGroupExample.vue
+++ b/docs/components/sidebar/examples/FwbSidebarGroupExample.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vp-raw flex flex-col relative">
-    <Sidebar class="!h-full relative">
-      <SidebarItem>
+    <fwb-sidebar class="!h-full relative">
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +14,11 @@
             <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
           </svg>
         </template>
-        <template #default>Dashboard</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Dashboard
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +32,14 @@
             />
           </svg>
         </template>
-        <template #default>Kanban</template>
+        <template #default>
+          Kanban
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -49,12 +53,14 @@
             />
           </svg>
         </template>
-        <template #default> Inbox </template>
+        <template #default>
+          Inbox
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -68,9 +74,11 @@
             />
           </svg>
         </template>
-        <template #default>Users</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Users
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -84,9 +92,11 @@
             />
           </svg>
         </template>
-        <template #default>Products</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Products
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -95,12 +105,20 @@
             fill="none"
             viewBox="0 0 18 16"
           >
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
+            />
           </svg>
         </template>
-        <template #default>Sign In</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Sign In
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -118,10 +136,12 @@
             />
           </svg>
         </template>
-        <template #default>Sign Up</template>
-      </SidebarItem>
-      <SidebarItemGroup border>
-        <SidebarItem>
+        <template #default>
+          Sign Up
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item-group border>
+        <fwb-sidebar-item>
           <template #icon>
             <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -135,9 +155,11 @@
               />
             </svg>
           </template>
-          <template #default>Upgrade to Pro</template>
-        </SidebarItem>
-        <SidebarItem>
+          <template #default>
+            Upgrade to Pro
+          </template>
+        </fwb-sidebar-item>
+        <fwb-sidebar-item>
           <template #icon>
             <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -149,9 +171,11 @@
               <path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z" />
             </svg>
           </template>
-          <template #default>Documentation</template>
-        </SidebarItem>
-        <SidebarItem>
+          <template #default>
+            Documentation
+          </template>
+        </fwb-sidebar-item>
+        <fwb-sidebar-item>
           <template #icon>
             <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -164,9 +188,11 @@
               <path d="M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z" />
             </svg>
           </template>
-          <template #default>Components</template>
-        </SidebarItem>
-        <SidebarItem>
+          <template #default>
+            Components
+          </template>
+        </fwb-sidebar-item>
+        <fwb-sidebar-item>
           <template #icon>
             <svg
               class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -180,12 +206,14 @@
               />
             </svg>
           </template>
-          <template #default>Help</template>
-        </SidebarItem>
-      </SidebarItemGroup>
-    </Sidebar>
+          <template #default>
+            Help
+          </template>
+        </fwb-sidebar-item>
+      </fwb-sidebar-item-group>
+    </fwb-sidebar>
   </div>
 </template>
 <script setup>
-import { Sidebar, SidebarItemGroup, SidebarItem } from '../../../../src/index'
+import { FwbSidebar, FwbSidebarItem, FwbSidebarItemGroup } from '../../../../src/index'
 </script>
diff --git a/docs/components/sidebar/examples/SidebarExample.vue b/docs/components/sidebar/examples/FwbSidebarLogoExample.vue
similarity index 81%
rename from docs/components/sidebar/examples/SidebarExample.vue
rename to docs/components/sidebar/examples/FwbSidebarLogoExample.vue
index d518a17a..290151f0 100644
--- a/docs/components/sidebar/examples/SidebarExample.vue
+++ b/docs/components/sidebar/examples/FwbSidebarLogoExample.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="vp-raw flex flex-col relative">
-    <Sidebar class="!h-full relative">
-      <SidebarItem>
+    <fwb-sidebar class="!h-full relative">
+      <fwb-sidebar-logo
+        name="Flowbite"
+        logo="https://flowbite.com/docs/images/logo.svg"
+        tag="router-link"
+      />
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +19,11 @@
             <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
           </svg>
         </template>
-        <template #default>Dashboard</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Dashboard
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +37,14 @@
             />
           </svg>
         </template>
-        <template #default>Kanban</template>
+        <template #default>
+          Kanban
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -49,12 +58,14 @@
             />
           </svg>
         </template>
-        <template #default> Inbox </template>
+        <template #default>
+          Inbox
+        </template>
         <template #suffix>
           <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
         </template>
-      </SidebarItem>
-      <SidebarItem>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -68,9 +79,11 @@
             />
           </svg>
         </template>
-        <template #default>Users</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Users
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -84,9 +97,11 @@
             />
           </svg>
         </template>
-        <template #default>Products</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Products
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -95,12 +110,20 @@
             fill="none"
             viewBox="0 0 18 16"
           >
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
+            />
           </svg>
         </template>
-        <template #default>Sign In</template>
-      </SidebarItem>
-      <SidebarItem>
+        <template #default>
+          Sign In
+        </template>
+      </fwb-sidebar-item>
+      <fwb-sidebar-item>
         <template #icon>
           <svg
             class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -118,11 +141,13 @@
             />
           </svg>
         </template>
-        <template #default>Sign Up</template>
-      </SidebarItem>
-    </Sidebar>
+        <template #default>
+          Sign Up
+        </template>
+      </fwb-sidebar-item>
+    </fwb-sidebar>
   </div>
 </template>
 <script setup>
-import { Sidebar, SidebarItem } from '../../../../src/index'
+import { FwbSidebar, FwbSidebarItem, FwbSidebarLogo } from '../../../../src/index'
 </script>
diff --git a/docs/components/spinner.md b/docs/components/spinner.md
index 05a070b2..87450aa5 100644
--- a/docs/components/spinner.md
+++ b/docs/components/spinner.md
@@ -1,7 +1,7 @@
 <script setup>
-import SpinnerBasicExample from './spinner/examples/SpinnerBasicExample.vue';
-import SpinnerSizeExample from './spinner/examples/SpinnerSizeExample.vue';
-import SpinnerColorExample from './spinner/examples/SpinnerColorExample.vue';
+import FwbSpinnerExample from './spinner/examples/FwbSpinnerExample.vue'
+import FwbSpinnerExampleColor from './spinner/examples/FwbSpinnerExampleColor.vue'
+import FwbSpinnerExampleSize from './spinner/examples/FwbSpinnerExampleSize.vue'
 </script>
 
 # Vue Spinner - Flowbite
@@ -16,79 +16,60 @@ Original reference: [https://flowbite.com/docs/components/spinner/](https://flow
 
 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
 
-<SpinnerBasicExample />
-
+<fwb-spinner-example />
 ```vue
-<script setup>
-import { Spinner } from 'flowbite-vue'
-</script>
 <template>
-  <spinner />
+  <fwb-spinner />
 </template>
-```
-
-## Prop - size
-
-```typescript
-type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
 
-defineProps({
-    size: {
-        type: String as PropType<SpinnerSize>, // any string for w-${size} and h-${size} tailwind classes
-        default: '4',
-    },
-})
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>
 ```
 
+## Prop - size
 
-<SpinnerSizeExample />
-
+<fwb-spinner-example-size />
 ```vue
-<script setup>
-import { Spinner } from 'flowbite-vue'
-</script>
 <template>
-  <spinner />
-  <spinner size="6" />
-  <spinner size="8" />
-  <spinner size="10" />
-  <spinner size="12" />
+  <fwb-spinner />
+  <fwb-spinner size="6" />
+  <fwb-spinner size="8" />
+  <fwb-spinner size="10" />
+  <fwb-spinner size="12" />
 </template>
-```
 
-
-## Prop - color
-
-```typescript
-type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
-
-defineProps({
-    color: {
-        type: String as PropType<SpinnerColor>,
-        default: 'blue',
-    },
-})
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>
 ```
 
+## Prop - color
 
-<SpinnerColorExample />
-
+<fwb-spinner-example-color />
 ```vue
-<script setup>
-import { Spinner } from 'flowbite-vue'
-</script>
 <template>
-  <spinner color="blue" size="6" />
-  <spinner color="pink" size="8" />
-  <spinner color="gray" size="10" />
-  <spinner color="green" size="12" />
-  <spinner color="purple" size="10" />
-  <spinner color="white" size="8" />
-  <spinner color="yellow" size="6" />
-  <spinner color="red" size="4" />
+  <fwb-spinner color="blue" />
+  <fwb-spinner color="gray" />
+  <fwb-spinner color="green" />
+  <fwb-spinner color="pink" />
+  <fwb-spinner color="purple" />
+  <fwb-spinner color="red" />
+  <fwb-spinner color="white" />
+  <fwb-spinner color="yellow" />
 </template>
+
+<script setup>
+import { FwbSpinner } from 'flowbite-vue'
+</script>
 ```
 
+## API
+
+### Props
+| Name  | Values                                                                                  | Default |
+|-------|-----------------------------------------------------------------------------------------|---------|
+| color | `blue`, `gray`, `green`, `pink`, `purple`, `red`, `white`, `yellow`                     | `blue`  |
+| size  | `0`, `0.5`, `1`, `1.5`, `10`, `11`, `12`, `2`, `2.5`, `3`, `4`, `5`, `6`, `7`, `8`, `9` | `4`     |
diff --git a/docs/components/spinner/examples/FwbSpinnerExample.vue b/docs/components/spinner/examples/FwbSpinnerExample.vue
new file mode 100644
index 00000000..2429fff8
--- /dev/null
+++ b/docs/components/spinner/examples/FwbSpinnerExample.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="vp-raw">
+    <fwb-spinner />
+  </div>
+</template>
+
+<script setup>
+import { FwbSpinner } from '../../../../src/index'
+</script>
diff --git a/docs/components/spinner/examples/FwbSpinnerExampleColor.vue b/docs/components/spinner/examples/FwbSpinnerExampleColor.vue
new file mode 100644
index 00000000..4f24c6b6
--- /dev/null
+++ b/docs/components/spinner/examples/FwbSpinnerExampleColor.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw flex items-center gap-2">
+    <fwb-spinner color="blue" />
+    <fwb-spinner color="gray" />
+    <fwb-spinner color="green" />
+    <fwb-spinner color="pink" />
+    <fwb-spinner color="purple" />
+    <fwb-spinner color="red" />
+    <fwb-spinner color="white" />
+    <fwb-spinner color="yellow" />
+  </div>
+</template>
+
+<script setup>
+import { FwbSpinner } from '../../../../src/index'
+</script>
diff --git a/docs/components/spinner/examples/FwbSpinnerExampleSize.vue b/docs/components/spinner/examples/FwbSpinnerExampleSize.vue
new file mode 100644
index 00000000..f7fb12d6
--- /dev/null
+++ b/docs/components/spinner/examples/FwbSpinnerExampleSize.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex items-center gap-2">
+    <fwb-spinner />
+    <fwb-spinner size="6" />
+    <fwb-spinner size="8" />
+    <fwb-spinner size="10" />
+    <fwb-spinner size="12" />
+  </div>
+</template>
+
+<script setup>
+import { FwbSpinner } from '../../../../src/index'
+</script>
diff --git a/docs/components/spinner/examples/SpinnerBasicExample.vue b/docs/components/spinner/examples/SpinnerBasicExample.vue
deleted file mode 100644
index fb46c50b..00000000
--- a/docs/components/spinner/examples/SpinnerBasicExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <spinner />
-  </div>
-</template>
-<script setup>
-import { Spinner } from '../../../../src/index'
-</script>
diff --git a/docs/components/spinner/examples/SpinnerColorExample.vue b/docs/components/spinner/examples/SpinnerColorExample.vue
deleted file mode 100644
index bb7b85de..00000000
--- a/docs/components/spinner/examples/SpinnerColorExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <spinner color="blue" size="6" />
-    <spinner color="pink" size="8" />
-    <spinner color="gray" size="10" />
-    <spinner color="green" size="12" />
-    <spinner color="purple" size="10" />
-    <spinner color="white" size="8" />
-    <spinner color="yellow" size="6" />
-    <spinner color="red" size="4" />
-  </div>
-</template>
-<script setup>
-import { Spinner } from '../../../../src/index'
-</script>
diff --git a/docs/components/spinner/examples/SpinnerSizeExample.vue b/docs/components/spinner/examples/SpinnerSizeExample.vue
deleted file mode 100644
index 5f00ebdb..00000000
--- a/docs/components/spinner/examples/SpinnerSizeExample.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <spinner />
-    <spinner size="6" />
-    <spinner size="8" />
-    <spinner size="10" />
-    <spinner size="12" />
-  </div>
-</template>
-<script setup>
-import { Spinner } from '../../../../src/index'
-</script>
diff --git a/docs/components/table.md b/docs/components/table.md
index 0e9dc5fa..9027ec2d 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -1,8 +1,8 @@
 <script setup>
-import TableExample from './table/examples/TableExample.vue';
-import TableStripedExample from './table/examples/TableStripedExample.vue';
-import TableStripedColumnsExample from './table/examples/TableStripedColumnsExample.vue';
-import TableHoverableExample from './table/examples/TableHoverableExample.vue';
+import FwbTableExample from './table/examples/FwbTableExample.vue'
+import FwbTableExampleHoverable from './table/examples/FwbTableExampleHoverable.vue'
+import FwbTableExampleStriped from './table/examples/FwbTableExampleStriped.vue'
+import FwbTableExampleStripedColumns from './table/examples/FwbTableExampleStripedColumns.vue'
 </script>
 # Vue Table - Flowbite
 
@@ -16,204 +16,263 @@ Original reference: [https://flowbite.com/docs/components/tables/](https://flowb
 
 ## Basic example
 
-<TableExample />
-
+<fwb-table-example />
 ```vue
 <template>
-  <Table>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
+  <fwb-table>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
 </template>
+
 <script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
 </script>
-
 ```
 
 ## Striped example
 
-<TableStripedExample />
-
+<fwb-table-example-striped />
 ```vue
 <template>
-  <Table striped>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
+  <fwb-table striped>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
 </template>
+
 <script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
 </script>
 
 ```
 
 ## Striped columns example
 
-<TableStripedColumnsExample />
-
+<fwb-table-example-striped-columns />
 ```vue
 <template>
-  <Table striped-columns>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
+  <fwb-table striped-columns>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell><span class="sr-only">Edit</span></fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
 </template>
+
 <script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
 </script>
-
 ```
 
 ## Hoverable example
 
-<TableHoverableExample />
-
+<fwb-table-example-hoverable />
 ```vue
 <template>
-  <Table hoverable>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
+  <fwb-table hoverable>
+    <fwb-table-head>
+      <fwb-table-head-cell>Product name</fwb-table-head-cell>
+      <fwb-table-head-cell>Color</fwb-table-head-cell>
+      <fwb-table-head-cell>Category</fwb-table-head-cell>
+      <fwb-table-head-cell>Price</fwb-table-head-cell>
+      <fwb-table-head-cell>
+        <span class="sr-only">Edit</span>
+      </fwb-table-head-cell>
+    </fwb-table-head>
+    <fwb-table-body>
+      <fwb-table-row>
+        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+        <fwb-table-cell>Sliver</fwb-table-cell>
+        <fwb-table-cell>Laptop</fwb-table-cell>
+        <fwb-table-cell>$2999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+        <fwb-table-cell>White</fwb-table-cell>
+        <fwb-table-cell>Laptop PC</fwb-table-cell>
+        <fwb-table-cell>$1999</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+      <fwb-table-row>
+        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+        <fwb-table-cell>Black</fwb-table-cell>
+        <fwb-table-cell>Accessories</fwb-table-cell>
+        <fwb-table-cell>$99</fwb-table-cell>
+        <fwb-table-cell>
+          <fwb-a href="#">
+            Edit
+          </fwb-a>
+        </fwb-table-cell>
+      </fwb-table-row>
+    </fwb-table-body>
+  </fwb-table>
 </template>
+
 <script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from 'flowbite-vue'
 </script>
-
 ```
diff --git a/docs/components/table/examples/FwbTableExample.vue b/docs/components/table/examples/FwbTableExample.vue
new file mode 100644
index 00000000..e8b97c70
--- /dev/null
+++ b/docs/components/table/examples/FwbTableExample.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="vp-raw">
+    <fwb-table>
+      <fwb-table-head>
+        <fwb-table-head-cell>Product name</fwb-table-head-cell>
+        <fwb-table-head-cell>Color</fwb-table-head-cell>
+        <fwb-table-head-cell>Category</fwb-table-head-cell>
+        <fwb-table-head-cell>Price</fwb-table-head-cell>
+        <fwb-table-head-cell>
+          <span class="sr-only">Edit</span>
+        </fwb-table-head-cell>
+      </fwb-table-head>
+      <fwb-table-body>
+        <fwb-table-row>
+          <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+          <fwb-table-cell>Sliver</fwb-table-cell>
+          <fwb-table-cell>Laptop</fwb-table-cell>
+          <fwb-table-cell>$2999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+          <fwb-table-cell>White</fwb-table-cell>
+          <fwb-table-cell>Laptop PC</fwb-table-cell>
+          <fwb-table-cell>$1999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+          <fwb-table-cell>Black</fwb-table-cell>
+          <fwb-table-cell>Accessories</fwb-table-cell>
+          <fwb-table-cell>$99</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+      </fwb-table-body>
+    </fwb-table>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/table/examples/FwbTableExampleHoverable.vue b/docs/components/table/examples/FwbTableExampleHoverable.vue
new file mode 100644
index 00000000..0eef58b5
--- /dev/null
+++ b/docs/components/table/examples/FwbTableExampleHoverable.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="vp-raw">
+    <fwb-table hoverable>
+      <fwb-table-head>
+        <fwb-table-head-cell>Product name</fwb-table-head-cell>
+        <fwb-table-head-cell>Color</fwb-table-head-cell>
+        <fwb-table-head-cell>Category</fwb-table-head-cell>
+        <fwb-table-head-cell>Price</fwb-table-head-cell>
+        <fwb-table-head-cell>
+          <span class="sr-only">Edit</span>
+        </fwb-table-head-cell>
+      </fwb-table-head>
+      <fwb-table-body>
+        <fwb-table-row>
+          <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+          <fwb-table-cell>Sliver</fwb-table-cell>
+          <fwb-table-cell>Laptop</fwb-table-cell>
+          <fwb-table-cell>$2999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+          <fwb-table-cell>White</fwb-table-cell>
+          <fwb-table-cell>Laptop PC</fwb-table-cell>
+          <fwb-table-cell>$1999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+          <fwb-table-cell>Black</fwb-table-cell>
+          <fwb-table-cell>Accessories</fwb-table-cell>
+          <fwb-table-cell>$99</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+      </fwb-table-body>
+    </fwb-table>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/table/examples/FwbTableExampleStriped.vue b/docs/components/table/examples/FwbTableExampleStriped.vue
new file mode 100644
index 00000000..e5236bc4
--- /dev/null
+++ b/docs/components/table/examples/FwbTableExampleStriped.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="vp-raw">
+    <fwb-table striped>
+      <fwb-table-head>
+        <fwb-table-head-cell>Product name</fwb-table-head-cell>
+        <fwb-table-head-cell>Color</fwb-table-head-cell>
+        <fwb-table-head-cell>Category</fwb-table-head-cell>
+        <fwb-table-head-cell>Price</fwb-table-head-cell>
+        <fwb-table-head-cell>
+          <span class="sr-only">Edit</span>
+        </fwb-table-head-cell>
+      </fwb-table-head>
+      <fwb-table-body>
+        <fwb-table-row>
+          <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+          <fwb-table-cell>Sliver</fwb-table-cell>
+          <fwb-table-cell>Laptop</fwb-table-cell>
+          <fwb-table-cell>$2999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+          <fwb-table-cell>White</fwb-table-cell>
+          <fwb-table-cell>Laptop PC</fwb-table-cell>
+          <fwb-table-cell>$1999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+          <fwb-table-cell>Black</fwb-table-cell>
+          <fwb-table-cell>Accessories</fwb-table-cell>
+          <fwb-table-cell>$99</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+      </fwb-table-body>
+    </fwb-table>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/table/examples/FwbTableExampleStripedColumns.vue b/docs/components/table/examples/FwbTableExampleStripedColumns.vue
new file mode 100644
index 00000000..c22f0626
--- /dev/null
+++ b/docs/components/table/examples/FwbTableExampleStripedColumns.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="vp-raw">
+    <fwb-table striped-columns>
+      <fwb-table-head>
+        <fwb-table-head-cell>Product name</fwb-table-head-cell>
+        <fwb-table-head-cell>Color</fwb-table-head-cell>
+        <fwb-table-head-cell>Category</fwb-table-head-cell>
+        <fwb-table-head-cell>Price</fwb-table-head-cell>
+        <fwb-table-head-cell><span class="sr-only">Edit</span></fwb-table-head-cell>
+      </fwb-table-head>
+      <fwb-table-body>
+        <fwb-table-row>
+          <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
+          <fwb-table-cell>Sliver</fwb-table-cell>
+          <fwb-table-cell>Laptop</fwb-table-cell>
+          <fwb-table-cell>$2999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
+          <fwb-table-cell>White</fwb-table-cell>
+          <fwb-table-cell>Laptop PC</fwb-table-cell>
+          <fwb-table-cell>$1999</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+        <fwb-table-row>
+          <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
+          <fwb-table-cell>Black</fwb-table-cell>
+          <fwb-table-cell>Accessories</fwb-table-cell>
+          <fwb-table-cell>$99</fwb-table-cell>
+          <fwb-table-cell>
+            <fwb-a href="#">
+              Edit
+            </fwb-a>
+          </fwb-table-cell>
+        </fwb-table-row>
+      </fwb-table-body>
+    </fwb-table>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbA,
+  FwbTable,
+  FwbTableBody,
+  FwbTableCell,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableRow,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue
deleted file mode 100644
index 0258b50c..00000000
--- a/docs/components/table/examples/TableExample.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <Table>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
-</template>
-<script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
-</script>
diff --git a/docs/components/table/examples/TableHoverableExample.vue b/docs/components/table/examples/TableHoverableExample.vue
deleted file mode 100644
index 40488b02..00000000
--- a/docs/components/table/examples/TableHoverableExample.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <Table hoverable>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
-</template>
-<script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
-</script>
diff --git a/docs/components/table/examples/TableStripedColumnsExample.vue b/docs/components/table/examples/TableStripedColumnsExample.vue
deleted file mode 100644
index 7508083c..00000000
--- a/docs/components/table/examples/TableStripedColumnsExample.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <Table striped-columns>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
-</template>
-<script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
-</script>
diff --git a/docs/components/table/examples/TableStripedExample.vue b/docs/components/table/examples/TableStripedExample.vue
deleted file mode 100644
index bfbb7d5e..00000000
--- a/docs/components/table/examples/TableStripedExample.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <Table striped>
-    <table-head>
-      <table-head-cell>Product name</table-head-cell>
-      <table-head-cell>Color</table-head-cell>
-      <table-head-cell>Category</table-head-cell>
-      <table-head-cell>Price</table-head-cell>
-      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-    </table-head>
-    <table-body>
-      <table-row>
-        <table-cell>Apple MacBook Pro 17"</table-cell>
-        <table-cell>Sliver</table-cell>
-        <table-cell>Laptop</table-cell>
-        <table-cell>$2999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Microsoft Surface Pro</table-cell>
-        <table-cell>White</table-cell>
-        <table-cell>Laptop PC</table-cell>
-        <table-cell>$1999</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-      <table-row>
-        <table-cell>Magic Mouse 2</table-cell>
-        <table-cell>Black</table-cell>
-        <table-cell>Accessories</table-cell>
-        <table-cell>$99</table-cell>
-        <table-cell>
-          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-        </table-cell>
-      </table-row>
-    </table-body>
-  </Table>
-</template>
-<script setup>
-import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
-</script>
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 708d1aac..752d2802 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -1,7 +1,9 @@
 <script setup>
-import TabsDefaultExample from './tabs/examples/TabsDefaultExample.vue';
-import TabsPillsExample from './tabs/examples/TabsPillsExample.vue';
-import TabsUnderlineExample from './tabs/examples/TabsUnderlineExample.vue';
+import FwbTabsExample from './tabs/examples/FwbTabsExample.vue'
+import FwbTabsExampleInteraction from './tabs/examples/FwbTabsExampleInteraction.vue'
+import FwbTabsExampleDirective from './tabs/examples/FwbTabsExampleDirective.vue'
+import FwbTabsExamplePills from './tabs/examples/FwbTabsExamplePills.vue'
+import FwbTabsExampleUnderline from './tabs/examples/FwbTabsExampleUnderline.vue'
 </script>
 
 # Vue Tabs - Flowbite
@@ -18,141 +20,161 @@ The tabs component can be used either as an extra navigational hierarchy complem
 
 ## Prop - variant (default)
 
-```typescript
-export type TabsVariant = 'default' | 'underline' | 'pills'
-
-defineProps({
-    variant: {
-        type: String as PropType<TabsVariant>,
-        default: 'default',
-    },
-})
-```
-
-
-<TabsDefaultExample />
-
+<fwb-tabs-example />
 ```vue
+<template>
+  <fwb-tabs v-model="activeTab" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
 <script setup>
 import { ref } from 'vue'
-import { Tabs, Tab } from 'flowbite-vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
 const activeTab = ref('first')
 </script>
-<template>
-  <tabs v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
-    <tab name="first" title="First">
-      Lorem...
-    </tab>
-    <tab name="second" title="Second">
-      Lorem...
-    </tab>
-    <tab name="third" title="Third">
-      Lorem...
-    </tab>
-    <tab name="fourth" title="Fourth" :disabled="true">
-      Lorem...
-    </tab>
-  </tabs>
-</template>
 ```
 
 ## Prop - variant (underline)
 
-<TabsUnderlineExample />
-
+<fwb-tabsExample-underline />
 ```vue
+<template>
+  <fwb-tabs v-model="activeTab" variant="underline" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
 <script setup>
 import { ref } from 'vue'
-import { Tabs, Tab } from 'flowbite-vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
 const activeTab = ref('first')
 </script>
-<template>
-  <tabs variant="underline" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
-    <tab name="first" title="First">
-      Lorem...
-    </tab>
-    <tab name="second" title="Second">
-      Lorem...
-    </tab>
-    <tab name="third" title="Third">
-      Lorem...
-    </tab>
-    <tab name="fourth" title="Fourth" :disabled="true">
-      Lorem...
-    </tab>
-  </tabs>
-</template>
 ```
 
 ## Prop - variant (pills)
 
-<TabsPillsExample />
-
-
+<fwb-tabs-example-pills />
 ```vue
+<template>
+  <fwb-tabs v-model="activeTab" variant="pills" class="p-5">
+    <fwb-tab name="first" title="First" >
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+ </div>
+</template>
+
 <script setup>
 import { ref } from 'vue'
-import { Tabs, Tab } from 'flowbite-vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
 const activeTab = ref('first')
 </script>
-<template>
-  <tabs variant="pills" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
-    <tab name="first" title="First">
-      Lorem...
-    </tab>
-    <tab name="second" title="Second">
-      Lorem...
-    </tab>
-    <tab name="third" title="Third">
-      Lorem...
-    </tab>
-    <tab name="fourth" title="Fourth" :disabled="true">
-      Lorem...
-    </tab>
-  </tabs>
-</template>
 ```
 
 ## Prop - directive
 
 Use this props if you want to control which directive to use for rendering every tab content
 
-```typescript
-export type TabsVariant = 'default' | 'underline' | 'pills'
+<fwb-tabs-example-directive />
+```vue
+<template>
+  <fwb-tabs v-model="activeTab" directive="show" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from 'flowbite-vue'
 
-defineProps({
-    directive: {
-        type: String as PropType<'if' | 'show'>,
-        default: 'if',
-    },
-})
+const activeTab = ref('first')
+</script>
 ```
 
 ## Tab pane interaction
 
 You can add `@click:pane` to Tabs component to intercept click on tab pane.
+
+<fwb-tabs-example-interaction />
 ```vue
+<template>
+  <fwb-tabs @click:pane="handlePaneClick" v-model="activeTab" class="p-5">
+    <fwb-tab name="first" title="First">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="second" title="Second">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="third" title="Third">
+      Lorem ipsum dolor...
+    </fwb-tab>
+    <fwb-tab name="fourth" title="Fourth" disabled>
+      Lorem ipsum dolor...
+    </fwb-tab>
+  </fwb-tabs>
+</template>
+
 <script setup>
 import { ref } from 'vue'
-import { Tabs, Tab } from 'flowbite-vue'
-function handlePaneClick(): void {
-    console.log("Click!")
-}
+import { FwbTab, FwbTabs } from 'flowbite-vue'
+
+const activeTab = ref('first')
+
+const handlePaneClick = () => { console.log('Click!') }
 </script>
-<template>
-  <tabs variant="pills" v-model="activeTab" class="p-5" @click:pane="handlePaneClick">
-    <tab name="first" title="First">
-      Lorem...
-    </tab>
-    <tab name="second" title="Second">
-      Lorem...
-    </tab>
-    <tab name="third" title="Third">
-      Lorem...
-    </tab>
-    <tab name="fourth" title="Fourth" :disabled="true">
-      Lorem...
-    </tab>
-  </tabs>
-</template>
-```
\ No newline at end of file
+```
+
+## API
+
+### Props
+| Name       | Values                         | Default   |
+|------------|--------------------------------|-----------|
+| directive  | `if`, `show`                   | `if`      |
+| modelValue | `string`                       | `''`      |
+| variant    | `default`, `underline`, `pill` | `default` |
diff --git a/docs/components/tabs/examples/FwbTabsExample.vue b/docs/components/tabs/examples/FwbTabsExample.vue
new file mode 100644
index 00000000..a4f8ab81
--- /dev/null
+++ b/docs/components/tabs/examples/FwbTabsExample.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="vp-raw">
+    <fwb-tabs
+      v-model="activeTab"
+      class="p-5"
+    >
+      <fwb-tab
+        name="first"
+        title="First"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque.
+      </fwb-tab>
+      <fwb-tab
+        name="second"
+        title="Second"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora?
+      </fwb-tab>
+      <fwb-tab
+        name="third"
+        title="Third"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat?
+      </fwb-tab>
+      <fwb-tab
+        name="fourth"
+        title="Fourth"
+        disabled
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore!
+      </fwb-tab>
+    </fwb-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from '../../../../src/index'
+
+const activeTab = ref('first')
+</script>
diff --git a/docs/components/tabs/examples/FwbTabsExampleDirective.vue b/docs/components/tabs/examples/FwbTabsExampleDirective.vue
new file mode 100644
index 00000000..a8f7be4c
--- /dev/null
+++ b/docs/components/tabs/examples/FwbTabsExampleDirective.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="vp-raw">
+    <fwb-tabs
+      v-model="activeTab"
+      class="p-5"
+      directive="show"
+    >
+      <fwb-tab
+        name="first"
+        title="First"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque.
+      </fwb-tab>
+      <fwb-tab
+        name="second"
+        title="Second"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora?
+      </fwb-tab>
+      <fwb-tab
+        name="third"
+        title="Third"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat?
+      </fwb-tab>
+      <fwb-tab
+        name="fourth"
+        title="Fourth"
+        disabled
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore!
+      </fwb-tab>
+    </fwb-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from '../../../../src/index'
+
+const activeTab = ref('first')
+</script>
diff --git a/docs/components/tabs/examples/FwbTabsExampleInteraction.vue b/docs/components/tabs/examples/FwbTabsExampleInteraction.vue
new file mode 100644
index 00000000..6bfa6c36
--- /dev/null
+++ b/docs/components/tabs/examples/FwbTabsExampleInteraction.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="vp-raw">
+    <fwb-tabs
+      v-model="activeTab"
+      class="p-5"
+      @click:pane="handlePaneClick"
+    >
+      <fwb-tab
+        name="first"
+        title="First"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores odio minima temporibus eligendi deleniti vitae illo quo, fuga nobis saepe error totam inventore ullam accusamus, deserunt unde est. Atque.
+      </fwb-tab>
+      <fwb-tab
+        name="second"
+        title="Second"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos numquam vero debitis, ex nesciunt illum distinctio, recusandae officiis nisi optio ut alias voluptatibus sint? Delectus dolores consequatur fugit dolore tempora?
+      </fwb-tab>
+      <fwb-tab
+        name="third"
+        title="Third"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis soluta consequuntur. Distinctio hic perspiciatis sunt dignissimos non nemo aspernatur eum velit sed accusantium, asperiores maiores laborum facere quibusdam placeat?
+      </fwb-tab>
+      <fwb-tab
+        name="fourth"
+        title="Fourth"
+        disabled
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime natus tenetur officiis aspernatur, ipsam dolorem rerum doloribus? Maxime, aliquid accusamus ad eaque odit dolore doloremque blanditiis natus magnam possimus labore!
+      </fwb-tab>
+    </fwb-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTab, FwbTabs } from '../../../../src/index'
+
+const activeTab = ref('first')
+
+const handlePaneClick = () => {
+  console.log('Click!')
+}
+</script>
diff --git a/docs/components/tabs/examples/TabsUnderlineExample.vue b/docs/components/tabs/examples/FwbTabsExamplePills.vue
similarity index 67%
rename from docs/components/tabs/examples/TabsUnderlineExample.vue
rename to docs/components/tabs/examples/FwbTabsExamplePills.vue
index 942f0ae3..d3323b9f 100644
--- a/docs/components/tabs/examples/TabsUnderlineExample.vue
+++ b/docs/components/tabs/examples/FwbTabsExamplePills.vue
@@ -1,23 +1,42 @@
 <template>
   <div class="vp-raw">
-    <tabs variant="underline" v-model="activeTab" class="p-5">
-      <tab name="first" title="First">
+    <fwb-tabs
+      v-model="activeTab"
+      variant="pills"
+      class="p-5"
+    >
+      <fwb-tab
+        name="first"
+        title="First"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
-      </tab>
-      <tab name="second" title="Second">
+      </fwb-tab>
+      <fwb-tab
+        name="second"
+        title="Second"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
-      </tab>
-      <tab name="third" title="Third">
+      </fwb-tab>
+      <fwb-tab
+        name="third"
+        title="Third"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
-      </tab>
-      <tab name="fourth" title="Fourth" :disabled="true">
+      </fwb-tab>
+      <fwb-tab
+        name="fourth"
+        title="Fourth"
+        disabled
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
-      </tab>
-    </tabs>
+      </fwb-tab>
+    </fwb-tabs>
   </div>
 </template>
+
 <script setup>
 import { ref } from 'vue'
-import { Tabs, Tab } from '../../../../src/index'
+import { FwbTab, FwbTabs } from '../../../../src/index'
+
 const activeTab = ref('first')
 </script>
diff --git a/docs/components/tabs/examples/TabsPillsExample.vue b/docs/components/tabs/examples/FwbTabsExampleUnderline.vue
similarity index 67%
rename from docs/components/tabs/examples/TabsPillsExample.vue
rename to docs/components/tabs/examples/FwbTabsExampleUnderline.vue
index 9ed000eb..c83c64e8 100644
--- a/docs/components/tabs/examples/TabsPillsExample.vue
+++ b/docs/components/tabs/examples/FwbTabsExampleUnderline.vue
@@ -1,23 +1,42 @@
 <template>
   <div class="vp-raw">
-    <tabs variant="pills" v-model="activeTab" class="p-5">
-      <tab name="first" title="First">
+    <fwb-tabs
+      v-model="activeTab"
+      variant="underline"
+      class="p-5"
+    >
+      <fwb-tab
+        name="first"
+        title="First"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
-      </tab>
-      <tab name="second" title="Second">
+      </fwb-tab>
+      <fwb-tab
+        name="second"
+        title="Second"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
-      </tab>
-      <tab name="third" title="Third">
+      </fwb-tab>
+      <fwb-tab
+        name="third"
+        title="Third"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
-      </tab>
-      <tab name="fourth" title="Fourth" :disabled="true">
+      </fwb-tab>
+      <fwb-tab
+        name="fourth"
+        title="Fourth"
+        disabled
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
-      </tab>
-    </tabs>
+      </fwb-tab>
+    </fwb-tabs>
   </div>
 </template>
+
 <script setup>
 import { ref } from 'vue'
-import { Tabs, Tab } from '../../../../src/index'
+import { FwbTab, FwbTabs } from '../../../../src/index'
+
 const activeTab = ref('first')
 </script>
diff --git a/docs/components/tabs/examples/TabsDefaultExample.vue b/docs/components/tabs/examples/TabsDefaultExample.vue
deleted file mode 100644
index eb838e1d..00000000
--- a/docs/components/tabs/examples/TabsDefaultExample.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <tabs v-model="activeTab" class="p-5">
-      <tab name="first" title="First">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, id, nisi? Enim excepturi id minus molestias quaerat qui rem repudiandae sed tempore ullam voluptate, voluptatum. Consequuntur illum possimus tempora totam.
-      </tab>
-      <tab name="second" title="Second">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur expedita explicabo facere facilis fugit illo laboriosam minus molestias nulla placeat porro quaerat, quo repellat sapiente similique temporibus voluptate. Nemo!
-      </tab>
-      <tab name="third" title="Third">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias assumenda consequatur, dicta eius eos excepturi hic magnam maxime molestias nisi perferendis provident quia. Aliquam consequatur esse ex sit velit.
-      </tab>
-      <tab name="fourth" title="Fourth" :disabled="true">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deleniti dolores ea eligendi quis, ratione repellat temporibus veniam veritatis voluptates. Distinctio enim eos illo incidunt ipsam provident, quaerat quia vel!
-      </tab>
-    </tabs>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-import { Tabs, Tab } from '../../../../src/index'
-const activeTab = ref('first')
-</script>
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index 4ec19751..e2ba755f 100644
--- a/docs/components/textarea.md
+++ b/docs/components/textarea.md
@@ -1,6 +1,6 @@
 <script setup>
-import DefaultTextarea from './textarea/examples/DefaultTextarea.vue'
-import CommentTextarea from './textarea/examples/CommentTextarea.vue'
+import FwbTextareaExample from './textarea/examples/FwbTextareaExample.vue'
+import FwbTextareaExampleComment from './textarea/examples/FwbTextareaExampleComment.vue'
 </script>
 
 # Vue Textarea - Flowbite
@@ -17,49 +17,79 @@ Original reference: [https://flowbite.com/docs/forms/textarea/](https://flowbite
 
 Get started with the default example of a textarea component below.
 
+<fwb-textarea-example />
 ```vue
 <template>
-  <Textarea rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
+  <fwb-textarea
+    v-model="message"
+    :rows="4"
+    label="Your message"
+    placeholder="Write you message..."
+  />
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { Textarea } from 'flowbite-vue'
+import { FwbTextarea } from 'flowbite-vue'
 
 const message = ref('')
 </script>
-
 ```
-<DefaultTextarea />
 
 ## Comment box
 
 Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
 
+<fwb-textarea-example-comment />
 ```vue
 <template>
   <div>
     <form>
-      <Textarea custom rows="3" placeholder="Write you message..." label="Your message">
+      <fwb-textarea
+        v-model="message"
+        :rows="3"
+        custom
+        label="Your message"
+        placeholder="Write you message..."
+      >
         <template #footer>
           <div class="flex items-center justify-between">
-            <Button type="submit">Post comment</Button>
+            <fwb-button type="submit">
+              Post comment
+            </fwb-button>
             <div class="flex">
-              <Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></Button>
-              <Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></Button>
-              <Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></Button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color square>
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square >
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
+              <fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square>
+                <svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </fwb-button>
             </div>
           </div>
         </template>
       </Textarea>
     </form>
-    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline">Community Guidelines</a>.</p>
+    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
+      Remember, contributions to this topic should follow our
+      <fwb-a href="#">Community Guidelines</fwb-a>.
+    </p>
   </div>
 </template>
 
 <script setup>
-import { Button, Textarea } from 'flowbite-vue'
+import { ref } from 'vue'
+import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'
+
+const message = ref('')
 </script>
 ```
-
-<CommentTextarea />
diff --git a/docs/components/textarea/examples/CommentTextarea.vue b/docs/components/textarea/examples/CommentTextarea.vue
deleted file mode 100644
index 08d5fe24..00000000
--- a/docs/components/textarea/examples/CommentTextarea.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <form>
-      <Textarea custom rows="3" placeholder="Write you message..." v-model="message" label="Your message">
-        <template #footer>
-          <div class="flex items-center justify-between">
-            <Button type="submit">Post comment</Button>
-            <div class="flex">
-              <Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></Button>
-              <Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></Button>
-              <Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></Button>
-            </div>
-          </div>
-        </template>
-      </Textarea>
-    </form>
-    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline">Community Guidelines</a>.</p>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Textarea from '../../../../src/components/Textarea/Textarea.vue'
-import Button from '../../../../src/components/Button/Button.vue'
-
-const message = ref('')
-</script>
diff --git a/docs/components/textarea/examples/DefaultTextarea.vue b/docs/components/textarea/examples/DefaultTextarea.vue
deleted file mode 100644
index f42924da..00000000
--- a/docs/components/textarea/examples/DefaultTextarea.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <Textarea rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Textarea from '../../../../src/components/Textarea/Textarea.vue'
-
-const message = ref('')
-</script>
diff --git a/docs/components/textarea/examples/FwbTextareaExample.vue b/docs/components/textarea/examples/FwbTextareaExample.vue
new file mode 100644
index 00000000..46cbc8f6
--- /dev/null
+++ b/docs/components/textarea/examples/FwbTextareaExample.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw">
+    <fwb-textarea
+      v-model="message"
+      :rows="4"
+      label="Your message"
+      placeholder="Write you message..."
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbTextarea } from '../../../../src/index'
+
+const message = ref('')
+</script>
diff --git a/docs/components/textarea/examples/FwbTextareaExampleComment.vue b/docs/components/textarea/examples/FwbTextareaExampleComment.vue
new file mode 100644
index 00000000..620808bb
--- /dev/null
+++ b/docs/components/textarea/examples/FwbTextareaExampleComment.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="vp-raw">
+    <fwb-textarea
+      v-model="message"
+      :rows="3"
+      custom
+      label="Your message"
+      placeholder="Write you message..."
+    >
+      <template #footer>
+        <div class="flex items-center justify-between">
+          <fwb-button type="submit">
+            Post comment
+          </fwb-button>
+          <div class="flex">
+            <fwb-button
+              class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600"
+              color
+              square
+            >
+              <svg
+                class="w-6 h-6"
+                fill="none"
+                stroke-width="1.5"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </fwb-button>
+            <fwb-button
+              class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600"
+              color=""
+              square
+            >
+              <svg
+                class="w-6 h-6"
+                fill="none"
+                stroke-width="1.5"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </fwb-button>
+            <fwb-button
+              class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600"
+              color=""
+              square
+            >
+              <svg
+                class="w-6 h-6"
+                fill="none"
+                stroke-width="1.5"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </fwb-button>
+          </div>
+        </div>
+      </template>
+    </fwb-textarea>
+    <p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
+      Remember, contributions to this topic should follow our
+      <fwb-a href="#">
+        Community Guidelines
+      </fwb-a>.
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbA, FwbButton, FwbTextarea } from '../../../../src/index'
+
+const message = ref('')
+</script>
diff --git a/docs/components/timeline.md b/docs/components/timeline.md
index 5b5dd007..fdbc47ea 100644
--- a/docs/components/timeline.md
+++ b/docs/components/timeline.md
@@ -1,194 +1,288 @@
 <script setup>
-import TimelineExample from './timeline/examples/TimelineExample.vue';
-import TimelineWithIconsExample from './timeline/examples/TimelineWithIconsExample.vue';
-import TimelineHorizontalExample from './timeline/examples/TimelineHorizontalExample.vue';
+import FwbTimelineExample from './timeline/examples/FwbTimelineExample.vue'
+import FwbTimelineExampleWithIcons from './timeline/examples/FwbTimelineExampleWithIcons.vue'
+import FwbTimelineExampleHorizontal from './timeline/examples/FwbTimelineExampleHorizontal.vue'
 </script>
 # Vue Timeline - Flowbite
 
 ## Default timeline usage
 
-<TimelineExample />
-
+<fwb-timeline-example />
 ```vue
-<script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
-</script>
 <template>
-  <Timeline>
-    <timeline-item>
-      <timeline-point>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+  <fwb-timeline>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2020
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2020
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point />
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2020
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-  </Timeline>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
 </template>
 
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
 ```
-## Timeline with icons
-You can add icons by passing svg icons as slot to `<timeline-point></timeline-point>`
-<br>
 
-<TimelineWithIconsExample />
+## Timeline with icons
+You can add icons by passing svg icons as slot to `<fwb-timeline-point>` component
 
+<fwb-timeline-example-with-icons />
 ```vue
-<script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
-</script>
 <template>
-  <Timeline>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+  <fwb-timeline class="vp-raw">
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2022
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2022
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2022
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-  </Timeline>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
 </template>
 
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
 ```
 ## Timeline with icons
 `horizontal` prop makes timeline horizontal
 <br>
 
-<TimelineHorizontalExample />
-
+<fwb-timeline-example-horizontal />
 ```vue
-<script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle } from 'flowbite-vue'
-</script>
 <template>
-  <Timeline horizontal>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+  <fwb-timeline horizontal>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          fill-rule="evenodd"
+        /></svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2022
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          clip-rule="evenodd"
+          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+          fill-rule="evenodd"
+        /></svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2022
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+    <fwb-timeline-item>
+      <fwb-timeline-point>
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3 text-blue-600 dark:text-blue-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </fwb-timeline-point>
+      <fwb-timeline-content>
+        <fwb-timeline-time>
           February 2022
-        </timeline-time>
-        <timeline-title>
+        </fwb-timeline-time>
+        <fwb-timeline-title>
           Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-  </Timeline>
+        </fwb-timeline-title>
+        <fwb-timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts,
+          kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </fwb-timeline-body>
+      </fwb-timeline-content>
+    </fwb-timeline-item>
+  </fwb-timeline>
 </template>
 
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from 'flowbite-vue'
+</script>
 ```
diff --git a/docs/components/timeline/examples/FwbTimelineExample.vue b/docs/components/timeline/examples/FwbTimelineExample.vue
new file mode 100644
index 00000000..2a5539b4
--- /dev/null
+++ b/docs/components/timeline/examples/FwbTimelineExample.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="vp-raw">
+    <fwb-timeline>
+      <fwb-timeline-item>
+        <fwb-timeline-point />
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2020
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+      <fwb-timeline-item>
+        <fwb-timeline-point />
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2020
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+      <fwb-timeline-item>
+        <fwb-timeline-point />
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2020
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+    </fwb-timeline>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/timeline/examples/FwbTimelineExampleHorizontal.vue b/docs/components/timeline/examples/FwbTimelineExampleHorizontal.vue
new file mode 100644
index 00000000..bb6245e1
--- /dev/null
+++ b/docs/components/timeline/examples/FwbTimelineExampleHorizontal.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="vp-raw">
+    <fwb-timeline horizontal>
+      <fwb-timeline-item>
+        <fwb-timeline-point>
+          <svg
+            aria-hidden="true"
+            class="w-3 h-3 text-blue-600 dark:text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          /></svg>
+        </fwb-timeline-point>
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2022
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+      <fwb-timeline-item>
+        <fwb-timeline-point>
+          <svg
+            aria-hidden="true"
+            class="w-3 h-3 text-blue-600 dark:text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          /></svg>
+        </fwb-timeline-point>
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2022
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts,
+            kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+      <fwb-timeline-item>
+        <fwb-timeline-point>
+          <svg
+            aria-hidden="true"
+            class="w-3 h-3 text-blue-600 dark:text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </fwb-timeline-point>
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2022
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts,
+            kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+    </fwb-timeline>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/timeline/examples/FwbTimelineExampleWithIcons.vue b/docs/components/timeline/examples/FwbTimelineExampleWithIcons.vue
new file mode 100644
index 00000000..cdab2fc4
--- /dev/null
+++ b/docs/components/timeline/examples/FwbTimelineExampleWithIcons.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="vp-raw">
+    <fwb-timeline>
+      <fwb-timeline-item>
+        <fwb-timeline-point>
+          <svg
+            aria-hidden="true"
+            class="w-3 h-3 text-blue-600 dark:text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          /></svg>
+        </fwb-timeline-point>
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2022
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+      <fwb-timeline-item>
+        <fwb-timeline-point>
+          <svg
+            aria-hidden="true"
+            class="w-3 h-3 text-blue-600 dark:text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          /></svg>
+        </fwb-timeline-point>
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2022
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+      <fwb-timeline-item>
+        <fwb-timeline-point>
+          <svg
+            aria-hidden="true"
+            class="w-3 h-3 text-blue-600 dark:text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            fill-rule="evenodd"
+          /></svg>
+        </fwb-timeline-point>
+        <fwb-timeline-content>
+          <fwb-timeline-time>
+            February 2022
+          </fwb-timeline-time>
+          <fwb-timeline-title>
+            Application UI code in Tailwind CSS
+          </fwb-timeline-title>
+          <fwb-timeline-body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+          </fwb-timeline-body>
+        </fwb-timeline-content>
+      </fwb-timeline-item>
+    </fwb-timeline>
+  </div>
+</template>
+
+<script setup>
+import {
+  FwbTimeline,
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTime,
+  FwbTimelineTitle,
+} from '../../../../src/index'
+</script>
diff --git a/docs/components/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
deleted file mode 100644
index 436b7065..00000000
--- a/docs/components/timeline/examples/TimelineExample.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <Timeline class="vp-raw">
-    <timeline-item>
-      <timeline-point>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2020
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2020
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2020
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-  </Timeline>
-</template>
-<script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineBody } from '../../../../src/index'
-</script>
diff --git a/docs/components/timeline/examples/TimelineHorizontalExample.vue b/docs/components/timeline/examples/TimelineHorizontalExample.vue
deleted file mode 100644
index 6c30cb4c..00000000
--- a/docs/components/timeline/examples/TimelineHorizontalExample.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <Timeline class="vp-raw" horizontal>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-  </Timeline>
-</template>
-<script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineBody } from '../../../../src/index'
-</script>
diff --git a/docs/components/timeline/examples/TimelineWithIconsExample.vue b/docs/components/timeline/examples/TimelineWithIconsExample.vue
deleted file mode 100644
index 2d8518d4..00000000
--- a/docs/components/timeline/examples/TimelineWithIconsExample.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <Timeline class="vp-raw">
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-    <timeline-item>
-      <timeline-point>
-        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-      </timeline-point>
-      <timeline-content>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-body>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-body>
-      </timeline-content>
-    </timeline-item>
-  </Timeline>
-</template>
-<script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineBody } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast.md b/docs/components/toast.md
index 65d69101..313b171f 100644
--- a/docs/components/toast.md
+++ b/docs/components/toast.md
@@ -1,10 +1,10 @@
 <script setup>
-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'
+import FwbToastExample from './toast/examples/FwbToastExample.vue'
+import FwbToastExampleClosable from './toast/examples/FwbToastExampleClosable.vue'
+import FwbToastExampleIcon from './toast/examples/FwbToastExampleIcon.vue'
+import FwbToastExampleDivide from './toast/examples/FwbToastExampleDivide.vue'
+import FwbToastExampleMessage from './toast/examples/FwbToastExampleMessage.vue'
+import FwbToastExampleInteractive from './toast/examples/FwbToastExampleInteractive.vue'
 </script>
 # Vue Toast - Flowbite
 
@@ -20,161 +20,170 @@ The toast component can be used to enhance your website’s interactivity by pus
 
 ## Prop - type
 
+<fwb-toast-example />
 ```vue
-<script setup>
-import { Toast } from 'flowbite-vue'
-</script>
 <template>
-  <Toast type="empty"> <!-- default -->
+  <fwb-toast>
     You've unlocked achievement.
-  </Toast>
-  <Toast type="warning">
+  </fwb-toast>
+  <fwb-toast type="warning">
     Improve password difficulty.
-  </Toast>
-  <Toast type="success">
+  </fwb-toast>
+  <fwb-toast type="success">
     Item moved successfully.
-  </Toast>
-  <Toast type="danger">
+  </fwb-toast>
+  <fwb-toast type="danger">
     Item has been deleted.
-  </Toast>
+  </fwb-toast>
 </template>
-```
 
-<ToastTypeExample />
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
+```
 
 ## Prop - closable
 
+<fwb-toast-example-closable />
 ```vue
-<script setup>
-import { Toast } from 'flowbite-vue'
-</script>
 <template>
-  <Toast type="empty" closable>
+  <fwb-toast closable>
     You've unlocked achievement.
-  </Toast>
-  <Toast :type="'warning'" closable>
+  </fwb-toast>
+  <fwb-toast closable type="warning">
     Improve password difficulty.
-  </Toast>
-  <Toast :type="'success'" closable>
+  </fwb-toast>
+  <fwb-toast closable type="success">
     Item moved successfully.
-  </Toast>
-  <Toast :type="'danger'" closable>
+  </fwb-toast>
+  <fwb-toast closable type="danger">
     Item has been deleted.
-  </Toast>
+  </fwb-toast>
 </template>
-```
 
-<ToastClosableExample />
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
+```
 
 ## Prop - divide
 
+<fwb-toast-example-divide />
 ```vue
-<script setup>
-import { Toast } from 'flowbite-vue'
-</script>
 <template>
-  <Toast type="empty" closable divide>
+  <fwb-toast divide>
     You've unlocked achievement.
-  </Toast>
-  <Toast :type="'warning'" closable divide>
+  </fwb-toast>
+  <fwb-toast divide type="warning">
     Improve password difficulty.
-  </Toast>
-  <Toast :type="'success'" closable divide>
+  </fwb-toast>
+  <fwb-toast divide type="success">
     Item moved successfully.
-  </Toast>
-  <Toast :type="'danger'" closable divide>
+  </fwb-toast>
+  <fwb-toast divide type="danger">
     Item has been deleted.
-  </Toast>
+  </fwb-toast>
 </template>
-```
 
-<ToastDivideExample />
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
+```
 
 ## Message
 
+<fwb-toast-example-message />
 ```vue
-<script setup>
-import { Toast } from 'flowbite-vue'
-</script>
 <template>
-  <Toast type="empty" closable alignment="start">
+  <fwb-toast alignment="start" closable>
     <template #icon>
-      <img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
+      <img
+        alt="Jese Leos image" class="w-8 h-8 rounded-full shadow-lg" src="avatar.jpg">
     </template>
-    <div class="text-sm font-normal">
-      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
-      <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
-      <a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
+    <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
+    <div class="mb-2 text-sm font-normal">
+      Hi Neil, thanks for sharing your thoughts regarding Flowbite.
     </div>
-  </Toast>
+    <fwb-button size="xs" href="#">
+      Reply
+    </fwb-button>
+  </fwb-toast>
 </template>
-```
 
-<ToastMessageExample />
+<script setup>
+import { FwbButton, FwbToast } from 'flowbite-vue'
+</script>
+```
 
 ## Interactive
 
+<fwb-toast-example-interactive />
 ```vue
-<script setup>
-import { Toast } from 'flowbite-vue'
-</script>
 <template>
-  <Toast type="empty" closable alignment="start">
-    <template #icon>
-      <img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
-    </template>
-    <div class="text-sm font-normal">
-      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
-      <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
-      <a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
-    </div>
-  </Toast>
+  <flowbite-themable theme="blue">
+    <fwb-toast alignment="start" closable>
+      <template #icon>
+        <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path clip-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" fill-rule="evenodd" />
+        </svg>
+      </template>
+      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+      <div class="mb-2 text-sm font-normal">
+        A new software version is available for download.
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <fwb-button size="xs">
+          Update
+        </fwb-button>
+        <fwb-button size="xs" color="alternative">
+          Not now
+        </fwb-button>
+      </div>
+    </fwb-toast>
+  </flowbite-themable>
 </template>
-```
 
-<ToastInteractiveExample />
+<script setup>
+import { FlowbiteThemable, FwbButton, FwbToast } from 'flowbite-vue'
+</script>
+
+```
 
 ## Slot - icon
 
 You can use icon slot for rendering your own icons. Also you can change icon background color by using [FlowbiteThemable](/components/flowbiteThemable/flowbiteThemable.md)
 
+<fwb-toast-example-icon />
 ```vue
-<script setup>
-import { Toast } from 'flowbite-vue'
-</script>
 <template>
-  <flowbite-themable theme="blue">
-    <Toast type="empty" closable>
-      <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-mouse" viewBox="0 0 16 16">
-          <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
-        </svg>
-      </template>
-      Scroll down to see more examples.
-    </Toast>
-  </flowbite-themable>
-  <flowbite-themable theme="red">
-    <Toast closable>
-      <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-person-plus" viewBox="0 0 16 16">
-          <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
-          <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
-        </svg>
-      </template>
-      You have new friend request.
-    </Toast>
-  </flowbite-themable>
-  <Toast :type="'success'" closable>
+  <fwb-toast closable>
+    <template #icon>
+      <svg class="bi bi-mouse" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
+      </svg>
+    </template>
+    Scroll down to see more examples.
+  </fwb-toast>
+  <fwb-toast closable>
     <template #icon>
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-earbuds" viewBox="0 0 16 16">
-        <path fill-rule="evenodd" d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"/>
+      <svg class="bi bi-person-plus" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
+        <path d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" fill-rule="evenodd" />
       </svg>
     </template>
-    Your airpods connected.
-  </Toast>
+    You have new friend request.
+  </fwb-toast>
+  <fwb-toast closabletype="success">
+    <template #icon>
+      <svg class="bi bi-earbuds" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z" fill-rule="evenodd" />
+      </svg>
+    </template>
+    Your airpods are connected.
+  </fwb-toast>
 </template>
-```
 
-<ToastIconExample />
-
----
+<script setup>
+import { FwbToast } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/toast/examples/FwbToastExample.vue b/docs/components/toast/examples/FwbToastExample.vue
new file mode 100644
index 00000000..bd22956a
--- /dev/null
+++ b/docs/components/toast/examples/FwbToastExample.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-toast>
+      You've unlocked achievement.
+    </fwb-toast>
+    <fwb-toast type="warning">
+      Improve password difficulty.
+    </fwb-toast>
+    <fwb-toast type="success">
+      Item moved successfully.
+    </fwb-toast>
+    <fwb-toast type="danger">
+      Item has been deleted.
+    </fwb-toast>
+  </div>
+</template>
+
+<script setup>
+import { FwbToast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/FwbToastExampleClosable.vue b/docs/components/toast/examples/FwbToastExampleClosable.vue
new file mode 100644
index 00000000..189100f6
--- /dev/null
+++ b/docs/components/toast/examples/FwbToastExampleClosable.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-toast closable>
+      You've unlocked achievement.
+    </fwb-toast>
+    <fwb-toast
+      closable
+      type="warning"
+    >
+      Improve password difficulty.
+    </fwb-toast>
+    <fwb-toast
+      closable
+      type="success"
+    >
+      Item moved successfully.
+    </fwb-toast>
+    <fwb-toast
+      closable
+      type="danger"
+    >
+      Item has been deleted.
+    </fwb-toast>
+  </div>
+</template>
+
+<script setup>
+import { FwbToast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/FwbToastExampleDivide.vue b/docs/components/toast/examples/FwbToastExampleDivide.vue
new file mode 100644
index 00000000..3ee3c4f0
--- /dev/null
+++ b/docs/components/toast/examples/FwbToastExampleDivide.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-toast divide>
+      You've unlocked achievement.
+    </fwb-toast>
+    <fwb-toast
+      divide
+      type="warning"
+    >
+      Improve password difficulty.
+    </fwb-toast>
+    <fwb-toast
+      divide
+      type="success"
+    >
+      Item moved successfully.
+    </fwb-toast>
+    <fwb-toast
+      divide
+      type="danger"
+    >
+      Item has been deleted.
+    </fwb-toast>
+  </div>
+</template>
+
+<script setup>
+import { FwbToast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/FwbToastExampleIcon.vue b/docs/components/toast/examples/FwbToastExampleIcon.vue
new file mode 100644
index 00000000..bcfa0e7e
--- /dev/null
+++ b/docs/components/toast/examples/FwbToastExampleIcon.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="vp-raw grid gap-2">
+    <fwb-toast closable>
+      <template #icon>
+        <svg
+          class="bi bi-mouse"
+          fill="#fff"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
+        </svg>
+      </template>
+      Scroll down to see more examples.
+    </fwb-toast>
+    <fwb-toast closable>
+      <template #icon>
+        <svg
+          class="bi bi-person-plus"
+          fill="#fff"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
+          <path
+            d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </template>
+      You have new friend request.
+    </fwb-toast>
+    <fwb-toast
+      closable
+      type="success"
+    >
+      <template #icon>
+        <svg
+          class="bi bi-earbuds"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </template>
+      Your airpods are connected.
+    </fwb-toast>
+  </div>
+</template>
+
+<script setup>
+import { FwbToast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/FwbToastExampleInteractive.vue b/docs/components/toast/examples/FwbToastExampleInteractive.vue
new file mode 100644
index 00000000..d5dca21d
--- /dev/null
+++ b/docs/components/toast/examples/FwbToastExampleInteractive.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="vp-raw">
+    <flowbite-themable theme="blue">
+      <fwb-toast
+        alignment="start"
+        closable
+      >
+        <template #icon>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="#ffff"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+            fill-rule="evenodd"
+          /></svg>
+        </template>
+        <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+        <div class="mb-2 text-sm font-normal">
+          A new software version is available for download.
+        </div>
+        <div class="grid grid-cols-2 gap-2">
+          <fwb-button size="xs">
+            Update
+          </fwb-button>
+          <fwb-button
+            size="xs"
+            color="alternative"
+          >
+            Not now
+          </fwb-button>
+        </div>
+      </fwb-toast>
+    </flowbite-themable>
+  </div>
+</template>
+
+<script setup>
+import { FlowbiteThemable, FwbButton, FwbToast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/FwbToastExampleMessage.vue b/docs/components/toast/examples/FwbToastExampleMessage.vue
new file mode 100644
index 00000000..f0c76a7f
--- /dev/null
+++ b/docs/components/toast/examples/FwbToastExampleMessage.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="vp-raw">
+    <fwb-toast
+      alignment="start"
+      closable
+    >
+      <template #icon>
+        <img
+          alt="Jese Leos image"
+          class="w-8 h-8 rounded-full shadow-lg"
+          src="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
+        >
+      </template>
+      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
+      <div class="mb-2 text-sm font-normal">
+        Hi Neil, thanks for sharing your thoughts regarding Flowbite.
+      </div>
+      <fwb-button
+        size="xs"
+        href="#"
+      >
+        Reply
+      </fwb-button>
+    </fwb-toast>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbToast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/ToastClosableExample.vue b/docs/components/toast/examples/ToastClosableExample.vue
deleted file mode 100644
index 9c34729c..00000000
--- a/docs/components/toast/examples/ToastClosableExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-    <Toast type="empty" closable>
-      You've unlocked achievement.
-    </Toast>
-    <Toast :type="'warning'" closable>
-      Improve password difficulty.
-    </Toast>
-    <Toast :type="'success'" closable>
-      Item moved successfully.
-    </Toast>
-    <Toast :type="'danger'" closable>
-      Item has been deleted.
-    </Toast>
-  </div>
-</template>
-<script setup>
-import { Toast } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast/examples/ToastDivideExample.vue b/docs/components/toast/examples/ToastDivideExample.vue
deleted file mode 100644
index 18cfdd1d..00000000
--- a/docs/components/toast/examples/ToastDivideExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-    <Toast type="empty" closable divide>
-      You've unlocked achievement.
-    </Toast>
-    <Toast :type="'warning'" closable divide>
-      Improve password difficulty.
-    </Toast>
-    <Toast :type="'success'" closable divide>
-      Item moved successfully.
-    </Toast>
-    <Toast :type="'danger'" closable divide>
-      Item has been deleted.
-    </Toast>
-  </div>
-</template>
-<script setup>
-import { Toast } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast/examples/ToastIconExample.vue b/docs/components/toast/examples/ToastIconExample.vue
deleted file mode 100644
index 9ab3f810..00000000
--- a/docs/components/toast/examples/ToastIconExample.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-    <flowbite-themable theme="blue">
-      <Toast type="empty" closable>
-        <template #icon>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-mouse" viewBox="0 0 16 16">
-              <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
-            </svg>
-        </template>
-        Scroll down to see more examples.
-      </Toast>
-    </flowbite-themable>
-    <flowbite-themable theme="red">
-      <Toast closable>
-        <template #icon>
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-person-plus" viewBox="0 0 16 16">
-            <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
-            <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
-          </svg>
-        </template>
-        You have new friend request.
-      </Toast>
-    </flowbite-themable>
-    <Toast :type="'success'" closable>
-      <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-earbuds" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"/>
-        </svg>
-      </template>
-      Your airpods connected.
-    </Toast>
-  </div>
-</template>
-<script setup>
-import { Toast, FlowbiteThemable } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast/examples/ToastInteractiveExample.vue b/docs/components/toast/examples/ToastInteractiveExample.vue
deleted file mode 100644
index a26f486a..00000000
--- a/docs/components/toast/examples/ToastInteractiveExample.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-    <flowbite-themable :theme="'blue'">
-      <Toast type="empty" closable alignment="start">
-        <template #icon>
-          <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg>
-        </template>
-        <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
-        <div class="mb-2 text-sm font-normal">A new software version is available for download.</div>
-        <div class="grid grid-cols-2 gap-2">
-          <Button size="xs">Update</Button>
-          <Button size="xs" :color="'alternative'">Not now</Button>
-        </div>
-      </Toast>
-    </flowbite-themable>
-  </div>
-</template>
-<script setup>
-import { Toast, FlowbiteThemable, Button } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast/examples/ToastMessageExample.vue b/docs/components/toast/examples/ToastMessageExample.vue
deleted file mode 100644
index 52a67be9..00000000
--- a/docs/components/toast/examples/ToastMessageExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-    <Toast type="empty" closable alignment="start">
-      <template #icon>
-        <img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
-      </template>
-      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
-      <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
-      <a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
-    </Toast>
-  </div>
-</template>
-<script setup>
-import { Toast } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast/examples/ToastTypeExample.vue b/docs/components/toast/examples/ToastTypeExample.vue
deleted file mode 100644
index 3ff32ed5..00000000
--- a/docs/components/toast/examples/ToastTypeExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-    <Toast type="empty">
-      You've unlocked achievement.
-    </Toast>
-    <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/components/toastProvider/examples/FwbToastProviderExample.vue b/docs/components/toastProvider/examples/FwbToastProviderExample.vue
new file mode 100644
index 00000000..ca71bb78
--- /dev/null
+++ b/docs/components/toastProvider/examples/FwbToastProviderExample.vue
@@ -0,0 +1,40 @@
+<template>
+  <fwb-toast-provider :transition="transition">
+    <label
+      for="countries"
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+    >Select transition</label>
+    <select
+      id="countries"
+      v-model="transition"
+      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+    >
+      <option value="slide-left">
+        Slide left
+      </option>
+      <option value="slide-right">
+        Slide right
+      </option>
+      <option value="slide-top">
+        Slide top
+      </option>
+      <option value="slide-bottom">
+        Slide bottom
+      </option>
+      <option value="fade">
+        Fade
+      </option>
+    </select>
+    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+      <fwb-toast-provider-example-child />
+    </div>
+  </fwb-toast-provider>
+</template>
+
+<script setup>
+import { FwbToastProvider } from '../../../../src/index'
+import FwbToastProviderExampleChild from './FwbToastProviderExampleChild.vue'
+import { ref } from 'vue'
+
+const transition = ref('slide-left')
+</script>
diff --git a/docs/components/toastProvider/examples/ToastProviderExampleChild.vue b/docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue
similarity index 59%
rename from docs/components/toastProvider/examples/ToastProviderExampleChild.vue
rename to docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue
index de87c51e..7fa07db5 100644
--- a/docs/components/toastProvider/examples/ToastProviderExampleChild.vue
+++ b/docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue
@@ -1,28 +1,57 @@
 <template>
   <div class="flex flex-col gap-2">
-    <label for="ms" class="block text-sm font-medium text-gray-900 dark:text-gray-400">Duration(ms)</label>
+    <label
+      for="ms"
+      class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+    >Duration(ms)</label>
     <input
+      id="ms"
       v-model.number="ms"
       type="number"
-      id="ms"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="John"
       required
-    />
+    >
     <div class="flex gap-2">
-      <Button @click="() => add('success')" color="green">success</Button>
-      <Button @click="() => add('warning')" color="yellow">warning</Button>
-      <Button @click="() => add('danger')" color="red">danger</Button>
-      <Button @click="() => add('update')" color="purple">update</Button>
+      <fwb-button
+        color="green"
+        @click="() => add('success')"
+      >
+        success
+      </fwb-button>
+      <fwb-button
+        color="yellow"
+        @click="() => add('warning')"
+      >
+        warning
+      </fwb-button>
+      <fwb-button
+        color="red"
+        @click="() => add('danger')"
+      >
+        danger
+      </fwb-button>
+      <fwb-button
+        color="purple"
+        @click="() => add('update')"
+      >
+        update
+      </fwb-button>
     </div>
     <div class="flex">
-      <Button @click="remove" color="alternative">pop</Button>
+      <fwb-button
+        color="alternative"
+        @click="remove"
+      >
+        pop
+      </fwb-button>
     </div>
   </div>
 </template>
+
 <script setup>
 import { ref, shallowRef } from 'vue'
-import { Button, useToast } from '../../../../src/index'
+import { FwbButton, useToast } from '../../../../src/index'
 import UpdateToast from './UpdateToast.vue'
 
 const ms = ref(5000)
diff --git a/docs/components/toastProvider/examples/ToastProviderExample.vue b/docs/components/toastProvider/examples/ToastProviderExample.vue
deleted file mode 100644
index e207368c..00000000
--- a/docs/components/toastProvider/examples/ToastProviderExample.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <toast-provider :transition="transition">
-    <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select transition</label>
-    <select v-model="transition" id="countries" class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-      <option value="slide-left">Slide left</option>
-      <option value="slide-right">Slide right</option>
-      <option value="slide-top">Slide top</option>
-      <option value="slide-bottom">Slide bottom</option>
-      <option value="fade">Fade</option>
-    </select>
-    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-      <toast-provider-example-child />
-    </div>
-  </toast-provider>
-</template>
-<script setup>
-import { ToastProvider } from '../../../../src/index'
-import ToastProviderExampleChild from './ToastProviderExampleChild.vue'
-import { ref } from 'vue'
-
-const transition = ref('slide-left')
-</script>
diff --git a/docs/components/toastProvider/examples/UpdateToast.vue b/docs/components/toastProvider/examples/UpdateToast.vue
index cba6ee52..6f7be76b 100644
--- a/docs/components/toastProvider/examples/UpdateToast.vue
+++ b/docs/components/toastProvider/examples/UpdateToast.vue
@@ -1,25 +1,45 @@
 <template>
   <flowbite-themable theme="blue">
-    <toast @close="$emit('close')" v-bind="$attrs">
+    <fwb-toast
+      v-bind="$attrs"
+      @close="$emit('close')"
+    >
       <template #icon>
-        <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd"
-                d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                clip-rule="evenodd"></path>
+        <svg
+          aria-hidden="true"
+          class="w-5 h-5"
+          fill="#ffff"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+            clip-rule="evenodd"
+          />
         </svg>
       </template>
       <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
       <div class="mb-2 text-sm font-normal">
-        <slot/>
+        <slot />
       </div>
       <div class="grid grid-cols-2 gap-2">
-        <Button size="xs">Update</Button>
-        <Button size="xs" :color="'alternative'">Not now</Button>
+        <fwb-button size="xs">
+          Update
+        </fwb-button>
+        <fwb-button
+          size="xs"
+          :color="'alternative'"
+        >
+          Not now
+        </fwb-button>
       </div>
-    </toast>
+    </fwb-toast>
   </flowbite-themable>
 </template>
+
 <script setup>
-import { Toast, Button, FlowbiteThemable } from '../../../../src/index'
+import { FlowbiteThemable, FwbButton, FwbToast } from '../../../../src/index'
+
 defineEmits(['close'])
 </script>
diff --git a/docs/components/toastProvider/toastProvider.md b/docs/components/toastProvider/toastProvider.md
index 667812f2..e16414ea 100644
--- a/docs/components/toastProvider/toastProvider.md
+++ b/docs/components/toastProvider/toastProvider.md
@@ -1,6 +1,11 @@
 <script setup>
-import ToastProviderExample from './examples/ToastProviderExample.vue';
+import FwbToastProviderExample from './examples/FwbToastProviderExample.vue'
 </script>
+
 # Vue Toast Provider - Flowbite
 
-<ToastProviderExample />
+:::warning
+WIP, Do not use it in production
+:::
+
+<fwb-toast-provider-example />
diff --git a/docs/components/toggle.md b/docs/components/toggle.md
index 05d3f82a..dc31732a 100644
--- a/docs/components/toggle.md
+++ b/docs/components/toggle.md
@@ -1,9 +1,9 @@
 <script setup>
-  import DefaultToggle from './toggle/examples/DefaultToggle.vue'
-  import CheckedToggle from './toggle/examples/CheckedToggle.vue'
-  import DisabledToggle from './toggle/examples/DisabledToggle.vue'
-  import ColorsToggle from './toggle/examples/ColorsToggle.vue'
-  import SizeToggle from './toggle/examples/SizeToggle.vue'
+  import FwbToggleExample from './toggle/examples/FwbToggleExample.vue'
+  import FwbToggleExampleChecked from './toggle/examples/FwbToggleExampleChecked.vue'
+  import FwbToggleExampleColors from './toggle/examples/FwbToggleExampleColors.vue'
+  import FwbToggleExampleDisabled from './toggle/examples/FwbToggleExampleDisabled.vue'
+  import FwbToggleExampleSize from './toggle/examples/FwbToggleExampleSize.vue'
 </script>
 
 # Vue Toggle - Flowbite
@@ -19,73 +19,78 @@ Original reference: [https://flowbite.com/docs/forms/toggle/](https://flowbite.c
 The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
 
 ## Default toggle
+
+<fwb-toggle-example />
 ```vue
+<template>
+  <fwb-toggle v-model="toggle" label="Toggle me" />
+</template>
+
 <script setup>
-import { Toggle } from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbToggle } from 'flowbite-vue'
 
 const toggle = ref(false)
 </script>
-<template>
-  <Toggle v-model="toggle" label="Toggle me" />
-</template>
 ```
 
-<DefaultToggle />
-
 ## Checked toggle
+
+<fwb-toggle-example-checked />
 ```vue
+<template>
+  <fwb-toggle v-model="toggle" label="Toggle me" />
+</template>
+
 <script setup>
-import { Toggle } from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbToggle } from 'flowbite-vue'
 
 const toggle = ref(true)
 </script>
-<template>
-  <Toggle v-model="toggle" label="Toggle me" />
-</template>
 ```
 
-<CheckedToggle />
-
 ## Disabled toggle
+
+<fwb-toggle-example-disabled />
 ```vue
+<template>
+  <fwb-toggle v-model="toggle" disabled label="Can't Toggle me" />
+</template>
+
 <script setup>
-import { Toggle } from 'flowbite-vue'
 import { ref } from 'vue'
+import { FwbToggle } from 'flowbite'
 
 const toggle = ref(false)
 </script>
-<template>
-  <Toggle v-model="toggle" label="Toggle me" :disabled="true" />
-</template>
 ```
 
-<DisabledToggle />
-
 ## Colors
+
+<fwb-toggle-example-colors />
 ```vue
 <template>
-  <div>
-    <Toggle label="Red" color="red" />
-    <Toggle label="Green" color="green" />
-    <Toggle label="Purple" color="purple" />
-    <Toggle label="Yellow" color="yellow" />
-    <Toggle label="Teal" color="teal" />
-    <Toggle label="Orange" color="orange" />
-  </div>
+  <fwb-toggle label="Red" color="red" />
+  <fwb-toggle label="Green" color="green" />
+  <fwb-toggle label="Purple" color="purple" />
+  <fwb-toggle label="Yellow" color="yellow" />
+  <fwb-toggle label="Teal" color="teal" />
+  <fwb-toggle label="Orange" color="orange" />
 </template>
 ```
 
-<ColorsToggle />
-
 ## Size
+
+<fwb-toggle-example-size />
 ```vue
 <template>
-  <Toggle label="Small" size="sm" />
-  <Toggle label="Medium" size="md" />
-  <Toggle label="Large" size="lg" />
+  <fwb-toggle label="Small" size="sm" />
+  <fwb-toggle label="Medium" size="md" />
+  <fwb-toggle label="Large" size="lg" />
 </template>
-```
 
-<SizeToggle />
+<script setup>
+import { FwbToggle } from 'flowbite-vue'
+</script>
+```
diff --git a/docs/components/toggle/examples/CheckedToggle.vue b/docs/components/toggle/examples/CheckedToggle.vue
deleted file mode 100644
index bc27344c..00000000
--- a/docs/components/toggle/examples/CheckedToggle.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <Toggle v-model="toggle" label="Toggle me" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Toggle } from '../../../../src/index'
-
-const toggle = ref(true)
-</script>
diff --git a/docs/components/toggle/examples/ColorsToggle.vue b/docs/components/toggle/examples/ColorsToggle.vue
deleted file mode 100644
index dee0e54d..00000000
--- a/docs/components/toggle/examples/ColorsToggle.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="flex justify-between">
-    <Toggle v-model="toggle1" label="Red" color="red" />
-    <Toggle v-model="toggle2" label="Green" color="green" />
-    <Toggle v-model="toggle3" label="Purple" color="purple" />
-    <Toggle v-model="toggle4" label="Yellow" color="yellow" />
-    <Toggle v-model="toggle5" label="Teal" color="teal" />
-    <Toggle v-model="toggle6" label="Orange" color="orange" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Toggle } from '../../../../src/index'
-
-const toggle1 = ref(true)
-const toggle2 = ref(true)
-const toggle3 = ref(true)
-const toggle4 = ref(true)
-const toggle5 = ref(true)
-const toggle6 = ref(true)
-</script>
diff --git a/docs/components/toggle/examples/DefaultToggle.vue b/docs/components/toggle/examples/DefaultToggle.vue
deleted file mode 100644
index 2cd7773f..00000000
--- a/docs/components/toggle/examples/DefaultToggle.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <Toggle v-model="toggle" label="Toggle me" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Toggle } from '../../../../src/index'
-
-const toggle = ref(false)
-</script>
diff --git a/docs/components/toggle/examples/DisabledToggle.vue b/docs/components/toggle/examples/DisabledToggle.vue
deleted file mode 100644
index 41e9e6fe..00000000
--- a/docs/components/toggle/examples/DisabledToggle.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <Toggle v-model="toggle" label="Toggle me" :disabled="true" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Toggle } from '../../../../src/index'
-
-const toggle = ref(false)
-</script>
diff --git a/docs/components/toggle/examples/FwbToggleExample.vue b/docs/components/toggle/examples/FwbToggleExample.vue
new file mode 100644
index 00000000..ab1e836b
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-toggle
+      v-model="toggle"
+      label="Toggle me"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>
diff --git a/docs/components/toggle/examples/FwbToggleExampleChecked.vue b/docs/components/toggle/examples/FwbToggleExampleChecked.vue
new file mode 100644
index 00000000..906e2a65
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExampleChecked.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw">
+    <fwb-toggle
+      v-model="toggle"
+      label="Toggle me"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from '../../../../src/index'
+
+const toggle = ref(true)
+</script>
diff --git a/docs/components/toggle/examples/FwbToggleExampleColors.vue b/docs/components/toggle/examples/FwbToggleExampleColors.vue
new file mode 100644
index 00000000..2612ab0f
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExampleColors.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="vp-raw flex justify-between flex-wrap gap-2">
+    <fwb-toggle
+      v-model="toggle1"
+      label="Red"
+      color="red"
+    />
+    <fwb-toggle
+      v-model="toggle2"
+      label="Green"
+      color="green"
+    />
+    <fwb-toggle
+      v-model="toggle3"
+      label="Purple"
+      color="purple"
+    />
+    <fwb-toggle
+      v-model="toggle4"
+      label="Yellow"
+      color="yellow"
+    />
+    <fwb-toggle
+      v-model="toggle5"
+      label="Teal"
+      color="teal"
+    />
+    <fwb-toggle
+      v-model="toggle6"
+      label="Orange"
+      color="orange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from '../../../../src/index'
+
+const toggle1 = ref(true)
+const toggle2 = ref(true)
+const toggle3 = ref(true)
+const toggle4 = ref(true)
+const toggle5 = ref(true)
+const toggle6 = ref(true)
+</script>
diff --git a/docs/components/toggle/examples/FwbToggleExampleDisabled.vue b/docs/components/toggle/examples/FwbToggleExampleDisabled.vue
new file mode 100644
index 00000000..e33d4874
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExampleDisabled.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw">
+    <fwb-toggle
+      v-model="toggle"
+      disabled
+      label="Can't Toggle me"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbToggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>
diff --git a/docs/components/toggle/examples/FwbToggleExampleSize.vue b/docs/components/toggle/examples/FwbToggleExampleSize.vue
new file mode 100644
index 00000000..682f4e57
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExampleSize.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw grid gap-3">
+    <fwb-toggle
+      label="Small"
+      size="sm"
+    />
+    <fwb-toggle
+      label="Medium"
+      size="md"
+    />
+    <fwb-toggle
+      label="Large"
+      size="lg"
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbToggle } from '../../../../src/index'
+</script>
diff --git a/docs/components/toggle/examples/SizeToggle.vue b/docs/components/toggle/examples/SizeToggle.vue
deleted file mode 100644
index 41344047..00000000
--- a/docs/components/toggle/examples/SizeToggle.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <Toggle label="Small" size="sm" />
-    <Toggle label="Medium" size="md" />
-    <Toggle label="Large" size="lg" />
-  </div>
-</template>
-
-<script setup>
-import { Toggle } from '../../../../src/index'
-
-</script>
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 2354f2f2..4d9b5957 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -1,80 +1,65 @@
 <script setup>
-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'
+import FwbTooltipExample from './tooltip/examples/FwbTooltipExample.vue'
+import FwbTooltipExamplePosition from './tooltip/examples/FwbTooltipExamplePosition.vue'
+import FwbTooltipExampleStyle from './tooltip/examples/FwbTooltipExampleStyle.vue'
+import FwbTooltipExampleTrigger from './tooltip/examples/FwbTooltipExampleTrigger.vue'
 </script>
 # Vue Tooltip - Flowbite
 
 ## Demo
 
-<TooltipExample></TooltipExample>
-
+<fwb-tooltip-example />
 ```vue
-<script setup>
-import { Tooltip } from 'flowbite-vue'
-</script>
-
 <template>
-  <Tooltip>
+  <fwb-tooltip>
     <template #trigger>
-      <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-          Default Tooltip
-      </button>
+      <fwb-button>
+        Default Tooltip
+      </fwb-button>
     </template>
     <template #content>
       Tooltip content
     </template>
-  </Tooltip>
+  </fwb-tooltip>
 </template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
 ```
 
 ## Tooltip styles
 
 You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `tooltip-light` or `tooltip-dark` attribute.
 
-<TooltipStyleExample />
-
+<fwb-tooltip-example-style />
 ```vue
-<script setup>
-import { Tooltip } from 'flowbite-vue'
-</script>
-
 <template>
-  <div class="flex flex-wrap justify-center py-8 space-x-3">
-    <!-- light style tooltip -->
-    <Tooltip theme="light">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Light Tooltip
-        </button>
-      </template>
-      <template #content>
-        Tooltip content
-      </template>
-    </Tooltip>
-    <!-- dark style tooltip -->
-    <Tooltip theme="dark">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Dark Tooltip
-        </button>
-      </template>
-      <template #content>
-        Tooltip content
-      </template>
-    </Tooltip>
-  </div>
+  <fwb-tooltip theme="light">
+    <template #trigger>
+      <fwb-button>
+        Light Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip theme="dark">
+    <template #trigger>
+      <fwb-button>
+        Dark Tooltip
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
 </template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
 ```
 
 ## Placement
@@ -82,73 +67,54 @@ import { Tooltip } from 'flowbite-vue'
 The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`,  `auto-end`.
 The default value is: `top`
 
-<TooltipPositionExample />
-
+<fwb-tooltip-example-position />
 ```vue
-<script setup>
-import { Tooltip } from 'flowbite-vue'
-</script>
-
 <template>
-  <div class="flex flex-wrap justify-center py-8 space-x-3">
-    <!-- Show tooltip on top -->
-    <Tooltip placement="top">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip top
-        </button>
-      </template>
-      <template #content>
-        Tooltip on top
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on right -->
-    <Tooltip placement="right">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip right
-        </button>
-      </template>
-      <template #content>
-        Tooltip on right
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on bottom -->
-    <Tooltip placement="bottom">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip bottom
-        </button>
-      </template>
-      <template #content>
-        Tooltip on bottom
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on left -->
-    <Tooltip placement="left">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip left
-        </button>
-      </template>
-      <template #content>
-        Tooltip on left
-      </template>
-    </Tooltip>
-  </div>
+  <fwb-tooltip placement="top">
+    <template #trigger>
+      <fwb-button>
+        Tooltip top
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on top
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="right">
+    <template #trigger>
+      <fwb-button>
+        Tooltip right
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on right
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="bottom">
+    <template #trigger>
+      <fwb-button>
+        Tooltip bottom
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on bottom
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip placement="left">
+    <template #trigger>
+      <fwb-button>
+        Tooltip left
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip on left
+    </template>
+  </fwb-tooltip>
 </template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
 ```
 
 
@@ -157,43 +123,32 @@ import { Tooltip } from 'flowbite-vue'
 
 You can choose the triggering event by using the `hover` or `click` attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `click`.
 
-<TooltipTriggerExample />
-
+<fwb-tooltip-example-trigger />
 ```vue
-<script setup>
-import { Tooltip } from 'flowbite-vue'
-</script>
-
 <template>
-  <div class="flex flex-wrap justify-center py-8 space-x-3">
-    <!-- Show tooltip on hover -->
-    <Tooltip trigger="hover">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip hover
-        </button>
-      </template>
-      <template #content>
-        Tooltip content
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on click -->
-    <Tooltip trigger="click">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip click
-        </button>
-      </template>
-      <template #content>
-        Tooltip content
-      </template>
-    </Tooltip>
-  </div>
+  <fwb-tooltip>
+    <template #trigger>
+      <fwb-button>
+        Tooltip hover
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
+  <fwb-tooltip trigger="click">
+    <template #trigger>
+      <fwb-button>
+        Tooltip click
+      </fwb-button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </fwb-tooltip>
 </template>
+
+<script lang="ts" setup>
+import { FwbButton, FwbTooltip } from 'flowbite-vue'
+</script>
 ```
diff --git a/docs/components/tooltip/examples/FwbTooltipExample.vue b/docs/components/tooltip/examples/FwbTooltipExample.vue
new file mode 100644
index 00000000..807f7ed9
--- /dev/null
+++ b/docs/components/tooltip/examples/FwbTooltipExample.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw">
+    <fwb-tooltip>
+      <template #trigger>
+        <fwb-button>
+          Default Tooltip
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </fwb-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from '../../../../src/index'
+</script>
diff --git a/docs/components/tooltip/examples/FwbTooltipExamplePosition.vue b/docs/components/tooltip/examples/FwbTooltipExamplePosition.vue
new file mode 100644
index 00000000..68f3726e
--- /dev/null
+++ b/docs/components/tooltip/examples/FwbTooltipExamplePosition.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="vp-raw flex flex-wrap justify-center gap-2">
+    <fwb-tooltip placement="top">
+      <template #trigger>
+        <fwb-button>
+          Tooltip top
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip on top
+      </template>
+    </fwb-tooltip>
+    <fwb-tooltip placement="right">
+      <template #trigger>
+        <fwb-button>
+          Tooltip right
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip on right
+      </template>
+    </fwb-tooltip>
+    <fwb-tooltip placement="bottom">
+      <template #trigger>
+        <fwb-button>
+          Tooltip bottom
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip on bottom
+      </template>
+    </fwb-tooltip>
+    <fwb-tooltip placement="left">
+      <template #trigger>
+        <fwb-button>
+          Tooltip left
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip on left
+      </template>
+    </fwb-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from '../../../../src/index'
+</script>
diff --git a/docs/components/tooltip/examples/FwbTooltipExampleStyle.vue b/docs/components/tooltip/examples/FwbTooltipExampleStyle.vue
new file mode 100644
index 00000000..f3100a38
--- /dev/null
+++ b/docs/components/tooltip/examples/FwbTooltipExampleStyle.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw flex flex-wrap justify-center gap-2">
+    <fwb-tooltip theme="light">
+      <template #trigger>
+        <fwb-button>
+          Light Tooltip
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </fwb-tooltip>
+    <fwb-tooltip theme="dark">
+      <template #trigger>
+        <fwb-button>
+          Dark Tooltip
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </fwb-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbTooltip } from '../../../../src/index'
+</script>
diff --git a/docs/components/tooltip/examples/FwbTooltipExampleTrigger.vue b/docs/components/tooltip/examples/FwbTooltipExampleTrigger.vue
new file mode 100644
index 00000000..7b20b048
--- /dev/null
+++ b/docs/components/tooltip/examples/FwbTooltipExampleTrigger.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw flex justify-center gap-2">
+    <fwb-tooltip>
+      <template #trigger>
+        <fwb-button>
+          Tooltip hover
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </fwb-tooltip>
+    <fwb-tooltip trigger="click">
+      <template #trigger>
+        <fwb-button>
+          Tooltip click
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </fwb-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { FwbButton, FwbTooltip } from '../../../../src/index'
+</script>
diff --git a/docs/components/tooltip/examples/TooltipExample.vue b/docs/components/tooltip/examples/TooltipExample.vue
deleted file mode 100644
index 46b90fcd..00000000
--- a/docs/components/tooltip/examples/TooltipExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <Tooltip>
-    <template #trigger>
-      <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-          Default Tooltip
-      </button>
-    </template>
-    <template #content>
-      Tooltip content
-    </template>
-  </Tooltip>
-</template>
-
-<script setup>
-  import { Tooltip } from '../../../../src/index'
-</script>
diff --git a/docs/components/tooltip/examples/TooltipPositionExample.vue b/docs/components/tooltip/examples/TooltipPositionExample.vue
deleted file mode 100644
index 59556cae..00000000
--- a/docs/components/tooltip/examples/TooltipPositionExample.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="flex flex-wrap justify-center py-8 space-x-3">
-    <!-- Show tooltip on top -->
-    <Tooltip placement="top">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip top
-        </button>
-      </template>
-      <template #content>
-        Tooltip on top
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on right -->
-    <Tooltip placement="right">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip right
-        </button>
-      </template>
-      <template #content>
-        Tooltip on right
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on bottom -->
-    <Tooltip placement="bottom">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip bottom
-        </button>
-      </template>
-      <template #content>
-        Tooltip on bottom
-      </template>
-    </Tooltip>
-    <!-- Show tooltip on left -->
-    <Tooltip placement="left">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip left
-        </button>
-      </template>
-      <template #content>
-        Tooltip on left
-      </template>
-    </Tooltip>
-  </div>
-</template>
-
-<script setup>
-  import { Tooltip } from '../../../../src/index'
-</script>
diff --git a/docs/components/tooltip/examples/TooltipStyleExample.vue b/docs/components/tooltip/examples/TooltipStyleExample.vue
deleted file mode 100644
index d5f8bb73..00000000
--- a/docs/components/tooltip/examples/TooltipStyleExample.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="flex flex-wrap justify-center py-8 space-x-3">
-    <!-- light style tooltip -->
-    <Tooltip theme="light">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Light Tooltip
-        </button>
-      </template>
-      <template #content>
-        Tooltip content
-      </template>
-    </Tooltip>
-    <!-- dark style tooltip -->
-    <Tooltip theme="dark">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Dark Tooltip
-        </button>
-      </template>
-      <template #content>
-        Tooltip content
-      </template>
-    </Tooltip>
-  </div>
-</template>
-
-<script setup>
-  import { Tooltip } from '../../../../src/index'
-</script>
diff --git a/docs/components/tooltip/examples/TooltipTriggerExample.vue b/docs/components/tooltip/examples/TooltipTriggerExample.vue
deleted file mode 100644
index 8941f910..00000000
--- a/docs/components/tooltip/examples/TooltipTriggerExample.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="flex flex-wrap justify-center py-8 space-x-3">
-    <!-- Show tooltip on hover -->
-    <Tooltip trigger="hover">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip hover
-        </button>
-      </template>
-      <template #content> Tooltip content </template>
-    </Tooltip>
-    <!-- Show tooltip on click -->
-    <Tooltip trigger="click">
-      <template #trigger>
-        <button
-          type="button"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Tooltip click
-        </button>
-      </template>
-      <template #content> Tooltip content </template>
-    </Tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Tooltip } from '../../../../src/index'
-import type { PropType } from 'vue'
-import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
-
-defineProps({
-  placement: {
-    type: String as PropType<TooltipPlacement>,
-    default: 'top',
-  },
-  arrowColor: {
-    type: String,
-    default: '#0f172a',
-  },
-})
-</script>
diff --git a/docs/components/typography/heading/FwbHExampleColor.vue b/docs/components/typography/heading/FwbHExampleColor.vue
new file mode 100644
index 00000000..b1e9672e
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleColor.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading color="text-green-400">
+    Green heading
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleCustom.vue b/docs/components/typography/heading/FwbHExampleCustom.vue
new file mode 100644
index 00000000..bc675cd7
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleCustom.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading class="underline italic !text-xl">
+    Custom heading
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleLevel1.vue b/docs/components/typography/heading/FwbHExampleLevel1.vue
new file mode 100644
index 00000000..9eb3ec1f
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleLevel1.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading tag="h1">
+    Heading 1
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleLevel2.vue b/docs/components/typography/heading/FwbHExampleLevel2.vue
new file mode 100644
index 00000000..d751be0b
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleLevel2.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading tag="h2">
+    Heading 2
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleLevel3.vue b/docs/components/typography/heading/FwbHExampleLevel3.vue
new file mode 100644
index 00000000..14b861de
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleLevel3.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading tag="h3">
+    Heading 3
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleLevel4.vue b/docs/components/typography/heading/FwbHExampleLevel4.vue
new file mode 100644
index 00000000..b7a90992
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleLevel4.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading tag="h4">
+    Heading 4
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleLevel5.vue b/docs/components/typography/heading/FwbHExampleLevel5.vue
new file mode 100644
index 00000000..791c2b31
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleLevel5.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading tag="h5">
+    Heading 5
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/FwbHExampleLevel6.vue b/docs/components/typography/heading/FwbHExampleLevel6.vue
new file mode 100644
index 00000000..7361be35
--- /dev/null
+++ b/docs/components/typography/heading/FwbHExampleLevel6.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-heading tag="h6">
+    Heading 6
+  </fwb-heading>
+</template>
+
+<script setup>
+import { FwbHeading } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/heading/H1.vue b/docs/components/typography/heading/H1.vue
deleted file mode 100644
index c21bcb90..00000000
--- a/docs/components/typography/heading/H1.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading tag="h1">Heading 1</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/H2.vue b/docs/components/typography/heading/H2.vue
deleted file mode 100644
index fedeba63..00000000
--- a/docs/components/typography/heading/H2.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading tag="h2">Heading 2</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/H3.vue b/docs/components/typography/heading/H3.vue
deleted file mode 100644
index 3f97825d..00000000
--- a/docs/components/typography/heading/H3.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading tag="h3">Heading 3</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/H4.vue b/docs/components/typography/heading/H4.vue
deleted file mode 100644
index bc60d699..00000000
--- a/docs/components/typography/heading/H4.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading tag="h4">Heading 4</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/H5.vue b/docs/components/typography/heading/H5.vue
deleted file mode 100644
index 3504f435..00000000
--- a/docs/components/typography/heading/H5.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading tag="h5">Heading 5</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/H6.vue b/docs/components/typography/heading/H6.vue
deleted file mode 100644
index e2e743e3..00000000
--- a/docs/components/typography/heading/H6.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading tag="h6">Heading 6</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/HColor.vue b/docs/components/typography/heading/HColor.vue
deleted file mode 100644
index e945343e..00000000
--- a/docs/components/typography/heading/HColor.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading color="text-green-400" tag="h1">Green heading</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/heading/HCustom.vue b/docs/components/typography/heading/HCustom.vue
deleted file mode 100644
index cc8fcdcd..00000000
--- a/docs/components/typography/heading/HCustom.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Heading class="underline italic !text-xl" tag="h1">This is my heading</Heading>
-</template>
-
-<script setup>
-import Heading from '../../../../src/components/Typography/Heading.vue'
-</script>
diff --git a/docs/components/typography/image/FwbImgExample.vue b/docs/components/typography/image/FwbImgExample.vue
new file mode 100644
index 00000000..6af157d2
--- /dev/null
+++ b/docs/components/typography/image/FwbImgExample.vue
@@ -0,0 +1,10 @@
+<template>
+  <fwb-img
+    alt="flowbite-vue"
+    src="https://flowbite-svelte.com/images/examples/image-1.jpg"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/image/FwbImgExampleAlign.vue b/docs/components/typography/image/FwbImgExampleAlign.vue
new file mode 100644
index 00000000..7d84d568
--- /dev/null
+++ b/docs/components/typography/image/FwbImgExampleAlign.vue
@@ -0,0 +1,12 @@
+<template>
+  <fwb-img
+    alignment="mx-auto"
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/image/FwbImgExampleCaption.vue b/docs/components/typography/image/FwbImgExampleCaption.vue
new file mode 100644
index 00000000..fd710604
--- /dev/null
+++ b/docs/components/typography/image/FwbImgExampleCaption.vue
@@ -0,0 +1,11 @@
+<template>
+  <fwb-img
+    alt="flowbite-vue"
+    caption="flowbite-vue"
+    src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/image/FwbImgExampleCustom.vue b/docs/components/typography/image/FwbImgExampleCustom.vue
new file mode 100644
index 00000000..a43d424b
--- /dev/null
+++ b/docs/components/typography/image/FwbImgExampleCustom.vue
@@ -0,0 +1,13 @@
+<template>
+  <fwb-img
+    alignment="mx-auto"
+    alt="flowbite-vue"
+    img-class="rounded-lg border-[1px]"
+    size="max-w-lg"
+    src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/image/ImgBlur.vue b/docs/components/typography/image/FwbImgExampleGrayscale.vue
similarity index 75%
rename from docs/components/typography/image/ImgBlur.vue
rename to docs/components/typography/image/FwbImgExampleGrayscale.vue
index 3c666ef0..0e539a4b 100644
--- a/docs/components/typography/image/ImgBlur.vue
+++ b/docs/components/typography/image/FwbImgExampleGrayscale.vue
@@ -1,13 +1,13 @@
 <template>
-  <Img
-    size="max-w-lg"
-    alt="My gallery"
+  <fwb-img
     alignment="mx-auto"
+    alt="flowbite-vuw"
     img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
+    size="max-w-lg"
     src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
   />
 </template>
 
 <script setup>
-import Img from '../../../../src/components/Typography/Img.vue'
+import { FwbImg } from '../../../../src/'
 </script>
diff --git a/docs/components/typography/image/FwbImgExampleSize.vue b/docs/components/typography/image/FwbImgExampleSize.vue
new file mode 100644
index 00000000..58401518
--- /dev/null
+++ b/docs/components/typography/image/FwbImgExampleSize.vue
@@ -0,0 +1,11 @@
+<template>
+  <fwb-img
+    alt="flowbite-vue"
+    size="max-w-md"
+    src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg"
+  />
+</template>
+
+<script setup>
+import { FwbImg } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/image/Img.vue b/docs/components/typography/image/Img.vue
deleted file mode 100644
index 442fcead..00000000
--- a/docs/components/typography/image/Img.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Img src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
-</template>
-
-<script setup>
-import Img from '../../../../src/components/Typography/Img.vue'
-</script>
diff --git a/docs/components/typography/image/ImgAlign.vue b/docs/components/typography/image/ImgAlign.vue
deleted file mode 100644
index 290fdd8d..00000000
--- a/docs/components/typography/image/ImgAlign.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Img alignment="mx-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
-</template>
-
-<script setup>
-import Img from '../../../../src/components/Typography/Img.vue'
-</script>
diff --git a/docs/components/typography/image/ImgCap.vue b/docs/components/typography/image/ImgCap.vue
deleted file mode 100644
index c0068403..00000000
--- a/docs/components/typography/image/ImgCap.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
-</template>
-
-<script setup>
-import Img from '../../../../src/components/Typography/Img.vue'
-</script>
diff --git a/docs/components/typography/image/ImgCustom.vue b/docs/components/typography/image/ImgCustom.vue
deleted file mode 100644
index 65c9cc29..00000000
--- a/docs/components/typography/image/ImgCustom.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Img img-class="rounded-lg border-[1px]" alignment="mx-auto" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
-</template>
-
-<script setup>
-import Img from '../../../../src/components/Typography/Img.vue'
-</script>
diff --git a/docs/components/typography/image/ImgSize.vue b/docs/components/typography/image/ImgSize.vue
deleted file mode 100644
index 0257513b..00000000
--- a/docs/components/typography/image/ImgSize.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
-</template>
-
-<script setup>
-import Img from '../../../../src/components/Typography/Img.vue'
-</script>
diff --git a/docs/components/typography/link/A.vue b/docs/components/typography/link/A.vue
deleted file mode 100644
index de721ce9..00000000
--- a/docs/components/typography/link/A.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <A href="/">Flowbite-vue </A>
-</template>
-
-<script setup>
-import A from '../../../../src/components/Typography/A.vue'
-</script>
diff --git a/docs/components/typography/link/ACustom.vue b/docs/components/typography/link/ACustom.vue
deleted file mode 100644
index de5fbfc1..00000000
--- a/docs/components/typography/link/ACustom.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <A class="underline italic" href="/">Flowbite-vue </A>
-</template>
-
-<script setup>
-import A from '../../../../src/components/Typography/A.vue'
-</script>
diff --git a/docs/components/typography/link/APara.vue b/docs/components/typography/link/APara.vue
deleted file mode 100644
index 418e9941..00000000
--- a/docs/components/typography/link/APara.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <P>
-    The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
-    extra updates outside of the roadmap as well.
-  </P>
-</template>
-
-<script setup>
-import A from '../../../../src/components/Typography/A.vue'
-import P from '../../../../src/components/Typography/P.vue'
-</script>
diff --git a/docs/components/typography/link/FwbAExample.vue b/docs/components/typography/link/FwbAExample.vue
new file mode 100644
index 00000000..9bb9ceac
--- /dev/null
+++ b/docs/components/typography/link/FwbAExample.vue
@@ -0,0 +1,9 @@
+<template>
+  <fwb-a href="#">
+    Flowbite-vue
+  </fwb-a>
+</template>
+
+<script setup>
+import { FwbA } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/link/FwbAExampleCustom.vue b/docs/components/typography/link/FwbAExampleCustom.vue
new file mode 100644
index 00000000..a82d10cc
--- /dev/null
+++ b/docs/components/typography/link/FwbAExampleCustom.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="vp-raw">
+    <fwb-a
+      class="text-orange-500 italic"
+      href="#"
+    >
+      Flowbite-vue
+    </fwb-a>
+  </div>
+</template>
+
+<script setup>
+import { FwbA } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/link/FwbAExampleParagraph.vue b/docs/components/typography/link/FwbAExampleParagraph.vue
new file mode 100644
index 00000000..49b7ae32
--- /dev/null
+++ b/docs/components/typography/link/FwbAExampleParagraph.vue
@@ -0,0 +1,16 @@
+<template>
+  <fwb-p>
+    The free updates that will be provided is based on the <fwb-a
+      href="/"
+      class="underline hover:no-underline"
+    >
+      roadmap
+    </fwb-a> that we have laid
+    out for this project. It is also possible that we will provide
+    extra updates outside of the roadmap as well.
+  </fwb-p>
+</template>
+
+<script setup>
+import { FwbA, FwbP } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/p/P.vue b/docs/components/typography/p/FwbPExample.vue
similarity index 85%
rename from docs/components/typography/p/P.vue
rename to docs/components/typography/p/FwbPExample.vue
index f0b73f0a..a91f3936 100644
--- a/docs/components/typography/p/P.vue
+++ b/docs/components/typography/p/FwbPExample.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="vp-raw">
-    <P class="mb-2">
+    <fwb-p class="mb-2">
       Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
       have richer contextual information to rapidly respond to requests, incidents, and changes.
-    </P>
-    <P>
+    </fwb-p>
+    <fwb-p>
       Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
       audit trail for every change.
-    </P>
+    </fwb-p>
   </div>
 </template>
 
 <script setup>
-import P from '../../../../src/components/Typography/P.vue'
+import { FwbP } from '../../../../src/'
 </script>
diff --git a/docs/components/typography/p/FwbPExampleAlign.vue b/docs/components/typography/p/FwbPExampleAlign.vue
new file mode 100644
index 00000000..b1747887
--- /dev/null
+++ b/docs/components/typography/p/FwbPExampleAlign.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="vp-raw">
+    <fwb-p
+      align="left"
+      class="mb-2"
+    >
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
+    </fwb-p>
+    <fwb-p
+      align="center"
+      class="mb-2"
+    >
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
+    </fwb-p>
+    <fwb-p
+      align="right"
+      class="mb-2"
+    >
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
+    </fwb-p>
+  </div>
+</template>
+
+<script setup>
+import { FwbP } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/p/PCustom.vue b/docs/components/typography/p/FwbPExampleCustom.vue
similarity index 63%
rename from docs/components/typography/p/PCustom.vue
rename to docs/components/typography/p/FwbPExampleCustom.vue
index 3c78723c..5ca6a6f4 100644
--- a/docs/components/typography/p/PCustom.vue
+++ b/docs/components/typography/p/FwbPExampleCustom.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="vp-raw">
-    <P class="!text-green-400 italic">
-      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-      audit trail for every change.
-    </P>
+    <fwb-p class="text-green-800 dark:text-green-400 italic">
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
+    </fwb-p>
   </div>
 </template>
 
 <script setup>
-import P from '../../../../src/components/Typography/P.vue'
+import { FwbP } from '../../../../src/'
 </script>
diff --git a/docs/components/typography/p/FwbPExampleWeight.vue b/docs/components/typography/p/FwbPExampleWeight.vue
new file mode 100644
index 00000000..67ecbecf
--- /dev/null
+++ b/docs/components/typography/p/FwbPExampleWeight.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw">
+    <fwb-p
+      class="mb-2"
+      weight="light"
+    >
+      Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
+    </fwb-p>
+    <fwb-p weight="bold">
+      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
+    </fwb-p>
+  </div>
+</template>
+
+<script setup>
+import { FwbP } from '../../../../src/'
+</script>
diff --git a/docs/components/typography/p/PAlign.vue b/docs/components/typography/p/PAlign.vue
deleted file mode 100644
index bc769efa..00000000
--- a/docs/components/typography/p/PAlign.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <P align="center">
-      Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-      audit trail for every change.
-    </P>
-  </div>
-</template>
-
-<script setup>
-import P from '../../../../src/components/Typography/P.vue'
-</script>
diff --git a/docs/components/typography/p/PWeight.vue b/docs/components/typography/p/PWeight.vue
deleted file mode 100644
index 19e7a7c2..00000000
--- a/docs/components/typography/p/PWeight.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <P class="mb-2" weight="light">
-      Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
-      have richer contextual information to rapidly respond to requests, incidents, and changes.
-    </P>
-    <P weight="light">
-      Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
-      audit trail for every change.
-    </P>
-  </div>
-</template>
-
-<script setup>
-import P from '../../../../src/components/Typography/P.vue'
-</script>
diff --git a/docs/pages/getting-started.md b/docs/pages/getting-started.md
index 9ede73bb..1f34f532 100644
--- a/docs/pages/getting-started.md
+++ b/docs/pages/getting-started.md
@@ -32,15 +32,16 @@ module.exports = {
 3. Now you can use `flowbite-vue` anywhere in your project and build awesome interfaces:
 ```vue
 <template>
-  <dropdown text="Click me" placement="top">
-    <list-group>
-      <list-group-item>Item #1</list-group-item>
-      <list-group-item>Item #2</list-group-item>
-      <list-group-item>Item #3</list-group-item>
-    </list-group>
-  </dropdown>
+  <fwb-dropdown text="Click me" placement="top">
+    <fwb-list-group>
+      <fwb-list-group-item>Item #1</fwb-list-group-item>
+      <fwb-list-group-item>Item #2</fwb-list-group-item>
+      <fwb-list-group-item>Item #3</fwb-list-group-item>
+    </fwb-list-group>
+  </fwb-dropdown>
 </template>
+
 <script setup>
-import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 </script>
 ```
diff --git a/package-lock.json b/package-lock.json
index 906723d0..1fa63da1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,19 +19,18 @@
         "tailwindcss": "^3"
       },
       "devDependencies": {
-        "@tsconfig/node18": "18.2.2",
+        "@rushstack/eslint-patch": "1.4.0",
         "@types/lodash-es": "4.17.9",
         "@types/node": "20.6.0",
-        "@typescript-eslint/eslint-plugin": "6.7.0",
-        "@typescript-eslint/parser": "6.7.0",
         "@vitejs/plugin-vue": "4.3.4",
-        "@vue/eslint-config-typescript": "11.0.3",
+        "@vitest/coverage-v8": "0.34.4",
+        "@vue/eslint-config-typescript": "12.0.0",
         "@vue/test-utils": "2.4.1",
         "@vue/tsconfig": "0.4.0",
-        "c8": "8.0.1",
         "eslint": "8.49.0",
-        "eslint-config-prettier": "9.0.0",
+        "eslint-config-standard": "17.1.0",
         "eslint-plugin-vue": "9.17.0",
+        "eslint-plugin-vue-scoped-css": "2.5.0",
         "jsdom": "22.1.0",
         "postcss": "8.4.31",
         "postcss-prefix-selector": "1.16.0",
@@ -41,7 +40,6 @@
         "vite": "4.4.9",
         "vitepress": "1.0.0-rc.13",
         "vitest": "0.34.4",
-        "vue-eslint-parser": "9.3.1",
         "vue-tsc": "1.8.6"
       },
       "engines": {
@@ -236,6 +234,19 @@
         "@algolia/requester-common": "4.20.0"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
@@ -776,6 +787,20 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
@@ -785,6 +810,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
@@ -848,6 +882,12 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.4.0.tgz",
+      "integrity": "sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==",
+      "dev": true
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -863,12 +903,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@tsconfig/node18": {
-      "version": "18.2.2",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.2.tgz",
-      "integrity": "sha512-d6McJeGsuoRlwWZmVIeE8CUA27lu6jLjvv1JzqmpsytOYYbVi1tHZEnwCNVOXnj4pyLvneZlFlpXUK+X9wBWyw==",
-      "dev": true
-    },
     "node_modules/@types/chai": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.6.tgz",
@@ -896,6 +930,13 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.191",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
@@ -1130,6 +1171,31 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitest/coverage-v8": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.34.4.tgz",
+      "integrity": "sha512-TZ5ghzhmg3COQqfBShL+zRQEInHmV9TSwghTdfkHpCTyTOr+rxo6x41vCNcVfWysWULtqtBVpY6YFNovxnESfA==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@bcoe/v8-coverage": "^0.2.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-lib-source-maps": "^4.0.1",
+        "istanbul-reports": "^3.1.5",
+        "magic-string": "^0.30.1",
+        "picocolors": "^1.0.0",
+        "std-env": "^3.3.3",
+        "test-exclude": "^6.0.0",
+        "v8-to-istanbul": "^9.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": ">=0.32.0 <1"
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "0.34.4",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
@@ -1305,14 +1371,14 @@
       "dev": true
     },
     "node_modules/@vue/eslint-config-typescript": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.3.tgz",
-      "integrity": "sha512-dkt6W0PX6H/4Xuxg/BlFj5xHvksjpSlVjtkQCpaYJBIEuKj2hOVU7r+TIe+ysCwRYFz/lGqvklntRkCAibsbPw==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-12.0.0.tgz",
+      "integrity": "sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.59.1",
-        "@typescript-eslint/parser": "^5.59.1",
-        "vue-eslint-parser": "^9.1.1"
+        "@typescript-eslint/eslint-plugin": "^6.7.0",
+        "@typescript-eslint/parser": "^6.7.0",
+        "vue-eslint-parser": "^9.3.1"
       },
       "engines": {
         "node": "^14.17.0 || >=16.0.0"
@@ -1328,216 +1394,6 @@
         }
       }
     },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/type-utils": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/parser": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/type-utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/types": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "eslint-scope": "^5.1.1",
-        "semver": "^7.3.7"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/@vue/eslint-config-typescript/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/@vue/language-core": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.6.tgz",
@@ -2068,6 +1924,40 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
+      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -2077,6 +1967,86 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
+      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
+      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -2092,16 +2062,41 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true,
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "engines": {
         "node": ">=8"
       }
@@ -2133,30 +2128,14 @@
         "node": ">=8"
       }
     },
-    "node_modules/c8": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-8.0.1.tgz",
-      "integrity": "sha512-EINpopxZNH1mETuI0DzRA4MZpAUH+IFiRhnmFD3vFr3vdrgxqi3VfE3KL0AIL+zDq8rC9bZqwM/VDmmoe04y7w==",
+    "node_modules/builtins": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
+      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@istanbuljs/schema": "^0.1.3",
-        "find-up": "^5.0.0",
-        "foreground-child": "^2.0.0",
-        "istanbul-lib-coverage": "^3.2.0",
-        "istanbul-lib-report": "^3.0.1",
-        "istanbul-reports": "^3.1.6",
-        "rimraf": "^3.0.2",
-        "test-exclude": "^6.0.0",
-        "v8-to-istanbul": "^9.0.0",
-        "yargs": "^17.7.2",
-        "yargs-parser": "^21.1.1"
-      },
-      "bin": {
-        "c8": "bin/c8.js"
-      },
-      "engines": {
-        "node": ">=12"
+        "semver": "^7.0.0"
       }
     },
     "node_modules/cac": {
@@ -2168,6 +2147,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2270,20 +2263,6 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
-    "node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2339,9 +2318,9 @@
       }
     },
     "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
     "node_modules/cross-spawn": {
@@ -2358,6 +2337,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.6.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2429,6 +2419,15 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
@@ -2447,6 +2446,39 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
+      "integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/defined": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
@@ -2586,12 +2618,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
     "node_modules/entities": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
@@ -2604,6 +2630,103 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-abstract": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
+      "integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.2",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.1",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.12",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "safe-array-concat": "^1.0.1",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.8",
+        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.7",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -2641,15 +2764,6 @@
         "@esbuild/win32-x64": "0.18.20"
       }
     },
-    "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2716,18 +2830,210 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-config-prettier": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
-      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
+    "node_modules/eslint-config-standard": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz",
+      "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.0.1",
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+        "eslint-plugin-promise": "^6.0.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
+      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-es-x": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.2.0.tgz",
+      "integrity": "sha512-9dvv5CcvNjSJPqnS5uZkqb3xmbeqRLnvXKK7iI5+oK/yTusyc46zbBZKENGsOfojm/mKfszyZb+wNqNPAPeGXA==",
       "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.1.2",
+        "@eslint-community/regexpp": "^4.6.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      },
+      "peerDependencies": {
+        "eslint": ">=8"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.28.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz",
+      "integrity": "sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.findlastindex": "^1.2.2",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.8.0",
+        "has": "^1.0.3",
+        "is-core-module": "^2.13.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.6",
+        "object.groupby": "^1.0.0",
+        "object.values": "^1.1.6",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.14.2"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "peer": true,
       "bin": {
-        "eslint-config-prettier": "bin/cli.js"
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-n": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.1.0.tgz",
+      "integrity": "sha512-3wv/TooBst0N4ND+pnvffHuz9gNPmk/NkLwAxOt2JykTl/hcuECe6yhTtLJcZjIxtZwN+GX92ACp/QTLpHA3Hg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "builtins": "^5.0.1",
+        "eslint-plugin-es-x": "^7.1.0",
+        "get-tsconfig": "^4.7.0",
+        "ignore": "^5.2.4",
+        "is-core-module": "^2.12.1",
+        "minimatch": "^3.1.2",
+        "resolve": "^1.22.2",
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
       },
       "peerDependencies": {
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-plugin-promise": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
+      "integrity": "sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.17.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.17.0.tgz",
@@ -2749,6 +3055,31 @@
         "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/eslint-plugin-vue-scoped-css": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.5.0.tgz",
+      "integrity": "sha512-vR+raYNE1aQ69lS1lZGiKoz8rXFI3MWf2fxrfns/XCQ0XT5sIguhDtQS+9JmUQJClenLDEe2CQx7P+eeSdF4cA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-utils": "^3.0.0",
+        "lodash": "^4.17.21",
+        "postcss": "^8.4.6",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-scss": "^4.0.3",
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-styl": "^0.12.0"
+      },
+      "engines": {
+        "node": "^12.22 || ^14.17 || >=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0",
+        "vue-eslint-parser": ">=7.1.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -2765,6 +3096,33 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -2847,6 +3205,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -2987,17 +3351,14 @@
         "tabbable": "^6.2.0"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
+        "is-callable": "^1.1.3"
       }
     },
     "node_modules/form-data": {
@@ -3038,13 +3399,33 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
       "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
       "engines": {
-        "node": "6.* || 8.* || >= 10.*"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/get-func-name": {
@@ -3056,6 +3437,52 @@
         "node": "*"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz",
+      "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3102,6 +3529,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -3122,6 +3565,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3139,6 +3595,16 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3148,6 +3614,61 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -3270,6 +3791,49 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "node_modules/internal-slot": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3281,12 +3845,58 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-core-module": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "peer": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3300,15 +3910,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3320,6 +3921,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3328,6 +3942,22 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
@@ -3343,6 +3973,104 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3372,6 +4100,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/istanbul-reports": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
@@ -3511,6 +4253,19 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
     "node_modules/jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
@@ -3582,6 +4337,12 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.sortedlastindex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortedlastindex/-/lodash.sortedlastindex-4.1.0.tgz",
+      "integrity": "sha512-s8xEQdsp2Tu5zUqVdFSe9C0kR8YlnAJYLqMdkh+pIRBRxF6/apWseLdHl3/+jv2I61dhPwtI/Ff+EqvCpc+N8w==",
+      "dev": true
+    },
     "node_modules/loupe": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
@@ -3769,12 +4530,6 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "node_modules/natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-      "dev": true
-    },
     "node_modules/nopt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
@@ -3824,6 +4579,94 @@
         "node": ">= 6"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
+      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
+      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
+      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4120,6 +4963,48 @@
         "postcss": ">4 <9"
       }
     },
+    "node_modules/postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
@@ -4132,6 +5017,25 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-styl": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/postcss-styl/-/postcss-styl-0.12.3.tgz",
+      "integrity": "sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fast-diff": "^1.2.0",
+        "lodash.sortedlastindex": "^4.1.0",
+        "postcss": "^7.0.27 || ^8.0.0",
+        "stylus": "^0.57.0"
+      },
+      "engines": {
+        "node": "^8.10.0 || ^10.13.0 || ^11.10.1 || >=12.13.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/stylus"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -4302,13 +5206,22 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
       "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "set-function-name": "^2.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/requires-port": {
@@ -4318,11 +5231,11 @@
       "dev": true
     },
     "node_modules/resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.6",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
+      "integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==",
       "dependencies": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -4342,6 +5255,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -4410,12 +5333,52 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
+      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -4450,6 +5413,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4483,18 +5461,27 @@
         "vscode-textmate": "^8.0.0"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
-    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4504,6 +5491,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -4512,6 +5508,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-resolve": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+      "dev": true,
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -4524,18 +5531,52 @@
       "integrity": "sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==",
       "dev": true
     },
-    "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
+      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
+      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/strip-ansi": {
@@ -4550,6 +5591,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4574,6 +5625,35 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/stylus": {
+      "version": "0.57.0",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.57.0.tgz",
+      "integrity": "sha512-yOI6G8WYfr0q8v8rRvE91wbxFU+rJPo760Va4MF6K0I6BZjO4r+xSynkvyPBP9tV1CIEUeRsiidjIs2rzb1CnQ==",
+      "dev": true,
+      "dependencies": {
+        "css": "^3.0.0",
+        "debug": "^4.3.2",
+        "glob": "^7.1.6",
+        "safer-buffer": "^2.1.2",
+        "sax": "~1.2.4",
+        "source-map": "^0.7.3"
+      },
+      "bin": {
+        "stylus": "bin/stylus"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/stylus/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4769,25 +5849,17 @@
         "tsc-alias": "dist/bin/index.js"
       }
     },
-    "node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+    "node_modules/tsconfig-paths": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
+      "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
       }
     },
     "node_modules/type-check": {
@@ -4823,6 +5895,75 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@@ -4842,6 +5983,22 @@
       "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
       "dev": true
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -4876,14 +6033,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/v8-to-istanbul": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz",
-      "integrity": "sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==",
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.3.tgz",
+      "integrity": "sha512-9lDD+EVI2fjFsMWXc6dy5JJzBsVTcQ2fVkfBvncZ6xJWG9wtBhOldG+mHkSL0+V1K/xgZz0JDO5UT5hFwHUghg==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.12",
         "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0"
+        "convert-source-map": "^2.0.0"
       },
       "engines": {
         "node": ">=10.12.0"
@@ -5319,6 +6476,43 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
@@ -5335,23 +6529,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -5402,15 +6579,6 @@
         "node": ">=0.4"
       }
     },
-    "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -5425,33 +6593,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -5636,6 +6777,16 @@
         "@algolia/requester-common": "4.20.0"
       }
     },
+    "@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@babel/parser": {
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
@@ -5918,12 +7069,29 @@
         "@sinclair/typebox": "^0.27.8"
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
       "dev": true
     },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
@@ -5974,6 +7142,12 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@rushstack/eslint-patch": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.4.0.tgz",
+      "integrity": "sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==",
+      "dev": true
+    },
     "@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -5986,12 +7160,6 @@
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true
     },
-    "@tsconfig/node18": {
-      "version": "18.2.2",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.2.tgz",
-      "integrity": "sha512-d6McJeGsuoRlwWZmVIeE8CUA27lu6jLjvv1JzqmpsytOYYbVi1tHZEnwCNVOXnj4pyLvneZlFlpXUK+X9wBWyw==",
-      "dev": true
-    },
     "@types/chai": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.6.tgz",
@@ -6019,6 +7187,13 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "peer": true
+    },
     "@types/lodash": {
       "version": "4.14.191",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
@@ -6158,6 +7333,25 @@
       "dev": true,
       "requires": {}
     },
+    "@vitest/coverage-v8": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.34.4.tgz",
+      "integrity": "sha512-TZ5ghzhmg3COQqfBShL+zRQEInHmV9TSwghTdfkHpCTyTOr+rxo6x41vCNcVfWysWULtqtBVpY6YFNovxnESfA==",
+      "dev": true,
+      "requires": {
+        "@ampproject/remapping": "^2.2.1",
+        "@bcoe/v8-coverage": "^0.2.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-lib-source-maps": "^4.0.1",
+        "istanbul-reports": "^3.1.5",
+        "magic-string": "^0.30.1",
+        "picocolors": "^1.0.0",
+        "std-env": "^3.3.3",
+        "test-exclude": "^6.0.0",
+        "v8-to-istanbul": "^9.1.0"
+      }
+    },
     "@vitest/expect": {
       "version": "0.34.4",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
@@ -6275,164 +7469,47 @@
         "@vue/shared": "3.3.4"
       }
     },
-    "@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
-        "source-map-js": "^1.0.2"
-      }
-    },
-    "@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
-      "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "@vue/devtools-api": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
-      "dev": true
-    },
-    "@vue/eslint-config-typescript": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.3.tgz",
-      "integrity": "sha512-dkt6W0PX6H/4Xuxg/BlFj5xHvksjpSlVjtkQCpaYJBIEuKj2hOVU7r+TIe+ysCwRYFz/lGqvklntRkCAibsbPw==",
-      "dev": true,
-      "requires": {
-        "@typescript-eslint/eslint-plugin": "^5.59.1",
-        "@typescript-eslint/parser": "^5.59.1",
-        "vue-eslint-parser": "^9.1.1"
-      },
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-          "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
-          "dev": true,
-          "requires": {
-            "@eslint-community/regexpp": "^4.4.0",
-            "@typescript-eslint/scope-manager": "5.62.0",
-            "@typescript-eslint/type-utils": "5.62.0",
-            "@typescript-eslint/utils": "5.62.0",
-            "debug": "^4.3.4",
-            "graphemer": "^1.4.0",
-            "ignore": "^5.2.0",
-            "natural-compare-lite": "^1.4.0",
-            "semver": "^7.3.7",
-            "tsutils": "^3.21.0"
-          }
-        },
-        "@typescript-eslint/parser": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-          "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/scope-manager": "5.62.0",
-            "@typescript-eslint/types": "5.62.0",
-            "@typescript-eslint/typescript-estree": "5.62.0",
-            "debug": "^4.3.4"
-          }
-        },
-        "@typescript-eslint/scope-manager": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-          "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/types": "5.62.0",
-            "@typescript-eslint/visitor-keys": "5.62.0"
-          }
-        },
-        "@typescript-eslint/type-utils": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-          "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/typescript-estree": "5.62.0",
-            "@typescript-eslint/utils": "5.62.0",
-            "debug": "^4.3.4",
-            "tsutils": "^3.21.0"
-          }
-        },
-        "@typescript-eslint/types": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-          "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
-          "dev": true
-        },
-        "@typescript-eslint/typescript-estree": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-          "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/types": "5.62.0",
-            "@typescript-eslint/visitor-keys": "5.62.0",
-            "debug": "^4.3.4",
-            "globby": "^11.1.0",
-            "is-glob": "^4.0.3",
-            "semver": "^7.3.7",
-            "tsutils": "^3.21.0"
-          }
-        },
-        "@typescript-eslint/utils": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-          "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
-          "dev": true,
-          "requires": {
-            "@eslint-community/eslint-utils": "^4.2.0",
-            "@types/json-schema": "^7.0.9",
-            "@types/semver": "^7.3.12",
-            "@typescript-eslint/scope-manager": "5.62.0",
-            "@typescript-eslint/types": "5.62.0",
-            "@typescript-eslint/typescript-estree": "5.62.0",
-            "eslint-scope": "^5.1.1",
-            "semver": "^7.3.7"
-          }
-        },
-        "@typescript-eslint/visitor-keys": {
-          "version": "5.62.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-          "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/types": "5.62.0",
-            "eslint-visitor-keys": "^3.3.0"
-          }
-        },
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-          "dev": true
-        }
+    "@vue/compiler-sfc": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
+      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "requires": {
+        "@babel/parser": "^7.20.15",
+        "@vue/compiler-core": "3.3.4",
+        "@vue/compiler-dom": "3.3.4",
+        "@vue/compiler-ssr": "3.3.4",
+        "@vue/reactivity-transform": "3.3.4",
+        "@vue/shared": "3.3.4",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.0",
+        "postcss": "^8.1.10",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
+      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "requires": {
+        "@vue/compiler-dom": "3.3.4",
+        "@vue/shared": "3.3.4"
+      }
+    },
+    "@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
+      "dev": true
+    },
+    "@vue/eslint-config-typescript": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-12.0.0.tgz",
+      "integrity": "sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/eslint-plugin": "^6.7.0",
+        "@typescript-eslint/parser": "^6.7.0",
+        "vue-eslint-parser": "^9.3.1"
       }
     },
     "@vue/language-core": {
@@ -6780,12 +7857,93 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
+    "array-includes": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
+      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-string": "^1.0.7"
+      }
+    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "array.prototype.findlastindex": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
+      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
+    "array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "arraybuffer.prototype.slice": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
+      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      }
+    },
     "assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -6798,6 +7956,19 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
+      "peer": true
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6833,24 +8004,14 @@
         "fill-range": "^7.0.1"
       }
     },
-    "c8": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-8.0.1.tgz",
-      "integrity": "sha512-EINpopxZNH1mETuI0DzRA4MZpAUH+IFiRhnmFD3vFr3vdrgxqi3VfE3KL0AIL+zDq8rC9bZqwM/VDmmoe04y7w==",
+    "builtins": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
+      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
       "dev": true,
+      "peer": true,
       "requires": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@istanbuljs/schema": "^0.1.3",
-        "find-up": "^5.0.0",
-        "foreground-child": "^2.0.0",
-        "istanbul-lib-coverage": "^3.2.0",
-        "istanbul-lib-report": "^3.0.1",
-        "istanbul-reports": "^3.1.6",
-        "rimraf": "^3.0.2",
-        "test-exclude": "^6.0.0",
-        "v8-to-istanbul": "^9.0.0",
-        "yargs": "^17.7.2",
-        "yargs-parser": "^21.1.1"
+        "semver": "^7.0.0"
       }
     },
     "cac": {
@@ -6859,6 +8020,17 @@
       "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
       "dev": true
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -6931,17 +8103,6 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
-    "cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
-      "requires": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6988,9 +8149,9 @@
       }
     },
     "convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
     "cross-spawn": {
@@ -7004,6 +8165,17 @@
         "which": "^2.0.1"
       }
     },
+    "css": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.4",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.6.0"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -7055,6 +8227,12 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "dev": true
+    },
     "deep-eql": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
@@ -7070,6 +8248,30 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "define-data-property": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
+      "integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
+    "define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
     "defined": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
@@ -7172,18 +8374,94 @@
         }
       }
     },
-    "emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
     "entities": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
       "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
       "dev": true
     },
+    "es-abstract": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
+      "integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.2",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.1",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.12",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "safe-array-concat": "^1.0.1",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.8",
+        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.7",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.11"
+      }
+    },
+    "es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
     "esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -7214,12 +8492,6 @@
         "@esbuild/win32-x64": "0.18.20"
       }
     },
-    "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
-    },
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -7271,11 +8543,149 @@
         "text-table": "^0.2.0"
       }
     },
-    "eslint-config-prettier": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
-      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
+    "eslint-config-standard": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz",
+      "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
+      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "debug": "^3.2.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-plugin-es-x": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.2.0.tgz",
+      "integrity": "sha512-9dvv5CcvNjSJPqnS5uZkqb3xmbeqRLnvXKK7iI5+oK/yTusyc46zbBZKENGsOfojm/mKfszyZb+wNqNPAPeGXA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.1.2",
+        "@eslint-community/regexpp": "^4.6.0"
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.28.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz",
+      "integrity": "sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "array-includes": "^3.1.6",
+        "array.prototype.findlastindex": "^1.2.2",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.8.0",
+        "has": "^1.0.3",
+        "is-core-module": "^2.13.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.6",
+        "object.groupby": "^1.0.0",
+        "object.values": "^1.1.6",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.14.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "eslint-plugin-n": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.1.0.tgz",
+      "integrity": "sha512-3wv/TooBst0N4ND+pnvffHuz9gNPmk/NkLwAxOt2JykTl/hcuECe6yhTtLJcZjIxtZwN+GX92ACp/QTLpHA3Hg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "builtins": "^5.0.1",
+        "eslint-plugin-es-x": "^7.1.0",
+        "get-tsconfig": "^4.7.0",
+        "ignore": "^5.2.4",
+        "is-core-module": "^2.12.1",
+        "minimatch": "^3.1.2",
+        "resolve": "^1.22.2",
+        "semver": "^7.5.3"
+      }
+    },
+    "eslint-plugin-promise": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
+      "integrity": "sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==",
       "dev": true,
+      "peer": true,
       "requires": {}
     },
     "eslint-plugin-vue": {
@@ -7293,6 +8703,21 @@
         "xml-name-validator": "^4.0.0"
       }
     },
+    "eslint-plugin-vue-scoped-css": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.5.0.tgz",
+      "integrity": "sha512-vR+raYNE1aQ69lS1lZGiKoz8rXFI3MWf2fxrfns/XCQ0XT5sIguhDtQS+9JmUQJClenLDEe2CQx7P+eeSdF4cA==",
+      "dev": true,
+      "requires": {
+        "eslint-utils": "^3.0.0",
+        "lodash": "^4.17.21",
+        "postcss": "^8.4.6",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-scss": "^4.0.3",
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-styl": "^0.12.0"
+      }
+    },
     "eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -7303,6 +8728,23 @@
         "estraverse": "^5.2.0"
       }
     },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
     "eslint-visitor-keys": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -7361,6 +8803,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -7473,14 +8921,14 @@
         "tabbable": "^6.2.0"
       }
     },
-    "foreground-child": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
       "dev": true,
+      "peer": true,
       "requires": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^3.0.2"
+        "is-callable": "^1.1.3"
       }
     },
     "form-data": {
@@ -7511,11 +8959,25 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
-    "get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true
+    "function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "peer": true
     },
     "get-func-name": {
       "version": "2.0.2",
@@ -7523,6 +8985,40 @@
       "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true
     },
+    "get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "get-tsconfig": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz",
+      "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "resolve-pkg-maps": "^1.0.0"
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -7554,6 +9050,16 @@
         "type-fest": "^0.20.2"
       }
     },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
     "globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -7568,26 +9074,77 @@
         "slash": "^3.0.0"
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
-    "has": {
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "peer": true
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
+      "peer": true
+    },
+    "has-symbols": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "peer": true
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "peer": true,
       "requires": {
-        "function-bind": "^1.1.1"
+        "has-symbols": "^1.0.2"
       }
     },
-    "has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true
-    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -7683,6 +9240,40 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "internal-slot": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "get-intrinsic": "^1.2.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -7691,25 +9282,47 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "peer": true
+    },
     "is-core-module": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "requires": {
         "has": "^1.0.3"
       }
     },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
-    "is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
-    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -7718,11 +9331,28 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
+      "peer": true
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-path-inside": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
@@ -7735,6 +9365,74 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "which-typed-array": "^1.1.11"
+      }
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "peer": true
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -7758,6 +9456,17 @@
         "supports-color": "^7.1.0"
       }
     },
+    "istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      }
+    },
     "istanbul-reports": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
@@ -7865,6 +9574,16 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
     "jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
@@ -7918,6 +9637,12 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.sortedlastindex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortedlastindex/-/lodash.sortedlastindex-4.1.0.tgz",
+      "integrity": "sha512-s8xEQdsp2Tu5zUqVdFSe9C0kR8YlnAJYLqMdkh+pIRBRxF6/apWseLdHl3/+jv2I61dhPwtI/Ff+EqvCpc+N8w==",
+      "dev": true
+    },
     "loupe": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
@@ -8061,12 +9786,6 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-      "dev": true
-    },
     "nopt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
@@ -8101,6 +9820,70 @@
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
     },
+    "object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "dev": true,
+      "peer": true
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "peer": true
+    },
+    "object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
+      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "object.groupby": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
+      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
+    "object.values": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
+      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -8295,6 +10078,20 @@
       "dev": true,
       "requires": {}
     },
+    "postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-selector-parser": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
@@ -8304,6 +10101,19 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-styl": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/postcss-styl/-/postcss-styl-0.12.3.tgz",
+      "integrity": "sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "fast-diff": "^1.2.0",
+        "lodash.sortedlastindex": "^4.1.0",
+        "postcss": "^7.0.27 || ^8.0.0",
+        "stylus": "^0.57.0"
+      }
+    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -8408,11 +10218,17 @@
         "picomatch": "^2.2.1"
       }
     },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true
+    "regexp.prototype.flags": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "set-function-name": "^2.0.0"
+      }
     },
     "requires-port": {
       "version": "1.0.0",
@@ -8421,11 +10237,11 @@
       "dev": true
     },
     "resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.6",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
+      "integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==",
       "requires": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -8436,6 +10252,13 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "peer": true
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -8473,12 +10296,43 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "safe-array-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
+      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      }
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -8504,6 +10358,18 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8531,29 +10397,51 @@
         "vscode-textmate": "^8.0.0"
       }
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
-    "signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
-    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "source-map-resolve": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0"
+      }
+    },
     "stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -8566,15 +10454,40 @@
       "integrity": "sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==",
       "dev": true
     },
-    "string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "string.prototype.trim": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
+      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
+      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
       "dev": true,
+      "peer": true,
       "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       }
     },
     "strip-ansi": {
@@ -8586,6 +10499,13 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "peer": true
+    },
     "strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -8601,6 +10521,28 @@
         "acorn": "^8.10.0"
       }
     },
+    "stylus": {
+      "version": "0.57.0",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.57.0.tgz",
+      "integrity": "sha512-yOI6G8WYfr0q8v8rRvE91wbxFU+rJPo760Va4MF6K0I6BZjO4r+xSynkvyPBP9tV1CIEUeRsiidjIs2rzb1CnQ==",
+      "dev": true,
+      "requires": {
+        "css": "^3.0.0",
+        "debug": "^4.3.2",
+        "glob": "^7.1.6",
+        "safer-buffer": "^2.1.2",
+        "sax": "~1.2.4",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        }
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8747,19 +10689,17 @@
         "plimit-lit": "^1.2.6"
       }
     },
-    "tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+    "tsconfig-paths": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
+      "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==",
       "dev": true,
+      "peer": true,
       "requires": {
-        "tslib": "^1.8.1"
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
       }
     },
     "type-check": {
@@ -8783,6 +10723,57 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
+    "typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "typescript": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@@ -8795,6 +10786,19 @@
       "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
       "dev": true
     },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
     "universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -8826,14 +10830,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "v8-to-istanbul": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz",
-      "integrity": "sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==",
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.3.tgz",
+      "integrity": "sha512-9lDD+EVI2fjFsMWXc6dy5JJzBsVTcQ2fVkfBvncZ6xJWG9wtBhOldG+mHkSL0+V1K/xgZz0JDO5UT5hFwHUghg==",
       "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.12",
         "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0"
+        "convert-source-map": "^2.0.0"
       }
     },
     "vite": {
@@ -9087,6 +11091,34 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "which-typed-array": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "why-is-node-running": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
@@ -9097,17 +11129,6 @@
         "stackback": "0.0.2"
       }
     },
-    "wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      }
-    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -9138,12 +11159,6 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
-    "y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true
-    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -9155,27 +11170,6 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
-    "yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
-      "requires": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      }
-    },
-    "yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true
-    },
     "yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 7983eca5..9c5a172c 100644
--- a/package.json
+++ b/package.json
@@ -42,18 +42,18 @@
     "vue": "^3.3.x"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "1.4.0",
     "@types/lodash-es": "4.17.9",
     "@types/node": "20.6.0",
-    "@typescript-eslint/eslint-plugin": "6.7.0",
-    "@typescript-eslint/parser": "6.7.0",
     "@vitejs/plugin-vue": "4.3.4",
+    "@vitest/coverage-v8": "0.34.4",
+    "@vue/eslint-config-typescript": "12.0.0",
     "@vue/test-utils": "2.4.1",
     "@vue/tsconfig": "0.4.0",
-    "c8": "8.0.1",
     "eslint": "8.49.0",
-    "eslint-config-prettier": "9.0.0",
-    "@vue/eslint-config-typescript": "11.0.3",
+    "eslint-config-standard": "17.1.0",
     "eslint-plugin-vue": "9.17.0",
+    "eslint-plugin-vue-scoped-css": "2.5.0",
     "jsdom": "22.1.0",
     "postcss": "8.4.31",
     "postcss-prefix-selector": "1.16.0",
@@ -63,9 +63,7 @@
     "vite": "4.4.9",
     "vitepress": "1.0.0-rc.13",
     "vitest": "0.34.4",
-    "vue-eslint-parser": "9.3.1",
-    "vue-tsc": "1.8.6",
-    "@tsconfig/node18": "18.2.2"
+    "vue-tsc": "1.8.6"
   },
   "dependencies": {
     "@vueuse/core": "9.3.0",
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
deleted file mode 100644
index e9ba5c05..00000000
--- a/src/components/Avatar/Avatar.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="relative">
-    <img v-if="img && !imageError" :class="avatarClasses" :src="img" :alt="alt" @error="setImageError">
-    <div v-else :class="avatarPlaceholderWrapperClasses">
-      <svg v-if="!initials && !hasPlaceholder" :class="avatarPlaceholderClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
-      </svg>
-      <div v-if="!initials && hasPlaceholder" :class="avatarPlaceholderClasses">
-        <slot name="placeholder" />
-      </div>
-      <div v-else :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
-      <span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, ref, toRefs, useSlots } from 'vue'
-import type { PropType } from 'vue'
-import type { AvatarSize, AvatarStatus, AvatarStatusPosition } from './types'
-import { useAvatarClasses } from '@/components/Avatar/composables/useAvatarClasses'
-
-const imageError = ref(false)
-function setImageError() {
-  imageError.value = true
-}
-
-const slots = useSlots()
-const hasPlaceholder = computed(() => slots.placeholder)
-
-const props = defineProps({
-  alt: {
-    type: String,
-    default: 'Avatar',
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  img: {
-    type: String,
-    default: '',
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String as PropType<AvatarSize>,
-    default: 'md',
-  },
-  stacked: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String as PropType<AvatarStatus>,
-    default: null,
-  },
-  statusPosition: {
-    type: String as PropType<AvatarStatusPosition>,
-    default: 'top-right',
-  },
-  initials: {
-    type: String,
-    default: null,
-  },
-})
-
-const { avatarClasses, avatarDotClasses, avatarPlaceholderClasses, avatarPlaceholderWrapperClasses, avatarPlaceholderInitialsClasses } = useAvatarClasses(toRefs(props))
-
-</script>
diff --git a/src/components/Avatar/StackedAvatarsCounter.vue b/src/components/Avatar/StackedAvatarsCounter.vue
deleted file mode 100644
index d3879793..00000000
--- a/src/components/Avatar/StackedAvatarsCounter.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <a class="relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800" :href="href"
-    >+{{ total }}</a
-  >
-</template>
-<script setup lang="ts">
-defineProps({
-  total: {
-    type: Number,
-    default: 1,
-  },
-  href: {
-    type: String,
-    default: '#',
-  },
-})
-</script>
diff --git a/src/components/Avatar/composables/useAvatarClasses.ts b/src/components/Avatar/composables/useAvatarClasses.ts
deleted file mode 100644
index cb253504..00000000
--- a/src/components/Avatar/composables/useAvatarClasses.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { computed } from 'vue'
-import type { Ref } from 'vue'
-import classNames from 'classnames'
-import type { AvatarSize, AvatarStatus, AvatarStatusPosition, AvatarType, avatarDotIndicatorPositionClasses } from '@/components/Avatar/types'
-
-const avatarSizeClasses: Record<AvatarSize, string> = {
-    xs: 'w-6 h-6',
-    sm: 'w-8 h-8',
-    md: 'w-10 h-10',
-    lg: 'w-20 h-20',
-    xl: 'w-36 h-36',
-}
-const avatarTypeClasses: Record<AvatarType, string> = {
-    default: 'rounded',
-    rounded: 'rounded-full',
-}
-const avatarBorderedClasses = 'ring-2 ring-gray-300 dark:ring-gray-500 p-1'
-
-const avatarStatusDotDefaultClasses = 'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800'
-const avatarStatusDotClasses: Record<AvatarStatus, string> = {
-    away: 'bg-gray-400',
-    busy: 'bg-yellow-400',
-    offline: 'bg-red-400',
-    online: 'bg-green-400',
-}
-const avatarStatusDotPositionClasses: Record<avatarDotIndicatorPositionClasses, string> = {
-    'top-right-rounded': 'top-0 -right-0.5',
-    'top-right-default': '-top-1.5 -right-1.5',
-    'top-left-rounded': 'top-0 left-0',
-    'top-left-default': 'top-0 left-0 transform -translate-y-1/2 -translate-x-1/2',
-    'bottom-right-rounded': 'bottom-0 -right-0.5',
-    'bottom-right-default': 'bottom-0 -right-1.5 translate-y-1/2',
-    'bottom-left-rounded': 'bottom-0 left-0',
-    'bottom-left-default': '-bottom-1.5 left-0 transform -translate-x-1/2 ',
-}
-
-const avatarPlaceholderDefaultClasses = 'absolute w-auto h-auto text-gray-400'
-const avatarPlaceholderWrapperDefaultClasses = 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600'
-const avatarPlaceholderInitialsDefaultClasses = 'font-medium text-gray-600 dark:text-gray-300'
-const avatarPlaceholderSizes = {
-    xs: 'bottom-0',
-    sm: 'bottom-0',
-    md: '-bottom-1',
-    lg: '-bottom-2',
-    xl: '-bottom-4',
-}
-
-export type UseAvatarClassesProps = {
-    status: Ref<AvatarStatus>
-    bordered: Ref<boolean>
-    img: Ref<string>
-    alt: Ref<string>
-    rounded: Ref<boolean>
-    size: Ref<AvatarSize>
-    stacked: Ref<boolean>
-    statusPosition: Ref<AvatarStatusPosition>
-}
-
-export function useAvatarClasses(props: UseAvatarClassesProps): {
-    avatarClasses: Ref<string>
-    avatarDotClasses: Ref<string>
-    avatarPlaceholderClasses: Ref<string>
-    avatarPlaceholderWrapperClasses: Ref<string>
-    avatarPlaceholderInitialsClasses: Ref<string>
-} {
-
-    const avatarClasses = computed<string>(() => {
-        return classNames(
-            avatarSizeClasses[props.size.value],
-            avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
-            props.bordered.value ? avatarBorderedClasses : '',
-            props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '',
-        )
-    })
-    const avatarDotClasses = computed<string>(() => {
-        const avatarType = `${props.statusPosition.value}-${props.rounded.value ? 'rounded' : 'default'}`
-        return classNames(
-            avatarStatusDotDefaultClasses,
-            avatarStatusDotClasses[props.status.value],
-            avatarStatusDotPositionClasses[avatarType as avatarDotIndicatorPositionClasses],
-        )
-    })
-    const avatarPlaceholderClasses = computed<string>(() => {
-        return classNames(
-            avatarPlaceholderDefaultClasses,
-            avatarPlaceholderSizes[props.size.value],
-        )
-    })
-    const avatarPlaceholderWrapperClasses = computed<string>(() => {
-        return classNames(
-            avatarPlaceholderWrapperDefaultClasses,
-            avatarSizeClasses[props.size.value],
-            avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
-        )
-    })
-    const avatarPlaceholderInitialsClasses = computed<string>(() => {
-        return classNames(
-            avatarPlaceholderInitialsDefaultClasses,
-        )
-    })
-    // TODO: Avatar Initials
-
-    return {
-        avatarClasses,
-        avatarDotClasses,
-        avatarPlaceholderClasses,
-        avatarPlaceholderWrapperClasses,
-        avatarPlaceholderInitialsClasses,
-    }
-}
-
-
diff --git a/src/components/Breadcrumb/BreadcrumbItem.vue b/src/components/Breadcrumb/BreadcrumbItem.vue
deleted file mode 100644
index 04c13ded..00000000
--- a/src/components/Breadcrumb/BreadcrumbItem.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <li class="inline-flex items-center">
-    <slot name="arrow-icon">
-      <svg v-if="!home" class="w-6 h-6 text-gray-400 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-    </slot>
-    <component :is="breadcrumbElementType" :href="href" :class="breadcrumbItemClasses">
-      <slot name="home-icon">
-        <svg v-if="home" class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
-      </slot>
-      <slot name="default" />
-    </component>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import { useBreadcrumbItemClasses } from '@/components/Breadcrumb/composables/useBreadcrumbItemClasses'
-
-
-const props = defineProps({
-  href: {
-    type: String,
-    default: null,
-  },
-  home: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const breadcrumbElementType = computed(() => {
-  return props.href ? 'a' : 'span'
-})
-const { breadcrumbItemClasses } = useBreadcrumbItemClasses(toRefs(props))
-</script>
diff --git a/src/components/Breadcrumb/composables/useBreadcrumbClasses.ts b/src/components/Breadcrumb/composables/useBreadcrumbClasses.ts
deleted file mode 100644
index 779f779f..00000000
--- a/src/components/Breadcrumb/composables/useBreadcrumbClasses.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { BreadcrumbType } from '../types'
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import classNames from 'classnames'
-
-const breadcrumbDefaultClasses = 'inline-flex items-center space-x-1 md:space-x-3'
-const breadcrumbWrapperVariantClasses: Record<BreadcrumbType, string> = {
-    default: 'flex',
-    solid: 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700',
-}
-export type useBreadcrumbProps = {
-    solid: Ref<boolean>
-}
-export function useBreadcrumbClasses(props: useBreadcrumbProps): {
-    breadcrumbClasses: Ref<string>
-    breadcrumbWrapperClasses: Ref<string>
-} {
-    const breadcrumbClasses = computed<string>(() => {
-        return classNames(
-            breadcrumbDefaultClasses,
-        )
-    })
-    const breadcrumbWrapperClasses = computed<string>(() => {
-        return classNames(
-            breadcrumbWrapperVariantClasses[props.solid.value ? 'solid' : 'defauilt' as BreadcrumbType],
-        )
-    })
-
-    return {
-        breadcrumbClasses,
-        breadcrumbWrapperClasses,
-    }
-}
-
-
diff --git a/src/components/Breadcrumb/composables/useBreadcrumbItemClasses.ts b/src/components/Breadcrumb/composables/useBreadcrumbItemClasses.ts
deleted file mode 100644
index 4bdb6b20..00000000
--- a/src/components/Breadcrumb/composables/useBreadcrumbItemClasses.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import classNames from 'classnames'
-
-
-const breadcrumbItemDefaultClasses = 'ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400'
-const breadcrumbItemLinkClasses = 'text-gray-700 hover:text-gray-900 dark:hover:text-white'
-const breadcrumbSpanClasses = 'text-gray-500'
-export type useBreadcrumbItemProps = {
-    href: Ref<string>
-    home: Ref<boolean>
-}
-export function useBreadcrumbItemClasses(props: useBreadcrumbItemProps): {
-    breadcrumbItemClasses: Ref<string>
-} {
-    const breadcrumbItemClasses = computed<string>(() => {
-        return classNames(
-            breadcrumbItemDefaultClasses,
-            props.href.value ? breadcrumbItemLinkClasses : breadcrumbSpanClasses,
-        )
-    })
-
-    return {
-        breadcrumbItemClasses,
-    }
-}
diff --git a/src/components/Button/composables/useButtonSpinner.ts b/src/components/Button/composables/useButtonSpinner.ts
deleted file mode 100644
index f1fcc760..00000000
--- a/src/components/Button/composables/useButtonSpinner.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ButtonGradient, ButtonSize, ButtonVariant } from '../types'
-import type { SpinnerColor, SpinnerSize } from '../../Spinner/types'
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-
-export type UseButtonSpinnerProps = {
-    outline: Ref<boolean>
-    size: Ref<ButtonSize>
-    color: Ref<ButtonVariant>
-    gradient: Ref<ButtonGradient | null>
-}
-
-export function useButtonSpinner(props: UseButtonSpinnerProps): { size: Ref<SpinnerSize>, color: Ref<SpinnerColor> } {
-    const btnSizeSpinnerSizeMap: Record<ButtonSize, SpinnerSize> = {
-        lg: '5', md: '4', sm: '3', xl: '6', xs: '2.5',
-    }
-    const size = computed<SpinnerSize>(() => {
-        return btnSizeSpinnerSizeMap[props.size.value]
-    })
-    const color = computed<SpinnerColor>(() => {
-
-        if(!props.outline.value) return 'white'
-
-        if(props.gradient.value) {
-            if(props.gradient.value.includes('purple')) return 'purple'
-            else if(props.gradient.value.includes('blue')) return 'blue'
-            else if(props.gradient.value.includes('pink')) return 'pink'
-            else if(props.gradient.value.includes('red')) return 'red'
-            return 'white'
-        }
-
-        if(['alternative', 'dark', 'light'].includes(props.color.value)) {
-            return 'white'
-        } else if(props.color.value === 'default') {
-            return 'blue'
-        }
-        return props.color.value as SpinnerColor
-    })
-
-    return {
-        size,
-        color,
-    }
-}
\ No newline at end of file
diff --git a/src/components/Button/tests/Button.spec.ts b/src/components/Button/tests/Button.spec.ts
deleted file mode 100644
index e7d26703..00000000
--- a/src/components/Button/tests/Button.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Button from '../Button.vue'
-
-describe('Button', () => {
-    it('renders correct text', () => {
-        const wrapper = mount(Button, { props: {}, slots: { default: 'test' } })
-        expect(wrapper.text()).toBe('test')
-    })
-
-    it('provides correct classes for default color button', () => {
-        const defaultButtonClasses = [
-            'text-white',
-            'bg-blue-700',
-            'hover:bg-blue-800',
-            'focus:ring-4',
-            'focus:ring-blue-300',
-            'font-medium',
-            'rounded-lg',
-            'dark:bg-blue-600',
-            'dark:hover:bg-blue-700',
-            'focus:outline-none',
-            'dark:focus:ring-blue-800',
-            'text-sm',
-            'px-4',
-            'py-2',
-        ]
-
-        const wrapper = mount(Button, { props: { color: 'default' } })
-        const classes = wrapper.classes()
-
-        defaultButtonClasses.forEach(cl => expect(classes).toContain(cl))
-    })
-
-    it('provides correct classes for XL size', () => {
-        const xlButtonSizeClasses = [
-            'text-base', 'px-6', 'py-3',
-        ]
-
-        const wrapper = mount(Button, { props: { size: 'xl' } })
-        const classes = wrapper.classes()
-
-        xlButtonSizeClasses.forEach(cl => expect(classes).toContain(cl))
-    })
-})
\ No newline at end of file
diff --git a/src/components/Card/composables/useCardClasses.ts b/src/components/Card/composables/useCardClasses.ts
deleted file mode 100644
index ff1a4a4f..00000000
--- a/src/components/Card/composables/useCardClasses.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type { CardsVariant } from '../types'
-
-export type UseCardsClassesProps = {
-    variant: Ref<CardsVariant>
-}
-
-export function useCardsClasses(props: UseCardsClassesProps): {
-    cardClasses: Ref<string>,
-    horizontalImageClasses: Ref<string>
-} {
-    const cardClasses = computed(() => {
-        if(props.variant.value === 'default') 
-            return 'block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
-        else if(props.variant.value === 'image')
-            return 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'
-        else if(props.variant.value === 'horizontal')
-            return 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
-        return ''
-    })
-
-    const horizontalImageClasses = computed(() => {
-        if(props.variant.value === 'horizontal')
-            return 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg'
-        return ''
-    })
-
-    return {
-        cardClasses,
-        horizontalImageClasses,
-    }
-}
-
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
deleted file mode 100644
index 667595a0..00000000
--- a/src/components/Carousel/Carousel.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div id="default-carousel" class="relative">
-    <!-- Carousel wrapper -->
-    <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
-      <!-- Item 1 -->
-<!--      duration-700 ease-in-out-->
-      <div :class="index === currentPicture ? 'z-30' : 'z-0'"
-           v-for="(picture, index) in pictures" :key="index" class="absolute inset-0 -translate-y-0">
-        <img :src="picture.src" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" :alt="picture.alt">
-      </div>
-    </div>
-    <!-- Slider indicators -->
-    <div v-if="indicators" class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
-      <button v-for="(picture, index) in pictures" :key="index" type="button" :class="index === currentPicture ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full bg-white" aria-current="false" :aria-label="'Slide ' + index" @click.prevent="slideTo(index)"></button>
-    </div>
-    <!-- Slider controls -->
-    <button v-if="controls" @click.prevent="previousPicture" type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
-      <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
-        <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
-        <span class="hidden">Previous</span>
-      </span>
-    </button>
-    <button v-if="controls" @click.prevent="nextPicture" type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
-      <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
-        <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
-        <span class="hidden">Next</span>
-      </span>
-    </button>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import type { PropType } from 'vue'
-import type { PictureItem } from '@/components/Carousel/types'
-
-const props = defineProps({
-  pictures: {
-    type: Array as PropType<PictureItem[]>,
-    default() {
-      return [
-        {
-          'src': 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
-          'alt': 'Picture 1',
-        },
-        {
-          'src': 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
-          'alt': 'Picture 2',
-        },
-        {
-          'src': 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
-          'alt': 'Picture 3',
-        },
-      ]
-    },
-  },
-  indicators: {
-    type: Boolean,
-    default: true,
-  },
-  controls: {
-    type: Boolean,
-    default: true,
-  },
-  slide: {
-    type: Boolean,
-    default: false,
-  },
-  slideInterval: {
-    type: Number,
-    default: 3000,
-  },
-  animation: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const currentPicture = ref(0)
-const direction = ref('')
-const interval = ref()
-
-const automaticSlide = () => {
-    interval.value = setInterval(function() {
-      nextPicture()
-    }, props.slideInterval)
-}
-
-const resetInterval = () => {
-  clearInterval(interval.value)
-  automaticSlide()
-}
-
-const slideTo = (index: number) => {
-  currentPicture.value = index
-  resetInterval()
-}
-
-const nextPicture = () => {
-  if (currentPicture.value !== props.pictures.length - 1) {
-    currentPicture.value ++
-  } else {
-    currentPicture.value = 0
-  }
-  direction.value = 'right'
-  resetInterval()
-}
-
-const previousPicture = () => {
-  if (currentPicture.value !== 0) {
-    currentPicture.value --
-  } else {
-    currentPicture.value = props.pictures.length -1
-  }
-  direction.value = 'left'
-  resetInterval()
-}
-
-onMounted(() => {
-  if (props.slide) {
-    automaticSlide()
-  }
-})
-
-</script>
diff --git a/src/components/Carousel/types.ts b/src/components/Carousel/types.ts
deleted file mode 100644
index 0d7cbf88..00000000
--- a/src/components/Carousel/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type PictureItem = {
-    src: string,
-    alt?: string
-}
diff --git a/src/components/Dropdown/Dropdown.css b/src/components/Dropdown/Dropdown.css
deleted file mode 100644
index 3c71d089..00000000
--- a/src/components/Dropdown/Dropdown.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* to right */
-.to-right-enter-active,
-.to-right-leave-to { opacity: 0; transform: translateX(-10px) }
-
-.to-right-leave,
-.to-right-enter-to { opacity: 1; transform: translateX(0) }
-
-.to-right-enter-active,
-.to-right-leave-active { transition: all 250ms }
-
-
-
-/* to left */
-.to-left-enter-active,
-.to-left-leave-to { opacity: 0; transform: translateX(10px) }
-
-.to-left-leave,
-.to-left-enter-to { opacity: 1; transform: translateX(0) }
-
-.to-left-enter-active,
-.to-left-leave-active { transition: all 250ms }
-
-/* to top */
-.to-top-enter-active,
-.to-top-leave-to { opacity: 0; transform: translateY(10px) }
-
-.to-top-leave,
-.to-top-enter-to { opacity: 1; transform: translateY(0) }
-
-.to-top-enter-active,
-.to-top-leave-active { transition: all 250ms }
-
-/* to bottom */
-.to-bottom-enter-active,
-.to-bottom-leave-to { opacity: 0; transform: translateY(-10px) }
-
-.to-bottom-leave,
-.to-bottom-enter-to { opacity: 1; transform: translateY(0) }
-
-.to-bottom-enter-active,
-.to-bottom-leave-active { transition: all 250ms }
diff --git a/src/components/Dropdown/Dropdown.vue b/src/components/Dropdown/Dropdown.vue
deleted file mode 100644
index 576d6fc1..00000000
--- a/src/components/Dropdown/Dropdown.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="inline-flex relative" ref="wrapper">
-    <div class="inline-flex items-center">
-      <slot-listener @click="onToggle">
-        <slot name="trigger">
-          <Button>
-            {{ text }}
-            <template #suffix>
-              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-              </svg>
-            </template>
-          </Button>
-        </slot>
-      </slot-listener>
-    </div>
-    <transition :name="transitionName">
-      <div ref="content" v-if="visible" :style="contentStyles" :class="[contentClasses]">
-        <slot-listener @click="onHide">
-          <slot />
-        </slot-listener>
-      </div>
-    </transition>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, ref, toRef } from 'vue'
-import type { DropdownPlacement } from './types'
-import { useDropdownClasses } from './composables/useDropdownClasses'
-import Button from '../Button/Button.vue'
-import { onClickOutside } from '@vueuse/core'
-import SlotListener from '@/components/utils/SlotListener/SlotListener.vue'
-
-const visible = ref(false)
-const onHide = () => (visible.value = false)
-const onToggle = () => (visible.value = !visible.value)
-
-const props = withDefaults(
-  defineProps<{
-    placement: DropdownPlacement
-    text: string
-    transition: string
-  }>(),
-  {
-    placement: 'bottom',
-    text: '',
-    transition: '',
-  },
-)
-
-const placementTransitionMap: Record<DropdownPlacement, string> = {
-  bottom: 'to-bottom',
-  left: 'to-left',
-  right: 'to-right',
-  top: 'to-top',
-}
-
-const transitionName = computed(() => {
-  if (props.transition === null) return placementTransitionMap[props.placement]
-  return props.transition
-})
-
-const content = ref<HTMLDivElement>()
-const wrapper = ref<HTMLDivElement>()
-
-const { contentClasses, contentStyles } = useDropdownClasses({
-  placement: toRef(props, 'placement'),
-  visible,
-  contentRef: content,
-})
-
-onClickOutside(wrapper, () => {
-  if (!visible.value) return
-  visible.value = false
-})
-</script>
-
-<style scoped src="./Dropdown.css"></style>
diff --git a/src/components/Dropdown/composables/useDropdownClasses.ts b/src/components/Dropdown/composables/useDropdownClasses.ts
deleted file mode 100644
index deca50d8..00000000
--- a/src/components/Dropdown/composables/useDropdownClasses.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { computed, nextTick, ref, watch } from 'vue'
-import type { Ref } from 'vue'
-import classNames from 'classnames'
-import type { DropdownPlacement } from '../types'
-
-const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
-
-const defaultGapInPx = 8
-
-const placementDropdownClasses: Record<DropdownPlacement, string> = {
-    bottom: '',
-    left: 'top-0',
-    right: 'top-0',
-    top: '',
-}
-
-export type UseDropdownClassesProps = {
-    placement: Ref<DropdownPlacement>
-    contentRef: Ref<HTMLDivElement | undefined>
-    visible: Ref<boolean>
-}
-
-const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
-    bottom(rect: DOMRect): string {
-        return `bottom: -${rect.height + defaultGapInPx}px;`
-    },
-    left(rect: DOMRect): string {
-        return `left: -${rect.width + defaultGapInPx}px;`
-    },
-    right(rect: DOMRect): string {
-        return `right: -${rect.width + defaultGapInPx}px;`
-    },
-    top(rect: DOMRect): string {
-        return `top: -${rect.height + defaultGapInPx}px;`
-    },
-
-}
-
-export function useDropdownClasses(props: UseDropdownClassesProps): {
-    contentClasses: Ref<string>
-    contentStyles: Ref<string>
-} {
-
-    watch(props.visible, (value: boolean) => {
-        if(value) nextTick(() => calculatePlacementClasses())
-    })
-
-    const placementStyles = ref('')
-
-    const calculatePlacementClasses = () => {
-        const boundingRect = props.contentRef.value?.getBoundingClientRect()
-        if(!boundingRect) return placementStyles.value = ''
-        placementStyles.value = placementCalculators[props.placement.value](boundingRect)
-    }
-
-    const contentClasses = computed(() => {
-        return classNames(
-            defaultDropdownClasses,
-            placementDropdownClasses[props.placement.value],
-        )
-    })
-
-    return {
-        contentClasses,
-        contentStyles: placementStyles,
-    }
-}
\ No newline at end of file
diff --git a/src/components/FileInput/composables/useFileInputClasses.ts b/src/components/FileInput/composables/useFileInputClasses.ts
deleted file mode 100644
index 1c1bf596..00000000
--- a/src/components/FileInput/composables/useFileInputClasses.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
-import { computed } from 'vue'
-
-const fileInpDefaultClasses =
-  'block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400'
-const fileInpLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
-const fileInpDropzoneClasses =
-  'flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600'
-const fileDropzoneWrapClasses = 'flex flex-col items-center justify-center pt-5 pb-6'
-const fileDropzoneDefaultTextClasses = '!-mb-2 text-sm text-gray-500 dark:text-gray-400'
-
-export function useFileInputClasses(size: string) {
-  const fileInpClasses = computed(() => {
-    return simplifyTailwindClasses(fileInpDefaultClasses, 'text-' + size)
-  })
-
-  const labelClasses = computed(() => {
-    return fileInpLabelClasses
-  })
-
-  const dropzoneLabelClasses = computed(() => {
-    return fileInpDropzoneClasses
-  })
-
-  const dropzoneWrapClasses = computed(() => {
-    return fileDropzoneWrapClasses
-  })
-
-  const dropzoneTextClasses = computed(() => {
-    return fileDropzoneDefaultTextClasses
-  })
-
-  return {
-    fileInpClasses,
-    labelClasses,
-    dropzoneLabelClasses,
-    dropzoneWrapClasses,
-    dropzoneTextClasses,
-  }
-}
diff --git a/src/components/Accordion/Accordion.vue b/src/components/FwbAccordion/FwbAccordion.vue
similarity index 83%
rename from src/components/Accordion/Accordion.vue
rename to src/components/FwbAccordion/FwbAccordion.vue
index e08ceba9..3ba47c53 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/FwbAccordion/FwbAccordion.vue
@@ -3,9 +3,11 @@
     <slot />
   </div>
 </template>
+
 <script lang="ts" setup>
 import { nanoid } from 'nanoid'
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { useAccordionState } from './composables/useAccordionState'
+
 interface AccordionProps {
   alwaysOpen?: boolean
   openFirstItem?: boolean
diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/FwbAccordion/FwbAccordionContent.vue
similarity index 61%
rename from src/components/Accordion/AccordionContent.vue
rename to src/components/FwbAccordion/FwbAccordionContent.vue
index 8360fe5b..17ad62a3 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/FwbAccordion/FwbAccordionContent.vue
@@ -1,8 +1,8 @@
 <template>
   <div ref="content">
     <div
-        v-if="isLoaded"
-        :class="contentClasses"
+      v-if="isLoaded"
+      :class="contentClasses"
     >
       <slot />
     </div>
@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useAccordionContentClasses } from '@/components/Accordion/composables/useAccordionContentClasses'
-import { onMounted, ref } from 'vue'
-import type { ComputedRef } from 'vue'
+import { type ComputedRef, onMounted, ref } from 'vue'
+import { useAccordionContentClasses } from './composables/useAccordionContentClasses'
+
 const isLoaded = ref(false)
 const content = ref()
 let contentClasses: ComputedRef
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/FwbAccordion/FwbAccordionHeader.vue
similarity index 62%
rename from src/components/Accordion/AccordionHeader.vue
rename to src/components/FwbAccordion/FwbAccordionHeader.vue
index 6fbd9115..fe3df71d 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/FwbAccordion/FwbAccordionHeader.vue
@@ -1,18 +1,32 @@
 <template>
   <div ref="header">
-    <button v-if="isLoaded" type="button" @click="toggleItem" :class="headerClasses">
+    <button
+      v-if="isLoaded"
+      type="button"
+      :class="headerClasses"
+      @click="toggleItem"
+    >
       <span class="w-full"><slot /></span>
-      <svg data-accordion-icon :class="arrowClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
+      <svg
+        data-accordion-icon
+        :class="arrowClasses"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+        />
       </svg>
     </button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, onMounted, ref, type ComputedRef } from 'vue'
-import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
+import { computed, type ComputedRef, onMounted, ref } from 'vue'
+import { useAccordionState } from './composables/useAccordionState'
+import { useAccordionHeaderClasses } from './composables/useAccordionHeaderClasses'
 
 const isLoaded = ref(false)
 const header = ref()
@@ -24,7 +38,7 @@ const accordionState = computed(() => accordionsStates[accordionId.value])
 const panelState = computed(() => accordionState.value.panels[panelId.value])
 
 let headerClasses: ComputedRef, arrowClasses: ComputedRef
-function commonToggleItem() {
+function commonToggleItem () {
   const isSelectedVisible = panelState.value.isVisible
   for (const panelIndex in accordionState.value.panels) {
     const panel = accordionState.value.panels[panelIndex]
@@ -32,10 +46,10 @@ function commonToggleItem() {
     else panel.isVisible = !isSelectedVisible
   }
 }
-function alwaysOpenToggleItem() {
+function alwaysOpenToggleItem () {
   panelState.value.isVisible = !panelState.value.isVisible
 }
-function toggleItem() {
+function toggleItem () {
   if (accordionState.value.alwaysOpen) return alwaysOpenToggleItem()
   commonToggleItem()
 }
diff --git a/src/components/Accordion/AccordionPanel.vue b/src/components/FwbAccordion/FwbAccordionPanel.vue
similarity index 80%
rename from src/components/Accordion/AccordionPanel.vue
rename to src/components/FwbAccordion/FwbAccordionPanel.vue
index 62707299..dfa05ce5 100644
--- a/src/components/Accordion/AccordionPanel.vue
+++ b/src/components/FwbAccordion/FwbAccordionPanel.vue
@@ -1,13 +1,16 @@
 <template>
-  <div :data-panel-id="panelId" ref="panel">
-    <slot v-if="accordionId"></slot>
+  <div
+    ref="panel"
+    :data-panel-id="panelId"
+  >
+    <slot v-if="accordionId" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 import { nanoid } from 'nanoid'
+import { useAccordionState } from './composables/useAccordionState'
 
 const { accordionsStates } = useAccordionState()
 
diff --git a/src/components/Accordion/composables/useAccordionContentClasses.ts b/src/components/FwbAccordion/composables/useAccordionContentClasses.ts
similarity index 88%
rename from src/components/Accordion/composables/useAccordionContentClasses.ts
rename to src/components/FwbAccordion/composables/useAccordionContentClasses.ts
index d4669d6a..dfe07600 100644
--- a/src/components/Accordion/composables/useAccordionContentClasses.ts
+++ b/src/components/FwbAccordion/composables/useAccordionContentClasses.ts
@@ -1,9 +1,10 @@
 import { computed, type Ref } from 'vue'
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { useAccordionState } from './useAccordionState'
 import { twMerge } from 'tailwind-merge'
 
 const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
-export function useAccordionContentClasses(contentRef: Ref) {
+
+export function useAccordionContentClasses (contentRef: Ref) {
   const accordionId = computed(() => contentRef.value.parentElement.parentElement.dataset.accordionId)
   const panelId = computed(() => contentRef.value.parentElement.dataset.panelId)
   const { accordionsStates } = useAccordionState()
diff --git a/src/components/Accordion/composables/useAccordionHeaderClasses.ts b/src/components/FwbAccordion/composables/useAccordionHeaderClasses.ts
similarity index 92%
rename from src/components/Accordion/composables/useAccordionHeaderClasses.ts
rename to src/components/FwbAccordion/composables/useAccordionHeaderClasses.ts
index 11b44ff1..fb1c7769 100644
--- a/src/components/Accordion/composables/useAccordionHeaderClasses.ts
+++ b/src/components/FwbAccordion/composables/useAccordionHeaderClasses.ts
@@ -1,11 +1,12 @@
 import { computed, type Ref } from 'vue'
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { useAccordionState } from './useAccordionState'
 import { twMerge } from 'tailwind-merge'
 
 const baseHeaderClasses =
   'flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
 const baseArrowClasses = 'w-6 h-6 shrink-0'
-export function useAccordionHeaderClasses(headerRef: Ref) {
+
+export function useAccordionHeaderClasses (headerRef: Ref) {
   const accordionId = computed(() => headerRef.value.parentElement.parentElement.dataset.accordionId)
   const panelId = computed(() => headerRef.value.parentElement.dataset.panelId)
   const { accordionsStates } = useAccordionState()
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/FwbAccordion/composables/useAccordionState.ts
similarity index 85%
rename from src/components/Accordion/composables/useAccordionState.ts
rename to src/components/FwbAccordion/composables/useAccordionState.ts
index 5fbe7f93..e53a247d 100644
--- a/src/components/Accordion/composables/useAccordionState.ts
+++ b/src/components/FwbAccordion/composables/useAccordionState.ts
@@ -1,12 +1,15 @@
 import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
-import type { tState } from '@/components/Accordion/types'
+import type { tState } from '../types'
+
 interface AccordionProps {
   alwaysOpen?: boolean
   openFirstItem?: boolean
   flush?: boolean
 }
+
 const accordionsStates = reactive<tState>({})
-export function useAccordionState(
+
+export function useAccordionState (
   id?: string,
   options?: AccordionProps,
 ): {
@@ -15,7 +18,7 @@ export function useAccordionState(
   onBeforeMount(() => {
     if (!id) return
     accordionsStates[id] = {
-      id: id,
+      id,
       flush: options?.flush ?? false,
       alwaysOpen: options?.alwaysOpen ?? false,
       openFirstItem: options?.openFirstItem ?? true,
diff --git a/src/components/Accordion/types.ts b/src/components/FwbAccordion/types.ts
similarity index 98%
rename from src/components/Accordion/types.ts
rename to src/components/FwbAccordion/types.ts
index d801ee0e..266c0026 100644
--- a/src/components/Accordion/types.ts
+++ b/src/components/FwbAccordion/types.ts
@@ -1,12 +1,15 @@
 export type tAccordionMode = 'flush' | 'alwaysOpen' | 'default'
+
 export type tAccordionPanel = {
   order: number
   id: string
   isVisible: boolean
 }
+
 type tAccordionPanels = {
   [key: string]: tAccordionPanel
 }
+
 type tStateElement = {
   id: string
   flush: boolean
@@ -14,6 +17,7 @@ type tStateElement = {
   openFirstItem: boolean
   panels: tAccordionPanels
 }
+
 export type tState = {
   [key: string]: tStateElement
 }
diff --git a/src/components/Alert/Alert.vue b/src/components/FwbAlert/FwbAlert.vue
similarity index 74%
rename from src/components/Alert/Alert.vue
rename to src/components/FwbAlert/FwbAlert.vue
index bcccfd69..4a9520fb 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/FwbAlert/FwbAlert.vue
@@ -1,23 +1,57 @@
 <template>
-  <div v-if="visible" v-bind="$attrs" :class="wrapperClasses" role="alert">
+  <div
+    v-if="visible"
+    v-bind="$attrs"
+    :class="wrapperClasses"
+    role="alert"
+  >
     <div class="flex items-center">
-      <slot v-if="icon || $slots.icon" name="icon">
-        <svg class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+      <slot
+        v-if="icon || $slots.icon"
+        name="icon"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+            clip-rule="evenodd"
+          />
         </svg>
       </slot>
-      <slot name="title"></slot>
+      <slot name="title" />
     </div>
-    <slot name="default" :on-close-click="onCloseClick" />
-    <slot name="close-icon" :on-close-click="onCloseClick">
-      <button v-if="closable" type="button" :class="closeBtnClasses" aria-label="Close" @click="onCloseClick">
+    <slot
+      name="default"
+      :on-close-click="onCloseClick"
+    />
+    <slot
+      name="close-icon"
+      :on-close-click="onCloseClick"
+    >
+      <button
+        v-if="closable"
+        type="button"
+        :class="closeBtnClasses"
+        aria-label="Close"
+        @click="onCloseClick"
+      >
         <span class="sr-only">Dismiss</span>
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <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>
       </button>
     </slot>
@@ -25,8 +59,8 @@
 </template>
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
-import type { AlertType } from './types'
 import { twMerge } from 'tailwind-merge'
+import type { AlertType } from './types'
 
 interface IAlertProps {
   type?: AlertType
@@ -34,9 +68,11 @@ interface IAlertProps {
   icon?: boolean
   border?: boolean
 }
+
 defineOptions({
   inheritAttrs: false,
 })
+
 const props = withDefaults(defineProps<IAlertProps>(), {
   type: 'info',
   closable: false,
@@ -51,9 +87,7 @@ defineSlots<{
   title: any
   /* eslint-enable @typescript-eslint/no-explicit-any */
 }>()
-const emits = defineEmits<{
-  (e: 'close'): void
-}>()
+const emits = defineEmits<{(e: 'close'): void}>()
 
 const attrs = useAttrs()
 const alertTextClasses: Record<AlertType, string> = {
@@ -103,7 +137,7 @@ const wrapperClasses = twMerge(
 )
 const visible = ref(true)
 
-function onCloseClick() {
+function onCloseClick () {
   emits('close')
   visible.value = false
 }
diff --git a/src/components/Alert/types.ts b/src/components/FwbAlert/types.ts
similarity index 85%
rename from src/components/Alert/types.ts
rename to src/components/FwbAlert/types.ts
index 7b43a8eb..9d0dfaab 100644
--- a/src/components/Alert/types.ts
+++ b/src/components/FwbAlert/types.ts
@@ -1 +1 @@
-export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
\ No newline at end of file
+export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
diff --git a/src/components/FwbAvatar/FwbAvatar.vue b/src/components/FwbAvatar/FwbAvatar.vue
new file mode 100644
index 00000000..0cc521e2
--- /dev/null
+++ b/src/components/FwbAvatar/FwbAvatar.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="relative">
+    <img
+      v-if="img && !imageError"
+      :alt="alt"
+      :class="avatarClasses"
+      :src="img"
+      @error="setImageError"
+    >
+    <div
+      v-else
+      :class="avatarPlaceholderWrapperClasses"
+    >
+      <svg
+        v-if="!initials && !hasPlaceholder"
+        :class="avatarPlaceholderClasses"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <div
+        v-if="!initials && hasPlaceholder"
+        :class="avatarPlaceholderClasses"
+      >
+        <slot name="placeholder" />
+      </div>
+      <div
+        v-else
+        :class="avatarPlaceholderInitialsClasses"
+      >
+        {{ initials }}
+      </div>
+      <span
+        v-if="status"
+        :class="avatarDotClasses"
+        :data-pos="statusPosition"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType, ref, toRefs, useSlots } from 'vue'
+import type { AvatarSize, AvatarStatus, AvatarStatusPosition } from './types'
+import { useAvatarClasses } from '@/components/FwbAvatar/composables/useAvatarClasses'
+
+const imageError = ref(false)
+
+function setImageError () {
+  imageError.value = true
+}
+
+const slots = useSlots()
+const hasPlaceholder = computed(() => slots.placeholder)
+
+const props = defineProps({
+  alt: {
+    type: String,
+    default: 'Avatar',
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  img: {
+    type: String,
+    default: '',
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<AvatarSize>,
+    default: 'md',
+  },
+  stacked: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String as PropType<AvatarStatus>,
+    default: null,
+  },
+  statusPosition: {
+    type: String as PropType<AvatarStatusPosition>,
+    default: 'top-right',
+  },
+  initials: {
+    type: String,
+    default: null,
+  },
+})
+
+const {
+  avatarClasses,
+  avatarDotClasses,
+  avatarPlaceholderClasses,
+  avatarPlaceholderInitialsClasses,
+  avatarPlaceholderWrapperClasses,
+} = useAvatarClasses(toRefs(props))
+</script>
diff --git a/src/components/Avatar/StackedAvatars.vue b/src/components/FwbAvatar/FwbAvatarStack.vue
similarity index 100%
rename from src/components/Avatar/StackedAvatars.vue
rename to src/components/FwbAvatar/FwbAvatarStack.vue
diff --git a/src/components/FwbAvatar/FwbAvatarStackCounter.vue b/src/components/FwbAvatar/FwbAvatarStackCounter.vue
new file mode 100644
index 00000000..e1dd8389
--- /dev/null
+++ b/src/components/FwbAvatar/FwbAvatarStackCounter.vue
@@ -0,0 +1,19 @@
+<template>
+  <a
+    class="relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800"
+    :href="href"
+  >+{{ total }}</a>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  total: {
+    type: Number,
+    default: 1,
+  },
+  href: {
+    type: String,
+    default: '#',
+  },
+})
+</script>
diff --git a/src/components/FwbAvatar/composables/useAvatarClasses.ts b/src/components/FwbAvatar/composables/useAvatarClasses.ts
new file mode 100644
index 00000000..4c22d1ff
--- /dev/null
+++ b/src/components/FwbAvatar/composables/useAvatarClasses.ts
@@ -0,0 +1,113 @@
+import { computed, type Ref } from 'vue'
+import type {
+  avatarDotIndicatorPositionClasses,
+  AvatarSize,
+  AvatarStatus,
+  AvatarStatusPosition,
+  AvatarType,
+} from '@/components/FwbAvatar/types'
+import classNames from 'classnames'
+
+const avatarSizeClasses: Record<AvatarSize, string> = {
+  xs: 'w-6 h-6',
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-20 h-20',
+  xl: 'w-36 h-36',
+}
+const avatarTypeClasses: Record<AvatarType, string> = {
+  default: 'rounded',
+  rounded: 'rounded-full',
+}
+const avatarBorderedClasses = 'ring-2 ring-gray-300 dark:ring-gray-500 p-1'
+const avatarStatusDotDefaultClasses = 'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800'
+const avatarStatusDotClasses: Record<AvatarStatus, string> = {
+  away: 'bg-gray-400',
+  busy: 'bg-yellow-400',
+  offline: 'bg-red-400',
+  online: 'bg-green-400',
+}
+const avatarStatusDotPositionClasses: Record<avatarDotIndicatorPositionClasses, string> = {
+  'top-right-rounded': 'top-0 -right-0.5',
+  'top-right-default': '-top-1.5 -right-1.5',
+  'top-left-rounded': 'top-0 left-0',
+  'top-left-default': 'top-0 left-0 transform -translate-y-1/2 -translate-x-1/2',
+  'bottom-right-rounded': 'bottom-0 -right-0.5',
+  'bottom-right-default': 'bottom-0 -right-1.5 translate-y-1/2',
+  'bottom-left-rounded': 'bottom-0 left-0',
+  'bottom-left-default': '-bottom-1.5 left-0 transform -translate-x-1/2 ',
+}
+
+const avatarPlaceholderDefaultClasses = 'absolute w-auto h-auto text-gray-400'
+const avatarPlaceholderWrapperDefaultClasses = 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600'
+const avatarPlaceholderInitialsDefaultClasses = 'font-medium text-gray-600 dark:text-gray-300'
+const avatarPlaceholderSizes = {
+  xs: 'bottom-0',
+  sm: 'bottom-0',
+  md: '-bottom-1',
+  lg: '-bottom-2',
+  xl: '-bottom-4',
+}
+
+export type UseAvatarClassesProps = {
+    status: Ref<AvatarStatus>
+    bordered: Ref<boolean>
+    img: Ref<string>
+    alt: Ref<string>
+    rounded: Ref<boolean>
+    size: Ref<AvatarSize>
+    stacked: Ref<boolean>
+    statusPosition: Ref<AvatarStatusPosition>
+}
+
+export function useAvatarClasses (props: UseAvatarClassesProps): {
+    avatarClasses: Ref<string>
+    avatarDotClasses: Ref<string>
+    avatarPlaceholderClasses: Ref<string>
+    avatarPlaceholderWrapperClasses: Ref<string>
+    avatarPlaceholderInitialsClasses: Ref<string>
+} {
+  const avatarClasses = computed<string>(() => {
+    return classNames(
+      avatarSizeClasses[props.size.value],
+      avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
+      props.bordered.value ? avatarBorderedClasses : '',
+      props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '',
+    )
+  })
+  const avatarDotClasses = computed<string>(() => {
+    const avatarType = `${props.statusPosition.value}-${props.rounded.value ? 'rounded' : 'default'}`
+    return classNames(
+      avatarStatusDotDefaultClasses,
+      avatarStatusDotClasses[props.status.value],
+      avatarStatusDotPositionClasses[avatarType as avatarDotIndicatorPositionClasses],
+    )
+  })
+  const avatarPlaceholderClasses = computed<string>(() => {
+    return classNames(
+      avatarPlaceholderDefaultClasses,
+      avatarPlaceholderSizes[props.size.value],
+    )
+  })
+  const avatarPlaceholderWrapperClasses = computed<string>(() => {
+    return classNames(
+      avatarPlaceholderWrapperDefaultClasses,
+      avatarSizeClasses[props.size.value],
+      avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
+    )
+  })
+  const avatarPlaceholderInitialsClasses = computed<string>(() => {
+    return classNames(
+      avatarPlaceholderInitialsDefaultClasses,
+    )
+  })
+  // TODO: Avatar Initials
+
+  return {
+    avatarClasses,
+    avatarDotClasses,
+    avatarPlaceholderClasses,
+    avatarPlaceholderInitialsClasses,
+    avatarPlaceholderWrapperClasses,
+  }
+}
diff --git a/src/components/Avatar/types.ts b/src/components/FwbAvatar/types.ts
similarity index 100%
rename from src/components/Avatar/types.ts
rename to src/components/FwbAvatar/types.ts
diff --git a/src/components/Badge/Badge.vue b/src/components/FwbBadge/FwbBadge.vue
similarity index 74%
rename from src/components/Badge/Badge.vue
rename to src/components/FwbBadge/FwbBadge.vue
index 28946637..5caea838 100644
--- a/src/components/Badge/Badge.vue
+++ b/src/components/FwbBadge/FwbBadge.vue
@@ -1,13 +1,18 @@
 <template>
-  <component :is="wrapperType" :class="badgeClasses" :href="href">
+  <component
+    :is="wrapperType"
+    :class="badgeClasses"
+    :href="href"
+  >
     <slot name="icon" />
     <slot name="default" />
   </component>
 </template>
+
 <script lang="ts" setup>
 import { computed, useSlots } from 'vue'
-import type { BadgeType, BadgeSize } from './types'
-import { useBadgeClasses } from '@/components/Badge/composables/useBadgeClasses'
+import type { BadgeSize, BadgeType } from './types'
+import { useBadgeClasses } from './composables/useBadgeClasses'
 
 interface IBadgeProps {
   type?: BadgeType
diff --git a/src/components/Badge/composables/useBadgeClasses.ts b/src/components/FwbBadge/composables/useBadgeClasses.ts
similarity index 94%
rename from src/components/Badge/composables/useBadgeClasses.ts
rename to src/components/FwbBadge/composables/useBadgeClasses.ts
index 4996eb4c..23d9f4ee 100644
--- a/src/components/Badge/composables/useBadgeClasses.ts
+++ b/src/components/FwbBadge/composables/useBadgeClasses.ts
@@ -1,4 +1,4 @@
-import type { BadgeType, BadgeSize } from '../types'
+import type { BadgeSize, BadgeType } from '../types'
 import { computed, type Ref, useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
 
@@ -42,7 +42,7 @@ export type UseBadgeClassesOptions = {
   isContentEmpty: Ref<boolean>
 }
 
-export function useBadgeClasses(
+export function useBadgeClasses (
   props: UseBadgeClassesProps,
   options: UseBadgeClassesOptions,
 ): {
@@ -56,7 +56,7 @@ export function useBadgeClasses(
       props.href ? '' : badgeTextClasses[props.type],
       props.href ? badgeLinkClasses : '',
       options.isContentEmpty.value ? onlyIconClasses : defaultBadgeClasses,
-      attrs.class as string,
+        attrs.class as string,
     )
   })
   return {
diff --git a/src/components/Badge/types.ts b/src/components/FwbBadge/types.ts
similarity index 100%
rename from src/components/Badge/types.ts
rename to src/components/FwbBadge/types.ts
diff --git a/src/components/Breadcrumb/Breadcrumb.vue b/src/components/FwbBreadcrumb/FwbBreadcrumb.vue
similarity index 56%
rename from src/components/Breadcrumb/Breadcrumb.vue
rename to src/components/FwbBreadcrumb/FwbBreadcrumb.vue
index 5f0027c3..bc7f36a3 100644
--- a/src/components/Breadcrumb/Breadcrumb.vue
+++ b/src/components/FwbBreadcrumb/FwbBreadcrumb.vue
@@ -1,13 +1,17 @@
 <template>
-  <nav :class="breadcrumbWrapperClasses" aria-label="Breadcrumb">
+  <nav
+    :class="breadcrumbWrapperClasses"
+    aria-label="Breadcrumb"
+  >
     <ol :class="breadcrumbClasses">
       <slot name="default" />
     </ol>
   </nav>
 </template>
+
 <script lang="ts" setup>
 import { toRefs } from 'vue'
-import { useBreadcrumbClasses } from '@/components/Breadcrumb/composables/useBreadcrumbClasses'
+import { useBreadcrumbClasses } from './composables/useBreadcrumbClasses'
 
 const props = defineProps({
   solid: {
@@ -16,5 +20,5 @@ const props = defineProps({
   },
 })
 
-const { breadcrumbWrapperClasses, breadcrumbClasses } = useBreadcrumbClasses(toRefs(props))
+const { breadcrumbClasses, breadcrumbWrapperClasses } = useBreadcrumbClasses(toRefs(props))
 </script>
diff --git a/src/components/FwbBreadcrumb/FwbBreadcrumbItem.vue b/src/components/FwbBreadcrumb/FwbBreadcrumbItem.vue
new file mode 100644
index 00000000..fc74c8c2
--- /dev/null
+++ b/src/components/FwbBreadcrumb/FwbBreadcrumbItem.vue
@@ -0,0 +1,55 @@
+<template>
+  <li class="inline-flex items-center">
+    <slot name="arrow-icon">
+      <svg
+        v-if="!home"
+        class="w-6 h-6 text-gray-400 mr-1"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      ><path
+        clip-rule="evenodd"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        fill-rule="evenodd"
+      /></svg>
+    </slot>
+    <component
+      :is="breadcrumbElementType"
+      :class="breadcrumbItemClasses"
+      :href="href"
+    >
+      <slot name="home-icon">
+        <svg
+          v-if="home"
+          class="w-4 h-4 mr-2"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
+      </slot>
+      <slot name="default" />
+    </component>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { useBreadcrumbItemClasses } from './composables/useBreadcrumbItemClasses'
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: null,
+  },
+  home: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const breadcrumbElementType = computed(() => {
+  return props.href ? 'a' : 'span'
+})
+
+const { breadcrumbItemClasses } = useBreadcrumbItemClasses(toRefs(props))
+</script>
diff --git a/src/components/FwbBreadcrumb/composables/useBreadcrumbClasses.ts b/src/components/FwbBreadcrumb/composables/useBreadcrumbClasses.ts
new file mode 100644
index 00000000..14d59b66
--- /dev/null
+++ b/src/components/FwbBreadcrumb/composables/useBreadcrumbClasses.ts
@@ -0,0 +1,28 @@
+import { computed, type Ref } from 'vue'
+import classNames from 'classnames'
+import type { BreadcrumbType } from '../types'
+
+const breadcrumbDefaultClasses = 'inline-flex items-center space-x-1 md:space-x-3'
+const breadcrumbWrapperVariantClasses: Record<BreadcrumbType, string> = {
+  default: 'flex',
+  solid: 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700',
+}
+
+export type useBreadcrumbProps = {
+  solid: Ref<boolean>
+}
+
+export function useBreadcrumbClasses (props: useBreadcrumbProps): {
+  breadcrumbClasses: Ref<string>
+  breadcrumbWrapperClasses: Ref<string>
+} {
+  const breadcrumbClasses = computed<string>(() => classNames(breadcrumbDefaultClasses))
+  const breadcrumbWrapperClasses = computed<string>(() => classNames(
+    breadcrumbWrapperVariantClasses[props.solid.value ? 'solid' : 'defauilt' as BreadcrumbType],
+  ))
+
+  return {
+    breadcrumbClasses,
+    breadcrumbWrapperClasses,
+  }
+}
diff --git a/src/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.ts b/src/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.ts
new file mode 100644
index 00000000..514f61cf
--- /dev/null
+++ b/src/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.ts
@@ -0,0 +1,24 @@
+import { computed, type Ref } from 'vue'
+import classNames from 'classnames'
+
+const breadcrumbItemDefaultClasses = 'ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400'
+const breadcrumbItemLinkClasses = 'text-gray-700 hover:text-gray-900 dark:hover:text-white'
+const breadcrumbSpanClasses = 'text-gray-500'
+
+export type useBreadcrumbItemProps = {
+  href: Ref<string>
+  home: Ref<boolean>
+}
+
+export function useBreadcrumbItemClasses (props: useBreadcrumbItemProps): {
+  breadcrumbItemClasses: Ref<string>
+} {
+  const breadcrumbItemClasses = computed<string>(() => classNames(
+    breadcrumbItemDefaultClasses,
+    props.href.value ? breadcrumbItemLinkClasses : breadcrumbSpanClasses,
+  ))
+
+  return {
+    breadcrumbItemClasses,
+  }
+}
diff --git a/src/components/Breadcrumb/types.ts b/src/components/FwbBreadcrumb/types.ts
similarity index 100%
rename from src/components/Breadcrumb/types.ts
rename to src/components/FwbBreadcrumb/types.ts
diff --git a/src/components/Button/Button.vue b/src/components/FwbButton/FwbButton.vue
similarity index 59%
rename from src/components/Button/Button.vue
rename to src/components/FwbButton/FwbButton.vue
index 4d4b6be0..6b8b13ff 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/FwbButton/FwbButton.vue
@@ -1,37 +1,83 @@
 <template>
-  <component :is="buttonComponent" :disabled="buttonComponent === 'button' && disabled" :class="wrapperClasses" :[linkAttr]="href">
-    <div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2">
+  <component
+    :is="buttonComponent"
+    :class="wrapperClasses"
+    :[linkAttr]="href"
+    :disabled="buttonComponent === 'button' && 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 />
+      <fwb-spinner
+        v-if="loadingPrefix"
+        :color="spinnerColor"
+        :size="spinnerSize"
+      />
+      <slot
+        v-else
+        name="prefix"
+      />
     </div>
 
     <span :class="spanClasses">
-      <span v-if="isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2">
+      <span
+        v-if="isOutlineGradient && ($slots.prefix || loadingPrefix)"
+        class="mr-2"
+      >
         <!--if outline gradient - need to place slots inside span -->
-        <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
-        <slot name="prefix" v-else />
+        <fwb-spinner
+          v-if="loadingPrefix"
+          :color="spinnerColor"
+          :size="spinnerSize"
+        />
+        <slot
+          v-else
+          name="prefix"
+        />
       </span>
 
       <slot />
 
-      <span v-if="isOutlineGradient && ($slots.suffix || loadingSuffix)" class="ml-2">
+      <span
+        v-if="isOutlineGradient && ($slots.suffix || loadingSuffix)"
+        class="ml-2"
+      >
         <!--if outline gradient - need to place slots inside span -->
-        <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
-        <slot name="suffix" v-else />
+        <fwb-spinner
+          v-if="loadingSuffix"
+          :color="spinnerColor"
+          :size="spinnerSize"
+        />
+        <slot
+          v-else
+          name="suffix"
+        />
       </span>
     </span>
 
-    <div v-if="!isOutlineGradient && ($slots.suffix || loadingSuffix)" class="ml-2">
+    <div
+      v-if="!isOutlineGradient && ($slots.suffix || loadingSuffix)"
+      class="ml-2"
+    >
       <!--automatically add ml class if slot provided or loading -->
-      <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
-      <slot name="suffix" v-else />
+      <fwb-spinner
+        v-if="loadingSuffix"
+        :color="spinnerColor"
+        :size="spinnerSize"
+      />
+      <slot
+        v-else
+        name="suffix"
+      />
     </div>
   </component>
 </template>
+
 <script lang="ts" setup>
 import { computed, resolveComponent, toRefs } from 'vue'
-import Spinner from '../Spinner/Spinner.vue'
+import FwbSpinner from '../FwbSpinner/FwbSpinner.vue'
 import { useButtonClasses } from './composables/useButtonClasses'
 import { useButtonSpinner } from './composables/useButtonSpinner'
 import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/FwbButton/composables/useButtonClasses.ts
similarity index 87%
rename from src/components/Button/composables/useButtonClasses.ts
rename to src/components/FwbButton/composables/useButtonClasses.ts
index e5b67b18..74abfa28 100644
--- a/src/components/Button/composables/useButtonClasses.ts
+++ b/src/components/FwbButton/composables/useButtonClasses.ts
@@ -1,7 +1,6 @@
-import type { Ref } from 'vue'
-import { computed, useSlots } from 'vue'
-import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
+import { computed, type Ref, useSlots } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
 
 export type ButtonClassMap<T extends string> = { hover: Record<T, string>; default: Record<T, string> }
 
@@ -100,20 +99,13 @@ const buttonGradientClasses: ButtonClassMap<ButtonGradient> = {
 
 const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
   default: {
-    'cyan-blue':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
-    'green-blue':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
-    'pink-orange':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
-    'purple-blue':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
-    'purple-pink':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
-    'red-yellow':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
-    'teal-lime':
-      'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800',
+    'cyan-blue': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
+    'green-blue': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
+    'pink-orange': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
+    'purple-blue': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
+    'purple-pink': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
+    'red-yellow': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
+    'teal-lime': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800',
   },
   hover: {
     'cyan-blue': 'group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white',
@@ -168,7 +160,7 @@ export type UseButtonClassesProps = {
 const simpleGradients = ['blue', 'green', 'cyan', 'teal', 'lime', 'red', 'pink', 'purple']
 const alternativeColors = ['alternative', 'light']
 
-export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>; spanClasses: Ref<string> } {
+export function useButtonClasses (props: UseButtonClassesProps): { wrapperClasses: Ref<string>; spanClasses: Ref<string> } {
   const slots = useSlots()
 
   const sizeClasses = computed(() => {
diff --git a/src/components/FwbButton/composables/useButtonSpinner.ts b/src/components/FwbButton/composables/useButtonSpinner.ts
new file mode 100644
index 00000000..8b07c11d
--- /dev/null
+++ b/src/components/FwbButton/composables/useButtonSpinner.ts
@@ -0,0 +1,51 @@
+import { computed, type Ref } from 'vue'
+import type { ButtonGradient, ButtonSize, ButtonVariant } from '../types'
+import type { SpinnerColor, SpinnerSize } from './../../FwbSpinner/types'
+
+export type UseButtonSpinnerProps = {
+    outline: Ref<boolean>
+    size: Ref<ButtonSize>
+    color: Ref<ButtonVariant>
+    gradient: Ref<ButtonGradient | null>
+}
+
+export function useButtonSpinner (props: UseButtonSpinnerProps): { size: Ref<SpinnerSize>, color: Ref<SpinnerColor> } {
+  const btnSizeSpinnerSizeMap: Record<ButtonSize, SpinnerSize> = {
+    xs: '2.5',
+    sm: '3',
+    md: '4',
+    lg: '5',
+    xl: '6',
+  }
+
+  const size = computed<SpinnerSize>(() => btnSizeSpinnerSizeMap[props.size.value])
+
+  const color = computed<SpinnerColor>(() => {
+    if (!props.outline.value) return 'white'
+
+    if (props.gradient.value) {
+      if (props.gradient.value.includes('purple')) {
+        return 'purple'
+      } else if (props.gradient.value.includes('blue')) {
+        return 'blue'
+      } else if (props.gradient.value.includes('pink')) {
+        return 'pink'
+      } else if (props.gradient.value.includes('red')) {
+        return 'red'
+      }
+      return 'white'
+    }
+
+    if (['alternative', 'dark', 'light'].includes(props.color.value)) {
+      return 'white'
+    } else if (props.color.value === 'default') {
+      return 'blue'
+    }
+    return props.color.value as SpinnerColor
+  })
+
+  return {
+    color,
+    size,
+  }
+}
diff --git a/src/components/FwbButton/tests/Button.spec.ts b/src/components/FwbButton/tests/Button.spec.ts
new file mode 100644
index 00000000..a4f8a8b8
--- /dev/null
+++ b/src/components/FwbButton/tests/Button.spec.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FwbButton from '../FwbButton.vue'
+
+describe('FwbButton', () => {
+  it('renders correct text', () => {
+    const wrapper = mount(FwbButton, { props: {}, slots: { default: 'test' } })
+    expect(wrapper.text()).toBe('test')
+  })
+
+  it('provides correct classes for default color button', () => {
+    const defaultButtonClasses = [
+      'text-white',
+      'bg-blue-700',
+      'hover:bg-blue-800',
+      'focus:ring-4',
+      'focus:ring-blue-300',
+      'font-medium',
+      'rounded-lg',
+      'dark:bg-blue-600',
+      'dark:hover:bg-blue-700',
+      'focus:outline-none',
+      'dark:focus:ring-blue-800',
+      'text-sm',
+      'px-4',
+      'py-2',
+    ]
+
+    const wrapper = mount(FwbButton, { props: { color: 'default' } })
+    const classes = wrapper.classes()
+
+    defaultButtonClasses.forEach(cl => expect(classes).toContain(cl))
+  })
+
+  it('provides correct classes for XL size', () => {
+    const xlButtonSizeClasses = [
+      'text-base', 'px-6', 'py-3',
+    ]
+
+    const wrapper = mount(FwbButton, { props: { size: 'xl' } })
+    const classes = wrapper.classes()
+
+    xlButtonSizeClasses.forEach(cl => expect(classes).toContain(cl))
+  })
+})
diff --git a/src/components/Button/types.ts b/src/components/FwbButton/types.ts
similarity index 88%
rename from src/components/Button/types.ts
rename to src/components/FwbButton/types.ts
index a55f2c8a..37c31055 100644
--- a/src/components/Button/types.ts
+++ b/src/components/FwbButton/types.ts
@@ -2,4 +2,4 @@ export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lim
 export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
 export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
 export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
\ No newline at end of file
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
diff --git a/src/components/ButtonGroup/ButtonGroup.vue b/src/components/FwbButtonGroup/FwbButtonGroup.vue
similarity index 75%
rename from src/components/ButtonGroup/ButtonGroup.vue
rename to src/components/FwbButtonGroup/FwbButtonGroup.vue
index f14a8d5c..ba68a32b 100644
--- a/src/components/ButtonGroup/ButtonGroup.vue
+++ b/src/components/FwbButtonGroup/FwbButtonGroup.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="btn-group inline-flex rounded-md shadow-sm" role="group">
-   <slot />
+  <div
+    class="btn-group inline-flex rounded-md shadow-sm"
+    role="group"
+  >
+    <slot />
   </div>
 </template>
+
 <!-- TODO: maybe use provide/inject to control styles -->
 <style>
 @tailwind components;
@@ -18,4 +22,4 @@
     @apply rounded-r-lg;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Card/TheCard.vue b/src/components/FwbCard/FwbCard.vue
similarity index 69%
rename from src/components/Card/TheCard.vue
rename to src/components/FwbCard/FwbCard.vue
index 6f617477..84c5e89b 100644
--- a/src/components/Card/TheCard.vue
+++ b/src/components/FwbCard/FwbCard.vue
@@ -1,14 +1,24 @@
 <template>
-  <component :is="wrapperType" :href="href" :class="cardClasses">
-    <img v-if="imgSrc" class="rounded-t-lg" :class="horizontalImageClasses" :src="imgSrc" :alt="imgAlt"/>
+  <component
+    :is="wrapperType"
+    :class="cardClasses"
+    :href="href"
+  >
+    <img
+      v-if="imgSrc"
+      :alt="imgAlt"
+      :class="horizontalImageClasses"
+      :src="imgSrc"
+      class="rounded-t-lg"
+    >
     <div>
       <slot />
     </div>
   </component>
 </template>
+
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { computed, type PropType, toRefs } from 'vue'
 import { useCardsClasses } from './composables/useCardClasses'
 import type { CardsVariant } from './types'
 
@@ -33,5 +43,4 @@ const props = defineProps({
 
 const { cardClasses, horizontalImageClasses } = useCardsClasses(toRefs(props))
 const wrapperType = computed(() => props.href ? 'a' : 'div')
-
 </script>
diff --git a/src/components/FwbCard/composables/useCardClasses.ts b/src/components/FwbCard/composables/useCardClasses.ts
new file mode 100644
index 00000000..ab123edc
--- /dev/null
+++ b/src/components/FwbCard/composables/useCardClasses.ts
@@ -0,0 +1,33 @@
+import { computed, type Ref } from 'vue'
+import type { CardsVariant } from '../types'
+
+export type UseCardsClassesProps = {
+  variant: Ref<CardsVariant>
+}
+
+export function useCardsClasses (props: UseCardsClassesProps): {
+  cardClasses: Ref<string>,
+  horizontalImageClasses: Ref<string>
+} {
+  const cardClasses = computed(() => {
+    if (props.variant.value === 'default') {
+      return 'block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
+    } else if (props.variant.value === 'image') {
+      return 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'
+    } else if (props.variant.value === 'horizontal') {
+      return 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
+    }
+
+    return ''
+  })
+
+  const horizontalImageClasses = computed(() => (props.variant.value === 'horizontal')
+    ? 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg'
+    : '',
+  )
+
+  return {
+    cardClasses,
+    horizontalImageClasses,
+  }
+}
diff --git a/src/components/Card/types.ts b/src/components/FwbCard/types.ts
similarity index 100%
rename from src/components/Card/types.ts
rename to src/components/FwbCard/types.ts
diff --git a/src/components/FwbCarousel/FwbCarousel.vue b/src/components/FwbCarousel/FwbCarousel.vue
new file mode 100644
index 00000000..d5f8e336
--- /dev/null
+++ b/src/components/FwbCarousel/FwbCarousel.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="relative">
+    <!-- Carousel wrapper -->
+    <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
+      <!-- Item 1 -->
+      <!-- duration-700 ease-in-out-->
+      <div
+        v-for="(picture, index) in pictures"
+        :key="index"
+        :class="index === currentPicture ? 'z-30' : 'z-0'"
+        class="absolute inset-0 -translate-y-0"
+      >
+        <img
+          :alt="picture.alt"
+          :src="picture.src"
+          class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"
+        >
+      </div>
+    </div>
+    <!-- Slider indicators -->
+    <div
+      v-if="!noIndicators"
+      class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"
+    >
+      <button
+        v-for="(picture, index) in pictures"
+        :key="index"
+        :aria-label="'Slide ' + index"
+        :class="index === currentPicture ? 'bg-white' : 'bg-white/50'"
+        aria-current="false"
+        class="w-3 h-3 rounded-full bg-white"
+        type="button"
+        @click.prevent="slideTo(index)"
+      />
+    </div>
+    <!-- Slider controls -->
+    <template v-if="!noControls">
+      <button
+        class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+        data-carousel-prev
+        type="button"
+        @click.prevent="previousPicture"
+      >
+        <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+          <svg
+            class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M15 19l-7-7 7-7"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          /></svg>
+          <span class="hidden">Previous</span>
+        </span>
+      </button>
+      <button
+        class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+        data-carousel-next
+        type="button"
+        @click.prevent="nextPicture"
+      >
+        <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+          <svg
+            class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M9 5l7 7-7 7"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          /></svg>
+          <span class="hidden">Next</span>
+        </span>
+      </button>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, type PropType, ref } from 'vue'
+import type { PictureItem } from '@/components/FwbCarousel/types'
+
+const props = defineProps({
+  pictures: {
+    type: Array as PropType<PictureItem[]>,
+    default () {
+      return []
+    },
+  },
+  noIndicators: {
+    type: Boolean,
+    default: false,
+  },
+  noControls: {
+    type: Boolean,
+    default: false,
+  },
+  slide: {
+    type: Boolean,
+    default: false,
+  },
+  slideInterval: {
+    type: Number,
+    default: 3000,
+  },
+  animation: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentPicture = ref(0)
+const direction = ref('')
+const interval = ref()
+
+const automaticSlide = () => {
+  interval.value = setInterval(function () {
+    nextPicture()
+  }, props.slideInterval)
+}
+
+const resetInterval = () => {
+  clearInterval(interval.value)
+  automaticSlide()
+}
+
+const slideTo = (index: number) => {
+  currentPicture.value = index
+  resetInterval()
+}
+
+const nextPicture = () => {
+  if (currentPicture.value !== props.pictures.length - 1) {
+    currentPicture.value++
+  } else {
+    currentPicture.value = 0
+  }
+  direction.value = 'right'
+  resetInterval()
+}
+
+const previousPicture = () => {
+  if (currentPicture.value !== 0) {
+    currentPicture.value--
+  } else {
+    currentPicture.value = props.pictures.length - 1
+  }
+  direction.value = 'left'
+  resetInterval()
+}
+
+onMounted(() => {
+  if (props.slide) {
+    automaticSlide()
+  }
+})
+</script>
diff --git a/src/components/FwbCarousel/types.ts b/src/components/FwbCarousel/types.ts
new file mode 100644
index 00000000..c61bb24b
--- /dev/null
+++ b/src/components/FwbCarousel/types.ts
@@ -0,0 +1,4 @@
+export type PictureItem = {
+  alt?: string
+  src: string,
+}
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/FwbCheckbox/FwbCheckbox.vue
similarity index 66%
rename from src/components/Checkbox/Checkbox.vue
rename to src/components/FwbCheckbox/FwbCheckbox.vue
index b7785e19..c4a33a52 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/FwbCheckbox/FwbCheckbox.vue
@@ -1,7 +1,15 @@
 <template>
   <label class="flex gap-3 items-center justify-start">
-    <input v-model="model" type="checkbox" :disabled="disabled" :class="checkboxClasses" />
-    <span v-if="label" :class="labelClasses">{{ label }}</span>
+    <input
+      v-model="model"
+      :class="checkboxClasses"
+      :disabled="disabled"
+      type="checkbox"
+    >
+    <span
+      v-if="label"
+      :class="labelClasses"
+    >{{ label }}</span>
     <slot />
   </label>
 </template>
@@ -11,25 +19,28 @@ import { computed } from 'vue'
 import { useCheckboxClasses } from './composables/useCheckboxClasses'
 
 interface CheckboxProps {
-  modelValue?: boolean,
-  label?: string,
   disabled?: boolean,
+  label?: string,
+  modelValue?: boolean,
 }
 const props = withDefaults(defineProps<CheckboxProps>(), {
-  modelValue: false,
-  label: '',
   disabled: false,
+  label: '',
+  modelValue: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
 const model = computed({
-  get() {
+  get () {
     return props.modelValue
   },
-  set(val) {
+  set (val) {
     emit('update:modelValue', val)
   },
 })
 
-const { checkboxClasses, labelClasses } = useCheckboxClasses()
-</script>
\ No newline at end of file
+const {
+  checkboxClasses,
+  labelClasses,
+} = useCheckboxClasses()
+</script>
diff --git a/src/components/Checkbox/composables/useCheckboxClasses.ts b/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
similarity index 63%
rename from src/components/Checkbox/composables/useCheckboxClasses.ts
rename to src/components/FwbCheckbox/composables/useCheckboxClasses.ts
index bd4e7d5d..870cfc70 100644
--- a/src/components/Checkbox/composables/useCheckboxClasses.ts
+++ b/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
@@ -7,17 +7,12 @@ const defaultLabelClasses = 'block text-sm font-medium text-gray-900 dark:text-g
 // CHECKBOX
 const defaultCheckboxClasses = 'w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500'
 
-export function useCheckboxClasses() {
-  const checkboxClasses = computed(() => {
-      return simplifyTailwindClasses(defaultCheckboxClasses)
-  })
+export function useCheckboxClasses () {
+  const checkboxClasses = computed(() => simplifyTailwindClasses(defaultCheckboxClasses))
+  const labelClasses = computed(() => defaultLabelClasses)
 
-  const labelClasses = computed(() => {
-    return defaultLabelClasses
-  })
-
-  return { 
+  return {
     checkboxClasses,
     labelClasses,
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/FwbDropdown/FwbDropdown.vue b/src/components/FwbDropdown/FwbDropdown.vue
new file mode 100644
index 00000000..5f3b0381
--- /dev/null
+++ b/src/components/FwbDropdown/FwbDropdown.vue
@@ -0,0 +1,150 @@
+<template>
+  <div
+    ref="wrapper"
+    class="inline-flex relative"
+  >
+    <div class="inline-flex items-center">
+      <fwb-slot-listener @click="onToggle">
+        <slot name="trigger">
+          <fwb-button>
+            {{ text }}
+            <template #suffix>
+              <svg
+                class="w-4 h-4 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9l-7 7-7-7"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                />
+              </svg>
+            </template>
+          </fwb-button>
+        </slot>
+      </fwb-slot-listener>
+    </div>
+    <transition :name="transitionName">
+      <div
+        v-if="visible"
+        ref="content"
+        :class="[contentClasses]"
+        :style="contentStyles"
+      >
+        <fwb-slot-listener @click="onHide">
+          <slot />
+        </fwb-slot-listener>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, toRef } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import type { DropdownPlacement } from './types'
+import FwbButton from '@/components/FwbButton/FwbButton.vue'
+import FwbSlotListener from '@/components/utils/FwbSlotListener/FwbSlotListener.vue'
+import { useDropdownClasses } from './composables/useDropdownClasses'
+
+const visible = ref(false)
+const onHide = () => (visible.value = false)
+const onToggle = () => (visible.value = !visible.value)
+
+const props = withDefaults(
+  defineProps<{
+    placement?: DropdownPlacement
+    text?: string
+    transition?: string
+  }>(),
+  {
+    placement: 'bottom',
+    text: '',
+    transition: '',
+  },
+)
+
+const placementTransitionMap: Record<DropdownPlacement, string> = {
+  bottom: 'to-bottom',
+  left: 'to-left',
+  right: 'to-right',
+  top: 'to-top',
+}
+
+const transitionName = computed(() => {
+  if (props.transition === null) return placementTransitionMap[props.placement]
+  return props.transition
+})
+
+const content = ref<HTMLDivElement>()
+const wrapper = ref<HTMLDivElement>()
+
+const { contentClasses, contentStyles } = useDropdownClasses({
+  placement: toRef(props, 'placement'),
+  visible,
+  contentRef: content,
+})
+
+onClickOutside(wrapper, () => {
+  if (!visible.value) return
+  visible.value = false
+})
+</script>
+
+<style scoped>
+/* transitions */
+.to-bottom-enter-active,
+.to-bottom-leave-active,
+.to-left-enter-active,
+.to-left-leave-active,
+.to-right-enter-active,
+.to-right-leave-active,
+.to-top-enter-active,
+.to-top-leave-active {
+  transition: all 250ms;
+}
+
+/* to top */
+.to-top-enter-active, .to-top-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.to-top-leave, .to-top-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* to right */
+.to-right-enter-active, .to-right-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+.to-right-leave, .to-right-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* to bottom */
+.to-bottom-enter-active, .to-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.to-bottom-leave, .to-bottom-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* to left */
+.to-left-enter-active, .to-left-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.to-left-leave, .to-left-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+</style>
diff --git a/src/components/FwbDropdown/composables/useDropdownClasses.ts b/src/components/FwbDropdown/composables/useDropdownClasses.ts
new file mode 100644
index 00000000..aa0e1c16
--- /dev/null
+++ b/src/components/FwbDropdown/composables/useDropdownClasses.ts
@@ -0,0 +1,67 @@
+import { computed, nextTick, ref, type Ref, watch } from 'vue'
+import classNames from 'classnames'
+import type { DropdownPlacement } from '../types'
+
+const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
+
+const defaultGapInPx = 8
+
+const placementDropdownClasses: Record<DropdownPlacement, string> = {
+  bottom: '',
+  left: 'top-0',
+  right: 'top-0',
+  top: '',
+}
+
+export type UseDropdownClassesProps = {
+  placement: Ref<DropdownPlacement>
+  contentRef: Ref<HTMLDivElement | undefined>
+  visible: Ref<boolean>
+}
+
+const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
+  bottom (rect: DOMRect): string {
+    return `bottom: -${rect.height + defaultGapInPx}px;`
+  },
+  left (rect: DOMRect): string {
+    return `left: -${rect.width + defaultGapInPx}px;`
+  },
+  right (rect: DOMRect): string {
+    return `right: -${rect.width + defaultGapInPx}px;`
+  },
+  top (rect: DOMRect): string {
+    return `top: -${rect.height + defaultGapInPx}px;`
+  },
+}
+
+export function useDropdownClasses (props: UseDropdownClassesProps): {
+    contentClasses: Ref<string>
+    contentStyles: Ref<string>
+} {
+  watch(props.visible, (value: boolean) => {
+    if (value) nextTick(() => calculatePlacementClasses())
+  })
+
+  const placementStyles = ref('')
+
+  const calculatePlacementClasses = () => {
+    const boundingRect = props.contentRef.value?.getBoundingClientRect()
+    if (!boundingRect) {
+      placementStyles.value = ''
+      return
+    }
+    placementStyles.value = placementCalculators[props.placement.value](boundingRect)
+  }
+
+  const contentClasses = computed(() => {
+    return classNames(
+      defaultDropdownClasses,
+      placementDropdownClasses[props.placement.value],
+    )
+  })
+
+  return {
+    contentClasses,
+    contentStyles: placementStyles,
+  }
+}
diff --git a/src/components/Dropdown/types.ts b/src/components/FwbDropdown/types.ts
similarity index 94%
rename from src/components/Dropdown/types.ts
rename to src/components/FwbDropdown/types.ts
index c5b54be9..0cfc616f 100644
--- a/src/components/Dropdown/types.ts
+++ b/src/components/FwbDropdown/types.ts
@@ -1 +1 @@
-export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right'
\ No newline at end of file
+export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right'
diff --git a/src/components/FileInput/FileInput.vue b/src/components/FwbFileInput/FwbFileInput.vue
similarity index 73%
rename from src/components/FileInput/FileInput.vue
rename to src/components/FwbFileInput/FwbFileInput.vue
index c925a6ee..6b2f70d7 100644
--- a/src/components/FileInput/FileInput.vue
+++ b/src/components/FwbFileInput/FwbFileInput.vue
@@ -3,32 +3,53 @@
     <div v-if="!dropzone">
       <label>
         <span :class="labelClasses">{{ label }}</span>
-        <input :class="fileInpClasses" :multiple="multiple" @change="handleChange" type="file" />
+        <input
+          :class="fileInpClasses"
+          :multiple="multiple"
+          type="file"
+          @change="handleChange"
+        >
       </label>
       <slot />
     </div>
-    <div v-else @change="handleChange" @drop="dropFileHandler" @dragover="dragOverHandler" class="flex items-center justify-center">
+    <div
+      v-else
+      class="flex items-center justify-center"
+      @change="handleChange"
+      @dragover="dragOverHandler"
+      @drop="dropFileHandler"
+    >
       <label :class="dropzoneLabelClasses">
         <div :class="dropzoneWrapClasses">
-          <svg class="w-8 h-8 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+          <svg
+            aria-hidden="true"
+            class="w-8 h-8 text-gray-500 dark:text-gray-400"
+            fill="none"
+            viewBox="0 0 20 16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path
-              stroke="currentColor"
+              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
-              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+              stroke="currentColor"
             />
           </svg>
           <div v-if="!model">
             <p :class="dropzoneTextClasses">
-              <span class="font-semibold"> Click to upload </span>
+              <span class="font-semibold">Click to upload</span>
               or drag and drop
             </p>
             <slot />
           </div>
           <p v-else>File: {{ dropZoneText }}</p>
         </div>
-        <input :multiple="multiple" type="file" class="hidden" />
+        <input
+          :multiple="multiple"
+          type="file"
+          class="hidden"
+        >
       </label>
     </div>
   </div>
@@ -36,23 +57,25 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useFileInputClasses } from '@/components/FileInput/composables/useFileInputClasses'
 import { isArray } from 'lodash-es'
+import { useFileInputClasses } from './composables/useFileInputClasses'
 
 interface FileInputProps {
-  modelValue?: File | File[] | null
-  label?: string
-  size?: string
   dropzone?: boolean
+  label?: string
+  modelValue?: File | File[] | null
   multiple?: boolean
+  size?: string
 }
+
 const props = withDefaults(defineProps<FileInputProps>(), {
-  modelValue: null,
-  label: '',
-  size: 'sm',
   dropzone: false,
+  label: '',
+  modelValue: null,
   multiple: false,
+  size: 'sm',
 })
+
 const dropZoneText = computed(() => {
   if (isArray(props.modelValue)) {
     return props.modelValue.map((el) => el.name).join(', ')
@@ -62,17 +85,17 @@ const dropZoneText = computed(() => {
       .join(',')
   } else if (props.modelValue instanceof File) {
     return props.modelValue.name || ''
-  } else {
-    return ''
   }
+
+  return ''
 })
 
 const emit = defineEmits(['update:modelValue'])
 const model = computed({
-  get() {
+  get () {
     return props.modelValue
   },
-  set(val) {
+  set (val) {
     emit('update:modelValue', val)
   },
 })
@@ -111,5 +134,11 @@ const dragOverHandler = (event: Event) => {
   event.preventDefault()
 }
 
-const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size)
+const {
+  fileInpClasses,
+  labelClasses,
+  dropzoneLabelClasses,
+  dropzoneWrapClasses,
+  dropzoneTextClasses,
+} = useFileInputClasses(props.size)
 </script>
diff --git a/src/components/FwbFileInput/composables/useFileInputClasses.ts b/src/components/FwbFileInput/composables/useFileInputClasses.ts
new file mode 100644
index 00000000..8d8d9d52
--- /dev/null
+++ b/src/components/FwbFileInput/composables/useFileInputClasses.ts
@@ -0,0 +1,28 @@
+import { computed } from 'vue'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+
+const fileInpDefaultClasses = 'block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400'
+const fileInpLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+const fileInpDropzoneClasses = 'flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600'
+const fileDropzoneWrapClasses = 'flex flex-col items-center justify-center pt-5 pb-6'
+const fileDropzoneDefaultTextClasses = '!-mb-2 text-sm text-gray-500 dark:text-gray-400'
+
+export function useFileInputClasses (size: string) {
+  const fileInpClasses = computed(() => simplifyTailwindClasses(
+    fileInpDefaultClasses,
+    'text-' + size,
+  ))
+
+  const labelClasses = computed(() => fileInpLabelClasses)
+  const dropzoneLabelClasses = computed(() => fileInpDropzoneClasses)
+  const dropzoneWrapClasses = computed(() => fileDropzoneWrapClasses)
+  const dropzoneTextClasses = computed(() => fileDropzoneDefaultTextClasses)
+
+  return {
+    fileInpClasses,
+    labelClasses,
+    dropzoneLabelClasses,
+    dropzoneWrapClasses,
+    dropzoneTextClasses,
+  }
+}
diff --git a/src/components/Footer/Footer.vue b/src/components/FwbFooter/FwbFooter.vue
similarity index 92%
rename from src/components/Footer/Footer.vue
rename to src/components/FwbFooter/FwbFooter.vue
index c666bdb6..d32f0ed4 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/FwbFooter/FwbFooter.vue
@@ -1,19 +1,32 @@
+<template>
+  <footer
+    v-bind="$attrs"
+    :class="wrapperClasses"
+  >
+    <slot />
+  </footer>
+</template>
+
 <script lang="ts" setup>
 import { useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
 
-defineOptions({
-  inheritAttrs: false,
-})
 type FooterType = 'sitemap' | 'default' | 'logo' | 'socialmedia'
+
 interface IFooterProps {
   sticky?: boolean
   footerType?: FooterType
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<IFooterProps>(), {
-  sticky: false,
   footerType: 'default',
+  sticky: false,
 })
+
 const attrs = useAttrs()
 const wrapperClasses = twMerge(
   props.footerType === 'sitemap' && 'bg-gray-800',
@@ -24,9 +37,3 @@ const wrapperClasses = twMerge(
   attrs.class as string,
 )
 </script>
-
-<template>
-  <footer v-bind="$attrs" :class="wrapperClasses">
-    <slot></slot>
-  </footer>
-</template>
diff --git a/src/components/Footer/FooterBrand.vue b/src/components/FwbFooter/FwbFooterBrand.vue
similarity index 81%
rename from src/components/Footer/FooterBrand.vue
rename to src/components/FwbFooter/FwbFooterBrand.vue
index 35625d8b..8967ddee 100644
--- a/src/components/Footer/FooterBrand.vue
+++ b/src/components/FwbFooter/FwbFooterBrand.vue
@@ -1,10 +1,26 @@
+<template>
+  <div
+    :class="wrapperClasses"
+    v-bind="$attrs"
+  >
+    <a
+      :class="aClasses"
+      :href="href"
+    >
+      <img
+        :alt="alt"
+        :class="imageClasses"
+        :src="src"
+      >
+      <span :class="mameClasses">{{ name }}</span>
+    </a>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge'
 import { useAttrs } from 'vue'
-defineOptions({
-  inheritAttrs: false,
-})
-const attrs = useAttrs()
+import { twMerge } from 'tailwind-merge'
+
 interface IFooterProps {
   href: string
   src: string
@@ -14,6 +30,12 @@ interface IFooterProps {
   nameClass?: string
   aClass?: string
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
 const props = withDefaults(defineProps<IFooterProps>(), {
   href: '',
   src: '',
@@ -29,12 +51,3 @@ const aClasses = twMerge('flex items-center', props.aClass)
 const imageClasses = twMerge('h-8 mr-3', props.imageClass)
 const mameClasses = twMerge('self-center text-2xl font-semibold whitespace-nowrap dark:text-white', props.nameClass)
 </script>
-
-<template>
-  <div v-bind="$attrs" :class="wrapperClasses">
-    <a :href="href" :class="aClasses">
-      <img :src="src" :class="imageClasses" :alt="alt" />
-      <span :class="mameClasses">{{ name }}</span>
-    </a>
-  </div>
-</template>
diff --git a/src/components/Footer/FooterCopyright.vue b/src/components/FwbFooter/FwbFooterCopyright.vue
similarity index 83%
rename from src/components/Footer/FooterCopyright.vue
rename to src/components/FwbFooter/FwbFooterCopyright.vue
index 7f5e2aca..7e53e074 100644
--- a/src/components/Footer/FooterCopyright.vue
+++ b/src/components/FwbFooter/FwbFooterCopyright.vue
@@ -1,9 +1,22 @@
+<template>
+  <span
+    v-bind="$attrs"
+    :class="spanClasses"
+  >
+    &copy; {{ year }}
+    <component
+      :is="byComponent"
+      :class="aClasses"
+      :href="href"
+    >{{ by }}</component>
+    {{ copyrightMessage }}
+  </span>
+</template>
+
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge'
 import { useAttrs } from 'vue'
-defineOptions({
-  inheritAttrs: false,
-})
+import { twMerge } from 'tailwind-merge'
+
 interface IFooterCopyrigthProps {
   year?: string | number
   by?: string
@@ -12,6 +25,10 @@ interface IFooterCopyrigthProps {
   copyrightMessage?: string
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<IFooterCopyrigthProps>(), {
   year: new Date().getFullYear(),
   by: '',
@@ -19,16 +36,9 @@ const props = withDefaults(defineProps<IFooterCopyrigthProps>(), {
   aClass: '',
   copyrightMessage: 'All Rights Reserved.',
 })
+
 const attrs = useAttrs()
 const spanClasses = twMerge('block text-sm text-gray-500 sm:text-center dark:text-gray-400', attrs.class as string)
 const aClasses = twMerge(props.href ? 'hover:underline' : 'ml-1', props.aClass)
 const byComponent = props.href ? 'a' : 'span'
 </script>
-
-<template>
-  <span v-bind="$attrs" :class="spanClasses">
-    &copy; {{ year }}
-    <component :is="byComponent" :href="href" :class="aClasses">{{ by }}</component>
-    {{ copyrightMessage }}
-  </span>
-</template>
diff --git a/src/components/Footer/FooterIcon.vue b/src/components/FwbFooter/FwbFooterIcon.vue
similarity index 82%
rename from src/components/Footer/FooterIcon.vue
rename to src/components/FwbFooter/FwbFooterIcon.vue
index aeac1c62..d2bf835a 100644
--- a/src/components/Footer/FooterIcon.vue
+++ b/src/components/FwbFooter/FwbFooterIcon.vue
@@ -1,28 +1,37 @@
+<template>
+  <component
+    :is="iconComponent"
+    :aria-label="ariaLabel"
+    :class="aClasses"
+    :href="href"
+    v-bind="$attrs"
+  >
+    <slot />
+    <span class="sr-only">{{ srText }}</span>
+  </component>
+</template>
+
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge'
 import { useAttrs } from 'vue'
-defineOptions({
-  inheritAttrs: false,
-})
-const attrs = useAttrs()
+import { twMerge } from 'tailwind-merge'
+
 interface IFooterIconProps {
   href?: string
   ariaLabel?: string
   srText?: string
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
 const props = withDefaults(defineProps<IFooterIconProps>(), {
   href: '',
   ariaLabel: '',
   srText: '',
 })
-const iconComponent = props.href ? 'a' : 'span'
 
+const iconComponent = props.href ? 'a' : 'span'
 const aClasses = twMerge('text-gray-500 hover:text-gray-900 dark:hover:text-white', attrs.class as string)
 </script>
-
-<template>
-  <component v-bind="$attrs" :is="iconComponent" :href="href" :aria-label="ariaLabel" :class="aClasses">
-    <slot />
-    <span class="sr-only">{{ srText }}</span>
-  </component>
-</template>
diff --git a/src/components/Footer/FooterLink.vue b/src/components/FwbFooter/FwbFooterLink.vue
similarity index 82%
rename from src/components/Footer/FooterLink.vue
rename to src/components/FwbFooter/FwbFooterLink.vue
index d40f1322..984c8ce5 100644
--- a/src/components/Footer/FooterLink.vue
+++ b/src/components/FwbFooter/FwbFooterLink.vue
@@ -1,15 +1,33 @@
+<template>
+  <li
+    v-bind="$attrs"
+    :class="liClasses"
+  >
+    <component
+      :is="linkComponent"
+      :[linkAttr]="href"
+      :class="aClasses"
+    >
+      <slot />
+    </component>
+  </li>
+</template>
+
 <script setup lang="ts">
 import { resolveComponent, useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
-defineOptions({
-  inheritAttrs: false,
-})
-const attrs = useAttrs()
+
 interface IFooterLinkProps {
   href: string
   aClass?: string
   component?: string
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
 const props = withDefaults(defineProps<IFooterLinkProps>(), {
   href: '',
   aClass: '',
@@ -20,11 +38,3 @@ const linkAttr = props.component === 'router-link' ? 'to' : 'href'
 const aClasses = twMerge('hover:underline', props.aClass)
 const liClasses = twMerge('mr-4 md:mr-6 last:mr-0', attrs.class as string)
 </script>
-
-<template>
-  <li v-bind="$attrs" :class="liClasses">
-    <component :is="linkComponent" :[linkAttr]="href" :class="aClasses">
-      <slot />
-    </component>
-  </li>
-</template>
diff --git a/src/components/Footer/FooterLinkGroup.vue b/src/components/FwbFooter/FwbFooterLinkGroup.vue
similarity index 83%
rename from src/components/Footer/FooterLinkGroup.vue
rename to src/components/FwbFooter/FwbFooterLinkGroup.vue
index 0c5b326f..19685d5f 100644
--- a/src/components/Footer/FooterLinkGroup.vue
+++ b/src/components/FwbFooter/FwbFooterLinkGroup.vue
@@ -1,15 +1,20 @@
+<template>
+  <ul
+    v-bind="$attrs"
+    :class="wrapperClasses"
+  >
+    <slot />
+  </ul>
+</template>
+
 <script lang="ts" setup>
 import { useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
+
 defineOptions({
   inheritAttrs: false,
 })
+
 const attrs = useAttrs()
 const wrapperClasses = twMerge('flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0', attrs.class as string)
 </script>
-
-<template>
-  <ul v-bind="$attrs" :class="wrapperClasses">
-    <slot></slot>
-  </ul>
-</template>
diff --git a/src/components/FwbInput/FwbInput.vue b/src/components/FwbInput/FwbInput.vue
new file mode 100644
index 00000000..104ba8bc
--- /dev/null
+++ b/src/components/FwbInput/FwbInput.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      :class="labelClasses"
+    >{{ label }}</label>
+    <div class="flex relative">
+      <div
+        v-if="$slots.prefix"
+        class="w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden"
+      >
+        <slot name="prefix" />
+      </div>
+      <input
+        v-bind="$attrs"
+        v-model="model"
+        :disabled="disabled"
+        :type="type"
+        :required="required"
+        :class="[inputClasses, $slots.prefix ? 'pl-10' : '']"
+      >
+      <div
+        v-if="$slots.suffix"
+        class="absolute right-2.5 bottom-2.5"
+      >
+        <slot name="suffix" />
+      </div>
+    </div>
+    <p
+      v-if="$slots.validationMessage"
+      :class="validationWrapperClasses"
+    >
+      <slot name="validationMessage" />
+    </p>
+    <p
+      v-if="$slots.helper"
+      class="mt-2 text-sm text-gray-500 dark:text-gray-400"
+    >
+      <slot name="helper" />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { twMerge } from 'tailwind-merge'
+import { useInputClasses } from './composables/useInputClasses'
+import {
+  type InputSize,
+  type InputType,
+  type ValidationStatus,
+  validationStatusMap,
+} from './types'
+
+interface InputProps {
+  disabled?: boolean
+  label?: string
+  modelValue: string
+  required?: boolean
+  size?: InputSize
+  type?: InputType
+  validationStatus?: ValidationStatus
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  disabled: false,
+  label: '',
+  modelValue: '',
+  required: false,
+  size: 'md',
+  type: 'text',
+  validationStatus: undefined,
+})
+
+const model = useVModel(props, 'modelValue')
+
+const { inputClasses, labelClasses } = useInputClasses(toRefs(props))
+
+const validationWrapperClasses = computed(() => twMerge(
+  'mt-2 text-sm',
+  props.validationStatus === validationStatusMap.Success ? 'text-green-600 dark:text-green-500' : '',
+  props.validationStatus === validationStatusMap.Error ? 'text-red-600 dark:text-red-500' : '',
+
+))
+</script>
diff --git a/src/components/Input/composables/useInputClasses.ts b/src/components/FwbInput/composables/useInputClasses.ts
similarity index 55%
rename from src/components/Input/composables/useInputClasses.ts
rename to src/components/FwbInput/composables/useInputClasses.ts
index 5f8ef9b5..d9bbd4cd 100644
--- a/src/components/Input/composables/useInputClasses.ts
+++ b/src/components/FwbInput/composables/useInputClasses.ts
@@ -1,7 +1,11 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import { ValidationStatus, type InputSize } from '@/components/Input/types'
+import { computed, type Ref } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import {
+  type InputSize,
+  type ValidationStatus,
+  validationStatusMap,
+} from '../types'
+
 // LABEL
 const baseLabelClasses = 'block mb-2 text-sm font-medium'
 
@@ -15,8 +19,7 @@ const inputSizeClasses: Record<InputSize, string> = {
   sm: 'p-2 text-sm',
 }
 
-const successInputClasses =
-  'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500'
+const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500'
 const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
 
 export type UseInputClassesProps = {
@@ -25,19 +28,35 @@ export type UseInputClassesProps = {
   validationStatus: Ref<ValidationStatus | undefined>
 }
 
-export function useInputClasses(props: UseInputClassesProps): {
+export function useInputClasses (props: UseInputClassesProps): {
   inputClasses: Ref<string>
   labelClasses: Ref<string>
 } {
   const inputClasses = computed(() => {
     const vs = props.validationStatus.value
-    const classByStatus = vs === ValidationStatus.Success ? successInputClasses : vs == ValidationStatus.Error ? errorInputClasses : ''
-    return twMerge(defaultInputClasses, classByStatus, inputSizeClasses[props.size.value], props.disabled.value ? disabledInputClasses : '')
+
+    const classByStatus = vs === validationStatusMap.Success
+      ? successInputClasses
+      : vs === validationStatusMap.Error
+        ? errorInputClasses
+        : ''
+
+    return twMerge(
+      defaultInputClasses,
+      classByStatus,
+      inputSizeClasses[props.size.value],
+      props.disabled.value ? disabledInputClasses : '',
+    )
   })
 
   const labelClasses = computed(() => {
     const vs = props.validationStatus.value
-    const classByStatus = vs === ValidationStatus.Success ? 'text-green-700 dark:text-green-500' : vs == ValidationStatus.Error ? 'text-red-700 dark:text-red-500' : 'text-gray-900 dark:text-gray-300'
+    const classByStatus = vs === validationStatusMap.Success
+      ? 'text-green-700 dark:text-green-500'
+      : vs === validationStatusMap.Error
+        ? 'text-red-700 dark:text-red-500'
+        : 'text-gray-900 dark:text-gray-300'
+
     return twMerge(baseLabelClasses, classByStatus)
   })
 
diff --git a/src/components/FwbInput/types.ts b/src/components/FwbInput/types.ts
new file mode 100644
index 00000000..c23196a5
--- /dev/null
+++ b/src/components/FwbInput/types.ts
@@ -0,0 +1,10 @@
+export type InputSize = 'sm' | 'md' | 'lg'
+
+export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'
+
+export const validationStatusMap = {
+  Success: 'success',
+  Error: 'error',
+} as const
+
+export type ValidationStatus = typeof validationStatusMap[keyof typeof validationStatusMap]
diff --git a/src/components/ListGroup/ListGroup.vue b/src/components/FwbListGroup/FwbListGroup.vue
similarity index 99%
rename from src/components/ListGroup/ListGroup.vue
rename to src/components/FwbListGroup/FwbListGroup.vue
index c63dab4e..f9d5c8d5 100644
--- a/src/components/ListGroup/ListGroup.vue
+++ b/src/components/FwbListGroup/FwbListGroup.vue
@@ -3,6 +3,7 @@
     <slot />
   </ul>
 </template>
+
 <script lang="ts" setup>
 import { useListGroupClasses } from './composables/useListGroupClasses'
 
diff --git a/src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue b/src/components/FwbListGroup/FwbListGroupItem.vue
similarity index 64%
rename from src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue
rename to src/components/FwbListGroup/FwbListGroupItem.vue
index 9cc5e1c5..9e64074d 100644
--- a/src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue
+++ b/src/components/FwbListGroup/FwbListGroupItem.vue
@@ -1,24 +1,29 @@
 <template>
   <li :class="itemClasses">
-    <div class="mr-2" v-if="$slots.prefix">
+    <div
+      v-if="$slots.prefix"
+      class="mr-2"
+    >
       <slot name="prefix" />
     </div>
     <slot />
-    <div class="ml-2" v-if="$slots.suffix">
+    <div
+      v-if="$slots.suffix"
+      class="ml-2"
+    >
       <slot name="suffix" />
     </div>
   </li>
 </template>
+
 <script lang="ts" setup>
-import {
-  useListGroupItemClasses,
-} from './composables/useListGroupItemClasses'
 import { toRefs } from 'vue'
+import { useListGroupItemClasses } from './composables/useListGroupItemClasses'
 
 const props = defineProps({
   hover: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   disabled: {
     type: Boolean,
diff --git a/src/components/FwbListGroup/composables/useListGroupClasses.ts b/src/components/FwbListGroup/composables/useListGroupClasses.ts
new file mode 100644
index 00000000..91610a66
--- /dev/null
+++ b/src/components/FwbListGroup/composables/useListGroupClasses.ts
@@ -0,0 +1,18 @@
+import { computed, type Ref } from 'vue'
+import classNames from 'classnames'
+
+const defaultContainerClasses = 'overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white'
+
+export function useListGroupClasses (): {
+  containerClasses: Ref<string>,
+  } {
+  const containerClasses = computed<string>(() => {
+    return classNames(
+      defaultContainerClasses,
+    )
+  })
+
+  return {
+    containerClasses,
+  }
+}
diff --git a/src/components/FwbListGroup/composables/useListGroupItemClasses.ts b/src/components/FwbListGroup/composables/useListGroupItemClasses.ts
new file mode 100644
index 00000000..dac2aa2c
--- /dev/null
+++ b/src/components/FwbListGroup/composables/useListGroupItemClasses.ts
@@ -0,0 +1,27 @@
+import { computed, type Ref } from 'vue'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+
+const defaultItemClasses = 'inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600'
+const hoverItemClasses = 'block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white'
+const disabledItemClasses = 'bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400'
+
+export type UseListGroupItemClassesProps = {
+  hover: Ref<boolean>,
+  disabled: Ref<boolean>,
+}
+
+export function useListGroupItemClasses (props: UseListGroupItemClassesProps): {
+    itemClasses: Ref<string>,
+} {
+  const itemClasses = computed<string>(() => {
+    return simplifyTailwindClasses(
+      defaultItemClasses,
+      props.disabled.value ? disabledItemClasses : '',
+      !props.disabled.value && props.hover.value ? hoverItemClasses : '',
+    )
+  })
+
+  return {
+    itemClasses,
+  }
+}
diff --git a/src/components/FwbModal/FwbModal.vue b/src/components/FwbModal/FwbModal.vue
new file mode 100644
index 00000000..6a879e38
--- /dev/null
+++ b/src/components/FwbModal/FwbModal.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" />
+    <div
+      ref="modalRef"
+      class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
+      tabindex="0"
+      @click.self="clickOutside"
+      @keyup.esc="closeWithEsc"
+    >
+      <div
+        :class="`${modalSizeClasses[size]}`"
+        class="relative p-4 w-full h-full"
+      >
+        <!-- Modal content -->
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <!-- Modal header -->
+          <div
+            :class="$slots.header ? 'border-b border-gray-200 dark:border-gray-600' : ''"
+            class="p-4 rounded-t flex justify-between items-center"
+          >
+            <slot name="header" />
+            <button
+              v-if="!persistent"
+              aria-label="close"
+              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              type="button"
+              @click="closeModal"
+            >
+              <slot name="close-icon">
+                <svg
+                  class="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                ><path
+                  clip-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"
+                  fill-rule="evenodd"
+                /></svg>
+              </slot>
+            </button>
+          </div>
+          <!-- Modal body -->
+          <div
+            :class="$slots.header ? '' : 'pt-0'"
+            class="p-6"
+          >
+            <slot name="body" />
+          </div>
+          <!-- Modal footer -->
+          <div
+            v-if="$slots.footer"
+            class="p-6 rounded-b border-gray-200 border-t dark:border-gray-600"
+          >
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, type Ref } from 'vue'
+import type { ModalSize } from './types'
+
+interface ModalProps {
+  notEscapable?: boolean,
+  persistent?: boolean
+  size?: ModalSize,
+}
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  notEscapable: false,
+  persistent: false,
+  size: '2xl',
+})
+
+const emit = defineEmits(['close', 'click:outside'])
+const modalSizeClasses = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+}
+
+function closeModal () {
+  emit('close')
+}
+function clickOutside () {
+  if (!props.persistent) {
+    emit('click:outside')
+    closeModal()
+  }
+}
+
+function closeWithEsc () {
+  if (!props.notEscapable && !props.persistent) closeModal()
+}
+const modalRef: Ref<HTMLElement | null> = ref(null)
+onMounted(() => {
+  if (modalRef.value) {
+    modalRef.value.focus()
+  }
+})
+</script>
diff --git a/src/components/Modal/types.ts b/src/components/FwbModal/types.ts
similarity index 100%
rename from src/components/Modal/types.ts
rename to src/components/FwbModal/types.ts
diff --git a/src/components/FwbNavbar/FwbNavbar.vue b/src/components/FwbNavbar/FwbNavbar.vue
new file mode 100644
index 00000000..e630b2fe
--- /dev/null
+++ b/src/components/FwbNavbar/FwbNavbar.vue
@@ -0,0 +1,83 @@
+<template>
+  <nav :class="navbarClasses">
+    <div class="container flex flex-wrap justify-between items-center mx-auto">
+      <slot name="logo" />
+      <button
+        aria-controls="navbar-default"
+        aria-expanded="false"
+        class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        type="button"
+        @click="toggleMobileMenu()"
+      >
+        <span class="sr-only">Open main menu</span>
+        <slot name="menu-icon">
+          <svg
+            aria-hidden="true"
+            class="w-6 h-6"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          ><path
+            clip-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            fill-rule="evenodd"
+          /></svg>
+        </slot>
+      </button>
+      <slot
+        :is-show-menu="isShowMenu"
+        name="default"
+      />
+      <div
+        v-if="slots['right-side']"
+        class="hidden md:order-2 md:flex"
+      >
+        <slot name="right-side" />
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useSlots } from 'vue'
+import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
+import classNames from 'classnames'
+
+const props = defineProps({
+  sticky: {
+    type: Boolean,
+    default: false,
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  solid: {
+    type: Boolean,
+    default: false,
+  },
+})
+const slots = useSlots()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('md')
+const isShowMenuOnMobile = ref(false)
+const toggleMobileMenu = useToggle(isShowMenuOnMobile)
+const navbarBaseClasses = ' border-gray-200'
+const navbarFloatClasses = 'fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600'
+const navbarRoundedClasses = 'rounded'
+const navbarSolidClasses = 'p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
+const navbarWhiteClasses = 'bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900'
+
+const navbarClasses = computed(() => classNames(
+  navbarBaseClasses,
+  props.sticky ? navbarFloatClasses : '',
+  props.rounded ? navbarRoundedClasses : '',
+  props.solid ? navbarSolidClasses : navbarWhiteClasses,
+))
+
+const isShowMenu = computed(() => (!isMobile)
+  ? true
+  : isShowMenuOnMobile.value,
+)
+</script>
diff --git a/src/components/Navbar/NavbarCollapse.vue b/src/components/FwbNavbar/FwbNavbarCollapse.vue
similarity index 77%
rename from src/components/Navbar/NavbarCollapse.vue
rename to src/components/FwbNavbar/FwbNavbarCollapse.vue
index 46e5ce09..d2d3f4a3 100644
--- a/src/components/Navbar/NavbarCollapse.vue
+++ b/src/components/FwbNavbar/FwbNavbarCollapse.vue
@@ -7,9 +7,10 @@
 </template>
 
 <script setup lang="ts">
-import classNames from 'classnames'
 import { computed } from 'vue'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import classNames from 'classnames'
+
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMobile = breakpoints.smaller('md')
 const props = defineProps({
@@ -22,10 +23,12 @@ const props = defineProps({
 const menuClassesDefault = 'w-full md:block md:w-auto'
 const listClassesDefault = 'flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700'
 const mobileListClasses = 'bg-gray-50'
-const menuClasses = computed(() => {
-  return classNames(menuClassesDefault, props.isShowMenu ? '': 'hidden')
-})
-const listClasses = computed(() => {
-  return classNames(listClassesDefault, isMobile.value ? mobileListClasses : '')
-})
+const menuClasses = computed(() => classNames(
+  menuClassesDefault,
+  props.isShowMenu ? '' : 'hidden',
+))
+const listClasses = computed(() => classNames(
+  listClassesDefault,
+  isMobile.value ? mobileListClasses : '',
+))
 </script>
diff --git a/src/components/FwbNavbar/FwbNavbarLink.ts b/src/components/FwbNavbar/FwbNavbarLink.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/FwbNavbar/FwbNavbarLink.vue b/src/components/FwbNavbar/FwbNavbarLink.vue
new file mode 100644
index 00000000..8fe7183f
--- /dev/null
+++ b/src/components/FwbNavbar/FwbNavbarLink.vue
@@ -0,0 +1,50 @@
+<template>
+  <li>
+    <component
+      :is="componentName"
+      :[linkAttr]="link"
+      :class="linkClasses"
+      @click="handleClick"
+    >
+      <slot />
+    </component>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+import { computed, resolveComponent } from 'vue'
+interface IFwbNavbarLinkProps {
+  link?: string,
+  isActive?: boolean,
+  component?: string,
+  linkAttr?: string,
+  disabled?: boolean
+}
+const props = withDefaults(defineProps<IFwbNavbarLinkProps>(), {
+  link: '/',
+  isActive: false,
+  component: 'a',
+  linkAttr: 'href',
+  disabled: false,
+})
+
+const emit = defineEmits<{click: [event: Event] }>()
+
+const currentPageClasses = 'bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white'
+const defaultStateClasses = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent'
+const defaultClasses = 'block py-2 pr-4 pl-3 rounded md:p-0'
+const componentName = computed(() => {
+  return props.component !== 'a' ? resolveComponent(props.component) : 'a'
+})
+const linkClasses = twMerge(
+  defaultClasses,
+  props.isActive ? currentPageClasses : defaultStateClasses,
+)
+const handleClick = (event: Event) => {
+  if (props.disabled) {
+    return
+  }
+  emit('click', event)
+}
+</script>
diff --git a/src/components/FwbNavbar/FwbNavbarLogo.vue b/src/components/FwbNavbar/FwbNavbarLogo.vue
new file mode 100644
index 00000000..48f14090
--- /dev/null
+++ b/src/components/FwbNavbar/FwbNavbarLogo.vue
@@ -0,0 +1,38 @@
+<template>
+  <component
+    :is="componentName"
+    class="flex items-center"
+    :[linkAttr]="link"
+  >
+    <img
+      :src="imageUrl"
+      :alt="alt"
+      class="mr-3 h-6 sm:h-10"
+    >
+    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
+      <slot />
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+
+interface IFwbNavbarLogoProps {
+  link?: string
+  imageUrl?: string
+  alt?: string
+  component?: string
+  linkAttr?: string
+}
+const props = withDefaults(defineProps<IFwbNavbarLogoProps>(), {
+  link: '/',
+  imageUrl: '/assets/logo.svg',
+  alt: 'Logo',
+  component: 'a',
+  linkAttr: 'href',
+})
+const componentName = computed(() => {
+  return props.component !== 'a' ? resolveComponent(props.component) : 'a'
+})
+</script>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/FwbPagination/FwbPagination.vue
similarity index 70%
rename from src/components/Pagination/Pagination.vue
rename to src/components/FwbPagination/FwbPagination.vue
index 076688a1..3034f8fe 100644
--- a/src/components/Pagination/Pagination.vue
+++ b/src/components/FwbPagination/FwbPagination.vue
@@ -1,6 +1,10 @@
 <template>
   <nav aria-label="Navigation">
-    <div class="text-gray-700 dark:text-gray-400 mb-2" :class="large ? 'text-base' : 'text-sm'" v-if="layout === 'table'">
+    <div
+      v-if="layout === 'table'"
+      class="text-gray-700 dark:text-gray-400 mb-2"
+      :class="large ? 'text-base' : 'text-sm'"
+    >
       Showing
       <span class="font-semibold text-gray-900 dark:text-white">{{ startItemsCount }}</span>
       to
@@ -8,15 +12,35 @@
       of
       <span class="font-semibold text-gray-900 dark:text-white">{{ computedTotalItems }}</span>
     </div>
-    <div class="inline-flex" :class="large && 'text-base h-10'">
+    <div
+      class="inline-flex"
+      :class="large && 'text-base h-10'"
+    >
       <slot name="start" />
 
-      <slot name="first-button" v-if="enableFirstAndLastButtons">
-        <button :disabled="isFirstPage" @click="goToFirstPage" :class="getNavigationButtonClasses(1)">First</button>
+      <slot
+        v-if="enableFirstAndLastButtons"
+        name="first-button"
+      >
+        <button
+          :disabled="isFirstPage"
+          :class="getNavigationButtonClasses(1)"
+          @click="goToFirstPage"
+        >
+          First
+        </button>
       </slot>
 
-      <slot name="prev-button" :disabled="isDecreaseDisabled" :decrease-page="decreasePage">
-        <button :disabled="isDecreaseDisabled" @click="decreasePage" :class="getNavigationButtonClasses(modelValue - 1)">
+      <slot
+        name="prev-button"
+        :disabled="isDecreaseDisabled"
+        :decrease-page="decreasePage"
+      >
+        <button
+          :disabled="isDecreaseDisabled"
+          :class="getNavigationButtonClasses(modelValue - 1)"
+          @click="decreasePage"
+        >
           <slot name="prev-icon">
             <svg
               v-if="showIcons || $slots['prev-icon']"
@@ -30,19 +54,44 @@
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+              <path
+                fill-rule="evenodd"
+                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
             </svg>
           </slot>
-          <template v-if="showLabels">{{ previousLabel }}</template>
+          <template v-if="showLabels">
+            {{ previousLabel }}
+          </template>
         </button>
       </slot>
-      <slot v-for="index in pagesToDisplay" :key="index" name="page-button" :page="index" :set-page="setPage" :disabled="isSetPageDisabled(index)">
-        <button :disabled="isSetPageDisabled(index)" @click="setPage(index)" :class="getPageButtonClasses(index === modelValue)">
+      <slot
+        v-for="index in pagesToDisplay"
+        :key="index"
+        name="page-button"
+        :page="index"
+        :set-page="setPage"
+        :disabled="isSetPageDisabled(index)"
+      >
+        <button
+          :disabled="isSetPageDisabled(index)"
+          :class="getPageButtonClasses(index === modelValue)"
+          @click="setPage(index)"
+        >
           {{ index }}
         </button>
       </slot>
-      <slot name="next-button" :disabled="isIncreaseDisabled" :increase-page="increasePage">
-        <button :disabled="isIncreaseDisabled" @click="increasePage" :class="getNavigationButtonClasses(modelValue + 1)">
+      <slot
+        name="next-button"
+        :disabled="isIncreaseDisabled"
+        :increase-page="increasePage"
+      >
+        <button
+          :disabled="isIncreaseDisabled"
+          :class="getNavigationButtonClasses(modelValue + 1)"
+          @click="increasePage"
+        >
           <template v-if="showLabels">
             {{ nextLabel }}
           </template>
@@ -59,23 +108,37 @@
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+              <path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd"
+              />
             </svg>
           </slot>
         </button>
       </slot>
 
-      <slot name="last-button" v-if="enableFirstAndLastButtons">
-        <button :disabled="isLastPage" @click="goToLastPage" :class="getNavigationButtonClasses(computedTotalPages)">Last</button>
+      <slot
+        v-if="enableFirstAndLastButtons"
+        name="last-button"
+      >
+        <button
+          :disabled="isLastPage"
+          :class="getNavigationButtonClasses(computedTotalPages)"
+          @click="goToLastPage"
+        >
+          Last
+        </button>
       </slot>
 
       <slot name="end" />
     </div>
   </nav>
 </template>
+
 <script lang="ts" setup>
 import { computed } from 'vue'
-import type { PaginationLayout } from '@/components/Pagination/types'
+import type { PaginationLayout } from './types'
 import { twMerge } from 'tailwind-merge'
 
 const emit = defineEmits<{
@@ -124,23 +187,23 @@ defineSlots<{
   end: any
   /* eslint-enable @typescript-eslint/no-explicit-any */
 }>()
-function setPage(index: number) {
+function setPage (index: number) {
   emit('update:model-value', index)
   emit('page-changed', index)
 }
-function decreasePage() {
+function decreasePage () {
   emit('update:model-value', props.modelValue - 1)
   emit('page-changed', props.modelValue - 1)
 }
-function increasePage() {
+function increasePage () {
   emit('update:model-value', props.modelValue + 1)
   emit('page-changed', props.modelValue + 1)
 }
-function goToFirstPage() {
+function goToFirstPage () {
   emit('update:model-value', 1)
   emit('page-changed', 1)
 }
-function goToLastPage() {
+function goToLastPage () {
   const lastPage = computedTotalPages.value
   emit('update:model-value', lastPage)
   emit('page-changed', lastPage)
@@ -160,14 +223,14 @@ const pagesToDisplay = computed(() => {
   if (props.layout === 'table') return []
 
   if (computedTotalPages.value <= props.sliceLength * 2 + 1) {
-    const pages = []
+    const pages: number[] = []
     for (let page = 1; page <= computedTotalPages.value; page++) {
       pages.push(page)
     }
     return pages
   }
   if (props.modelValue <= props.sliceLength) {
-    const pages = []
+    const pages: number[] = []
     const slicedLength = Math.abs(props.modelValue - props.sliceLength) + props.modelValue + props.sliceLength + 1
     for (let page = 1; page <= slicedLength; page++) {
       pages.push(page)
@@ -175,15 +238,15 @@ const pagesToDisplay = computed(() => {
     return pages
   }
   if (props.modelValue >= computedTotalPages.value - props.sliceLength) {
-    const pages = []
+    const pages: number[] = []
     for (let page = Math.abs(computedTotalPages.value - props.sliceLength * 2); page <= computedTotalPages.value; page++) {
       pages.push(page)
     }
     return pages
   }
 
-  const pages = []
-  let startedPage = props.modelValue - props.sliceLength > 0 ? props.modelValue - props.sliceLength : 1
+  const pages: number[] = []
+  const startedPage = props.modelValue - props.sliceLength > 0 ? props.modelValue - props.sliceLength : 1
   for (let page = startedPage; page < props.modelValue + props.sliceLength + 1; page++) {
     if (page >= computedTotalPages.value) break
     pages.push(page)
@@ -206,14 +269,14 @@ const computedTotalItems = computed(() => {
 const isFirstPage = computed(() => props.modelValue === 1)
 const isLastPage = computed(() => props.modelValue === computedTotalPages.value)
 
-function getPageButtonClasses(active: boolean) {
+function getPageButtonClasses (active: boolean) {
   const baseClasses =
     'flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
   const activeClasses = 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white'
   const largeClasses = 'px-4 h-10'
   return twMerge(baseClasses, active && activeClasses, props.large && largeClasses)
 }
-function getNavigationButtonClasses(toPage: number) {
+function getNavigationButtonClasses (toPage: number) {
   const baseClasses =
     'flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
   const disabledClasses = 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed'
diff --git a/src/components/Pagination/types.ts b/src/components/FwbPagination/types.ts
similarity index 100%
rename from src/components/Pagination/types.ts
rename to src/components/FwbPagination/types.ts
diff --git a/src/components/FwbProgress/FwbProgress.vue b/src/components/FwbProgress/FwbProgress.vue
new file mode 100644
index 00000000..efbc7eae
--- /dev/null
+++ b/src/components/FwbProgress/FwbProgress.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <template v-if="label || (labelProgress && labelPosition === 'outside')">
+      <div class="flex justify-between mb-1">
+        <span
+          :class="outsideLabelClasses"
+          class="text-base font-medium"
+        >{{ label }}</span>
+        <span
+          v-if="labelProgress && labelPosition === 'outside'"
+          :class="outsideLabelClasses"
+          class="text-sm font-medium"
+        >{{ progress }}%</span>
+      </div>
+    </template>
+    <div
+      :class="outerClasses"
+      class="w-full bg-gray-200 rounded-full dark:bg-gray-700"
+    >
+      <div
+        :class="innerClasses"
+        :style="{ width: progress + '%' }"
+        class="rounded-full font-medium text-blue-100 text-center p-0.5"
+      >
+        <template v-if="labelProgress && labelPosition === 'inside'">
+          {{ progress }}%
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs } from 'vue'
+import { useProgressClasses } from './composables/useProgressClasses'
+import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
+
+interface IProgressProps {
+  color?: ProgressVariant
+  label?: string
+  labelPosition?: ProgressLabelPosition
+  labelProgress?: boolean
+  progress?: number
+  size?: ProgressSize
+}
+
+const props = withDefaults(defineProps<IProgressProps>(), {
+  color: 'default',
+  label: '',
+  labelPosition: 'none',
+  labelProgress: false,
+  progress: 0,
+  size: 'md',
+})
+
+const {
+  innerClasses,
+  outerClasses,
+  outsideLabelClasses,
+} = useProgressClasses(toRefs(props))
+</script>
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/FwbProgress/composables/useProgressClasses.ts
similarity index 58%
rename from src/components/Progress/composables/useProgressClasses.ts
rename to src/components/FwbProgress/composables/useProgressClasses.ts
index d972378f..b7403d95 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/FwbProgress/composables/useProgressClasses.ts
@@ -1,7 +1,6 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { computed, type Ref } from 'vue'
 import classNames from 'classnames'
-import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
+import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from '../types'
 
 const barColorClasses: Record<ProgressVariant, string> = {
   default: 'bg-blue-600 dark:bg-blue-600',
@@ -15,14 +14,14 @@ const barColorClasses: Record<ProgressVariant, string> = {
 }
 
 const outsideTextColorClasses: Record<ProgressVariant, string> = {
-    default: '',
-    blue: 'text-blue-700 dark:text-blue-500',
-    dark: 'dark:text-white',
-    green: 'text-green-700 dark:text-green-500',
-    red: 'text-red-700 dark:text-red-500',
-    yellow: 'text-yellow-700 dark:text-yellow-500',
-    indigo: 'text-indigo-700 dark:text-indigo-500',
-    purple: 'text-purple-700 dark:text-purple-500',
+  default: '',
+  blue: 'text-blue-700 dark:text-blue-500',
+  dark: 'dark:text-white',
+  green: 'text-green-700 dark:text-green-500',
+  red: 'text-red-700 dark:text-red-500',
+  yellow: 'text-yellow-700 dark:text-yellow-500',
+  indigo: 'text-indigo-700 dark:text-indigo-500',
+  purple: 'text-purple-700 dark:text-purple-500',
 }
 
 const progressSizeClasses: Record<ProgressSize, string> = {
@@ -38,21 +37,21 @@ export type UseProgressClassesProps = {
   labelPosition: Ref<ProgressLabelPosition>
 }
 
-export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
+export function useProgressClasses (props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
   const bindClasses = computed(() => {
     return classNames(
-        barColorClasses[props.color.value],
-        progressSizeClasses[props.size.value],
+      barColorClasses[props.color.value],
+      progressSizeClasses[props.size.value],
     )
   })
   const outerClasses = computed(() => {
     return classNames(
-        progressSizeClasses[props.size.value],
+      progressSizeClasses[props.size.value],
     )
   })
   const outsideLabelClasses = computed(() => {
     return classNames(
-        outsideTextColorClasses[props.color.value],
+      outsideTextColorClasses[props.color.value],
     )
   })
 
diff --git a/src/components/Progress/types.ts b/src/components/FwbProgress/types.ts
similarity index 100%
rename from src/components/Progress/types.ts
rename to src/components/FwbProgress/types.ts
index ec44e3d3..eddab6a4 100644
--- a/src/components/Progress/types.ts
+++ b/src/components/FwbProgress/types.ts
@@ -1,3 +1,3 @@
-export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
-export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
 export type ProgressLabelPosition = 'inside' | 'outside' | 'none'
+export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
diff --git a/src/components/FwbRadio/FwbRadio.vue b/src/components/FwbRadio/FwbRadio.vue
new file mode 100644
index 00000000..4d3c4fe8
--- /dev/null
+++ b/src/components/FwbRadio/FwbRadio.vue
@@ -0,0 +1,54 @@
+<template>
+  <label class="flex w-[100%] items-center">
+    <input
+      v-model="model"
+      type="radio"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      :class="radioClasses"
+    >
+    <span :class="labelClasses">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+interface RadioProps {
+  modelValue?: string;
+  name?: string;
+  value?: string;
+  label?: string;
+  disabled?: boolean;
+}
+const radioDefaultClasses = 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+const radioLabelClasses = 'm-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300'
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  modelValue: '',
+  name: '',
+  value: '',
+  label: '',
+  disabled: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get () {
+    return props.modelValue
+  },
+  set (val) {
+    emit('update:modelValue', val)
+  },
+})
+const radioClasses = computed(() => {
+  return radioDefaultClasses
+})
+
+const labelClasses = computed(() => {
+  return twMerge(radioLabelClasses, props.disabled && 'text-gray-400 dark:text-gray-500')
+})
+</script>
diff --git a/src/components/FwbRadio/composables/useRadioClasses.ts b/src/components/FwbRadio/composables/useRadioClasses.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/FwbRange/FwbRange.vue b/src/components/FwbRange/FwbRange.vue
new file mode 100644
index 00000000..c5c0ca30
--- /dev/null
+++ b/src/components/FwbRange/FwbRange.vue
@@ -0,0 +1,66 @@
+<template>
+  <label class="flex flex-col">
+    <span
+      :class="labelClasses"
+    >{{ label }}</span>
+    <input
+      v-model="model"
+      :step="steps"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      type="range"
+      :class="rangeClasses"
+    >
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { useRangeClasses } from './composables/useRangeClasses'
+import type { InputSize } from '@/components/FwbInput/types'
+
+interface RangeProps {
+  disabled?: boolean
+  label?: string
+  max?: number
+  min?: number
+  modelValue?: number
+  size?: InputSize
+  steps?: number
+}
+
+const props = withDefaults(defineProps<RangeProps>(), {
+  disabled: false,
+  label: 'Range slider',
+  max: 100,
+  min: 0,
+  modelValue: 50,
+  size: 'md',
+  steps: 1,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = computed({
+  get () {
+    return props.modelValue
+  },
+  set (val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
+</script>
+
+<style scoped>
+input[type="range"].range-lg::-moz-range-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+input[type="range"].range-sm::-moz-range-thumb {
+  height: 1rem;
+  width: 1rem;
+}
+</style>
diff --git a/src/components/Range/composables/useRangeClasses.ts b/src/components/FwbRange/composables/useRangeClasses.ts
similarity index 57%
rename from src/components/Range/composables/useRangeClasses.ts
rename to src/components/FwbRange/composables/useRangeClasses.ts
index c797e948..0374fa09 100644
--- a/src/components/Range/composables/useRangeClasses.ts
+++ b/src/components/FwbRange/composables/useRangeClasses.ts
@@ -1,9 +1,7 @@
+import { computed, type Ref } from 'vue'
 import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
-import { computed } from 'vue'
-import type { Ref } from 'vue'
-import type { InputSize } from '@/components/Input/types'
+import type { InputSize } from '@/components/FwbInput/types'
 
-// Range
 const rangeDefaultClasses = 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700'
 const rangeLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
 
@@ -18,17 +16,16 @@ export type UseRangeClassesProps = {
   disabled: Ref<boolean>
 }
 
-export function useRangeClasses(props: UseRangeClassesProps) {
-  const rangeClasses = computed(() => {
-    return simplifyTailwindClasses(rangeDefaultClasses, rangeSizeClasses[props.size.value])
-  })
+export function useRangeClasses (props: UseRangeClassesProps) {
+  const rangeClasses = computed(() => simplifyTailwindClasses(
+    rangeDefaultClasses,
+    rangeSizeClasses[props.size.value],
+  ))
 
-  const labelClasses = computed(() => {
-    return rangeLabelClasses
-  })
+  const labelClasses = computed(() => rangeLabelClasses)
 
   return {
     rangeClasses,
     labelClasses,
   }
-} 
\ No newline at end of file
+}
diff --git a/src/components/Rating/Rating.vue b/src/components/FwbRating/FwbRating.vue
similarity index 66%
rename from src/components/Rating/Rating.vue
rename to src/components/FwbRating/FwbRating.vue
index c6ece2f9..ac0038e7 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/FwbRating/FwbRating.vue
@@ -2,33 +2,33 @@
   <div class="flex items-center">
     <!-- valid stars -->
     <svg
-      v-for="valid_star_index in valid_star_number"
-      :key="valid_star_index"
-      class="text-yellow-400"
+      v-for="validStarIndex in validStarNumber"
+      :key="validStarIndex"
       :class="sizeClasses"
+      class="text-yellow-400"
       fill="currentColor"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
     </svg>
     <!-- invalid stars -->
     <svg
-      v-for="invalid_star_index in invalid_star_number"
-      :key="invalid_star_index"
-      class="text-gray-300 dark:text-gray-500"
+      v-for="invalidStarIndex in invalidStarNumber"
+      :key="invalidStarIndex"
       :class="sizeClasses"
+      class="text-gray-300 dark:text-gray-500"
       fill="currentColor"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
     </svg>
     <!-- text -->
-    <slot name="besideText"></slot>
+    <slot name="besideText" />
     <!-- review link -->
     <template v-if="(reviewText && reviewLink)">
-      <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"></span>
+      <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400" />
       <a
         :href="reviewLink"
         class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
@@ -41,41 +41,27 @@
 
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
 import { useRatingClasses } from './composables/useRatingClasses'
 import type { RatingSize } from './types'
 
-const props = defineProps({
-  size: {
-    type: String as PropType<RatingSize>,
-    default: 'sm',
-  },
-  rating: {
-    type: Number,
-    default: 3,
-  },
-  scale: {
-    type: Number,
-    default: 5,
-  },
-  reviewText: {
-    type: String,
-    default: '',
-  },
-  reviewLink: {
-    type: String,
-    default: '',
-  },
-})
+interface IRatingProps {
+  rating?: number
+  reviewLink?: string
+  reviewText?: string
+  scale?: number
+  size?: RatingSize
+}
 
-const valid_star_number = computed(() => {
-  return Math.floor(props.rating)
+const props = withDefaults(defineProps<IRatingProps>(), {
+  rating: 3,
+  reviewLink: '',
+  reviewText: '',
+  scale: 5,
+  size: 'md',
 })
 
-const invalid_star_number = computed(() => {
-  return props.scale - valid_star_number.value
-})
+const validStarNumber = computed(() => Math.floor(props.rating))
+const invalidStarNumber = computed(() => props.scale - validStarNumber.value)
 
 const { sizeClasses } = useRatingClasses(toRefs(props))
-
 </script>
diff --git a/src/components/Rating/composables/useRatingClasses.ts b/src/components/FwbRating/composables/useRatingClasses.ts
similarity index 50%
rename from src/components/Rating/composables/useRatingClasses.ts
rename to src/components/FwbRating/composables/useRatingClasses.ts
index c25c8f45..8154ba3f 100644
--- a/src/components/Rating/composables/useRatingClasses.ts
+++ b/src/components/FwbRating/composables/useRatingClasses.ts
@@ -1,5 +1,4 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { computed, type Ref } from 'vue'
 import classNames from 'classnames'
 import type { RatingSize } from '../types'
 
@@ -13,16 +12,12 @@ export type UseRatingClassesProps = {
   size: Ref<RatingSize>
 }
 
-export function useRatingClasses(props: UseRatingClassesProps):{
+export function useRatingClasses (props: UseRatingClassesProps):{
   sizeClasses: Ref<string>
-}{
-  const sizeClasses = computed(() => {
-    return classNames(
-        ratingSizeClasses[props.size.value] ?? '',
-    )
-  })
+} {
+  const sizeClasses = computed(() => classNames(
+    ratingSizeClasses[props.size.value] ?? '',
+  ))
 
-  return {
-    sizeClasses,
-  }
+  return { sizeClasses }
 }
diff --git a/src/components/FwbRating/types.ts b/src/components/FwbRating/types.ts
new file mode 100644
index 00000000..db54de55
--- /dev/null
+++ b/src/components/FwbRating/types.ts
@@ -0,0 +1 @@
+export type RatingSize = 'sm' | 'md' | 'lg'
diff --git a/src/components/FwbSelect/FwbSelect.vue b/src/components/FwbSelect/FwbSelect.vue
new file mode 100644
index 00000000..a78e5f19
--- /dev/null
+++ b/src/components/FwbSelect/FwbSelect.vue
@@ -0,0 +1,86 @@
+<template>
+  <label>
+    <span
+      v-if="label"
+      :class="labelClasses"
+    >
+      {{ label }}
+    </span>
+    <select
+      v-model="model"
+      :disabled="disabled"
+      :class="selectClasses"
+    >
+      <option
+        disabled
+        selected
+        value=""
+      >
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="(option, index) in options"
+        :key="index"
+        :value="option.value"
+      >
+        {{ option.name }}
+      </option>
+    </select>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import type { InputSize } from './../FwbInput/types'
+import type { OptionsType } from './types'
+import { computed } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { twMerge } from 'tailwind-merge'
+
+interface InputProps {
+  modelValue?: string;
+  label?: string;
+  options?: OptionsType[];
+  placeholder?: string;
+  disabled?: boolean;
+  underline?: boolean;
+  size?: InputSize;
+}
+const props = withDefaults(defineProps<InputProps>(), {
+  modelValue: '',
+  label: '',
+  options: () => [],
+  placeholder: 'Please select one',
+  disabled: false,
+  underline: false,
+  size: 'md',
+})
+const emit = defineEmits(['update:modelValue'])
+
+const model = useVModel(props, 'modelValue', emit)
+
+// LABEL
+const defaultLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+
+// SELECT
+const defaultSelectClasses = 'w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
+const disabledSelectClasses = 'cursor-not-allowed bg-gray-100'
+const underlineSelectClasses = 'bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'
+const selectSizeClasses: Record<InputSize, string> = {
+  lg: 'p-4',
+  md: 'p-2.5 text-sm',
+  sm: 'p-2 text-sm',
+}
+
+const selectClasses = computed(() => {
+  return twMerge(
+    defaultSelectClasses,
+    selectSizeClasses[props.size],
+    props.disabled && disabledSelectClasses,
+    props.underline ? underlineSelectClasses : 'border border-gray-300 rounded-lg',
+  )
+})
+
+const labelClasses = computed(() => {
+  return defaultLabelClasses
+})
+</script>
diff --git a/src/components/FwbSelect/composables/useSelectClasses.ts b/src/components/FwbSelect/composables/useSelectClasses.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Select/types.ts b/src/components/FwbSelect/types.ts
similarity index 100%
rename from src/components/Select/types.ts
rename to src/components/FwbSelect/types.ts
index b879850e..4d655c91 100644
--- a/src/components/Select/types.ts
+++ b/src/components/FwbSelect/types.ts
@@ -1,4 +1,4 @@
 export type OptionsType = {
-  value: string,
   name: string,
+  value: string,
 }
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/FwbSidebar/FwbSidebar.vue
similarity index 85%
rename from src/components/Sidebar/Sidebar.vue
rename to src/components/FwbSidebar/FwbSidebar.vue
index ed5d9f89..ccc57ff4 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/FwbSidebar/FwbSidebar.vue
@@ -1,5 +1,9 @@
 <template>
-  <aside v-bind="$attrs" :class="wrapperClasses" aria-label="Sidebar">
+  <aside
+    v-bind="$attrs"
+    :class="wrapperClasses"
+    aria-label="Sidebar"
+  >
     <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
       <div class="space-y-2 font-medium">
         <slot />
diff --git a/src/components/Sidebar/SidebarCta.vue b/src/components/FwbSidebar/FwbSidebarCta.vue
similarity index 60%
rename from src/components/Sidebar/SidebarCta.vue
rename to src/components/FwbSidebar/FwbSidebarCta.vue
index df267be1..ce526f11 100644
--- a/src/components/Sidebar/SidebarCta.vue
+++ b/src/components/FwbSidebar/FwbSidebarCta.vue
@@ -1,38 +1,51 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    label?: string
-  }>(),
-  {
-    label: undefined,
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-function close() {
-  emit('close')
-}
-</script>
-
 <template>
-  <div class="p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900" role="alert">
+  <div
+    class="p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900"
+    role="alert"
+  >
     <div class="flex items-center mb-3">
       <span class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">{{ label }}</span>
       <button
-        @click="close"
         type="button"
         class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
         aria-label="Close"
+        @click="close"
       >
         <span class="sr-only">Close</span>
-        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+        <svg
+          class="w-2.5 h-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 14"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+          />
         </svg>
       </button>
     </div>
     <slot name="default" />
   </div>
 </template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label?: string
+  }>(),
+  {
+    label: undefined,
+  },
+)
+
+const emit = defineEmits<{(e: 'close'): void }>()
+
+function close () {
+  emit('close')
+}
+</script>
diff --git a/src/components/Sidebar/SidebarDropdownItem.vue b/src/components/FwbSidebar/FwbSidebarDropdownItem.vue
similarity index 75%
rename from src/components/Sidebar/SidebarDropdownItem.vue
rename to src/components/FwbSidebar/FwbSidebarDropdownItem.vue
index d918dee0..9c8393e6 100644
--- a/src/components/Sidebar/SidebarDropdownItem.vue
+++ b/src/components/FwbSidebar/FwbSidebarDropdownItem.vue
@@ -1,11 +1,3 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-const isOpen = ref(false)
-function toggleDropdown() {
-  isOpen.value = !isOpen.value
-}
-</script>
-
 <template>
   <div class="overflow-hidden">
     <button
@@ -30,9 +22,25 @@ function toggleDropdown() {
       <span class="flex-1 ml-3 text-left whitespace-nowrap">
         <slot name="trigger" />
       </span>
-      <slot name="arrow-icon" :toggle-dropdown="toggleDropdown">
-        <svg class="w-3 h-3 transition-all duration-300" :class="isOpen && 'rotate-180'" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+      <slot
+        name="arrow-icon"
+        :toggle-dropdown="toggleDropdown"
+      >
+        <svg
+          class="w-3 h-3 transition-all duration-300"
+          :class="isOpen && 'rotate-180'"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 10 6"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 1 4 4 4-4"
+          />
         </svg>
       </slot>
     </button>
@@ -54,3 +62,11 @@ function toggleDropdown() {
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const isOpen = ref(false)
+function toggleDropdown () {
+  isOpen.value = !isOpen.value
+}
+</script>
diff --git a/src/components/Sidebar/SidebarItem.vue b/src/components/FwbSidebar/FwbSidebarItem.vue
similarity index 63%
rename from src/components/Sidebar/SidebarItem.vue
rename to src/components/FwbSidebar/FwbSidebarItem.vue
index 0ff20ea4..afbc1a51 100644
--- a/src/components/Sidebar/SidebarItem.vue
+++ b/src/components/FwbSidebar/FwbSidebarItem.vue
@@ -1,3 +1,20 @@
+<template>
+  <component
+    :is="component"
+    :[linkAttr]="link"
+    class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+  >
+    <slot name="icon" />
+    <span
+      class="flex-1 whitespace-nowrap"
+      :class="$slots.icon && 'ml-3'"
+    >
+      <slot name="default" />
+    </span>
+    <slot name="suffix" />
+  </component>
+</template>
+
 <script setup lang="ts">
 import { resolveComponent } from 'vue'
 const props = withDefaults(
@@ -14,13 +31,3 @@ const props = withDefaults(
 const component = props.tag === 'a' ? 'a' : resolveComponent(props.tag)
 const linkAttr = props.tag === 'a' ? 'href' : 'to'
 </script>
-
-<template>
-  <component :is="component" :[linkAttr]="link" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-    <slot name="icon" />
-    <span class="flex-1 whitespace-nowrap" :class="$slots.icon && 'ml-3'">
-      <slot name="default" />
-    </span>
-    <slot name="suffix" />
-  </component>
-</template>
diff --git a/src/components/Sidebar/SidebarItemGroup.vue b/src/components/FwbSidebar/FwbSidebarItemGroup.vue
similarity index 100%
rename from src/components/Sidebar/SidebarItemGroup.vue
rename to src/components/FwbSidebar/FwbSidebarItemGroup.vue
index 86dbb9ca..b3849485 100644
--- a/src/components/Sidebar/SidebarItemGroup.vue
+++ b/src/components/FwbSidebar/FwbSidebarItemGroup.vue
@@ -1,3 +1,9 @@
+<template>
+  <div :class="border && borderClasses">
+    <slot name="default" />
+  </div>
+</template>
+
 <script setup lang="ts">
 const borderClasses = 'pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700'
 withDefaults(
@@ -9,9 +15,3 @@ withDefaults(
   },
 )
 </script>
-
-<template>
-  <div :class="border && borderClasses">
-    <slot name="default" />
-  </div>
-</template>
diff --git a/src/components/Sidebar/SidebarLogo.vue b/src/components/FwbSidebar/FwbSidebarLogo.vue
similarity index 73%
rename from src/components/Sidebar/SidebarLogo.vue
rename to src/components/FwbSidebar/FwbSidebarLogo.vue
index fcd0c89b..047b1d08 100644
--- a/src/components/Sidebar/SidebarLogo.vue
+++ b/src/components/FwbSidebar/FwbSidebarLogo.vue
@@ -1,3 +1,18 @@
+<template>
+  <component
+    :is="component"
+    :[linkAttr]="link"
+    class="flex items-center mb-5 pl-2.5"
+  >
+    <img
+      :src="logo"
+      class="h-6 mr-3 sm:h-7"
+      :alt="alt ?? name"
+    >
+    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{{ name }}</span>
+  </component>
+</template>
+
 <script setup lang="ts">
 import { resolveComponent } from 'vue'
 
@@ -14,16 +29,10 @@ const props = withDefaults(
     link: '/',
     logo: '',
     tag: 'router-link',
+    alt: '',
   },
 )
 
 const component = props.tag === 'a' ? 'a' : resolveComponent(props.tag)
 const linkAttr = props.tag === 'a' ? 'href' : 'to'
 </script>
-
-<template>
-  <component :is="component" :[linkAttr]="link" class="flex items-center mb-5 pl-2.5">
-    <img :src="logo" class="h-6 mr-3 sm:h-7" :alt="alt ?? name" />
-    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{{ name }}</span>
-  </component>
-</template>
diff --git a/src/components/FwbSpinner/FwbSpinner.vue b/src/components/FwbSpinner/FwbSpinner.vue
new file mode 100644
index 00000000..7d0141b7
--- /dev/null
+++ b/src/components/FwbSpinner/FwbSpinner.vue
@@ -0,0 +1,36 @@
+<template>
+  <svg
+    :class="spinnerClasses"
+    fill="none"
+    role="status"
+    viewBox="0 0 100 101"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { toRefs } from 'vue'
+import { useSpinnerClasses } from './composables/useSpinnerClasses'
+import type { SpinnerColor, SpinnerSize } from './types'
+
+interface ISpinnerProps {
+  color?: SpinnerColor,
+  size?: SpinnerSize
+}
+
+const props = withDefaults(defineProps<ISpinnerProps>(), {
+  color: 'blue',
+  size: '4',
+})
+
+const { spinnerClasses } = useSpinnerClasses(toRefs(props))
+</script>
diff --git a/src/components/FwbSpinner/composables/useSpinnerClasses.ts b/src/components/FwbSpinner/composables/useSpinnerClasses.ts
new file mode 100644
index 00000000..a94008cf
--- /dev/null
+++ b/src/components/FwbSpinner/composables/useSpinnerClasses.ts
@@ -0,0 +1,53 @@
+import { computed, type Ref } from 'vue'
+import classNames from 'classnames'
+import type { SpinnerColor, SpinnerSize } from '../types'
+
+const sizes: Record<SpinnerSize, string> = {
+  0: 'w-0 h-0',
+  0.5: 'w-0.5 h-0.5',
+  1: 'w-1 h-1',
+  1.5: 'w-1.5 h-1.5',
+  10: 'w-10 h-10',
+  11: 'w-11 h-11',
+  12: 'w-12 h-12',
+  2: 'w-2 h-2',
+  2.5: 'w-2.5 h-2.5',
+  3: 'w-3 h-3',
+  4: 'w-4 h-4',
+  5: 'w-5 h-5',
+  6: 'w-6 h-6',
+  7: 'w-7 h-7',
+  8: 'w-8 h-8',
+  9: 'w-9 h-9',
+}
+
+const colors: Record<SpinnerColor, string> = {
+  blue: 'fill-blue-600',
+  gray: 'fill-gray-600 dark:fill-gray-300',
+  green: 'fill-green-500',
+  pink: 'fill-pink-600',
+  purple: 'fill-purple-600',
+  red: 'fill-red-600',
+  white: 'fill-white',
+  yellow: 'fill-yellow-400',
+}
+
+export type UseSpinnerClassesProps = {
+  color: Ref<SpinnerColor>
+  size: Ref<SpinnerSize>
+}
+
+export function useSpinnerClasses (props: UseSpinnerClassesProps): { spinnerClasses: Ref<string> } {
+  const sizeClasses = computed(() => sizes[props.size.value])
+  const colorClasses = computed(() => colors[props.color.value])
+  const bgColorClasses = computed(() => 'text-gray-200 dark:text-gray-600')
+  const animateClasses = computed(() => 'animate-spin')
+  const spinnerClasses = computed(() => classNames(
+    animateClasses.value,
+    bgColorClasses.value,
+    colorClasses.value,
+    sizeClasses.value,
+  ))
+
+  return { spinnerClasses }
+}
diff --git a/src/components/FwbSpinner/types.ts b/src/components/FwbSpinner/types.ts
new file mode 100644
index 00000000..1e8e8b7d
--- /dev/null
+++ b/src/components/FwbSpinner/types.ts
@@ -0,0 +1,3 @@
+export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
+
+export type SpinnerSize = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
diff --git a/src/components/Table/Table.vue b/src/components/FwbTable/FwbTable.vue
similarity index 96%
rename from src/components/Table/Table.vue
rename to src/components/FwbTable/FwbTable.vue
index cb190ecc..c8b86aad 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/FwbTable/FwbTable.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
     <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-      <slot></slot>
+      <slot />
     </table>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { provide } from 'vue'
 
@@ -23,7 +24,7 @@ const props = defineProps({
   },
 })
 
-provide('striped', props.striped)
 provide('hoverable', props.hoverable)
+provide('striped', props.striped)
 provide('stripedColumns', props.stripedColumns)
 </script>
diff --git a/src/components/FwbTable/FwbTableBody.vue b/src/components/FwbTable/FwbTableBody.vue
new file mode 100644
index 00000000..09d61910
--- /dev/null
+++ b/src/components/FwbTable/FwbTableBody.vue
@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>
diff --git a/src/components/Table/TableCell.vue b/src/components/FwbTable/FwbTableCell.vue
similarity index 58%
rename from src/components/Table/TableCell.vue
rename to src/components/FwbTable/FwbTableCell.vue
index 9bc5e9ac..935194b1 100644
--- a/src/components/Table/TableCell.vue
+++ b/src/components/FwbTable/FwbTableCell.vue
@@ -1,11 +1,11 @@
 <template>
   <td :class="tableCellClasses">
-    <slot></slot>
+    <slot />
   </td>
 </template>
-<script lang="ts" setup>
 
-import { useTableCellClasses } from '@/components/Table/composables/useTableCellClasses'
+<script lang="ts" setup>
+import { useTableCellClasses } from './composables/useTableCellClasses'
 
 const { tableCellClasses } = useTableCellClasses()
 </script>
diff --git a/src/components/Table/TableHead.vue b/src/components/FwbTable/FwbTableHead.vue
similarity index 73%
rename from src/components/Table/TableHead.vue
rename to src/components/FwbTable/FwbTableHead.vue
index 16aba622..0cd84b37 100644
--- a/src/components/Table/TableHead.vue
+++ b/src/components/FwbTable/FwbTableHead.vue
@@ -1,9 +1,7 @@
 <template>
   <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
     <tr>
-      <slot></slot>
+      <slot />
     </tr>
   </thead>
 </template>
-<script lang="ts" setup>
-</script>
diff --git a/src/components/FwbTable/FwbTableHeadCell.vue b/src/components/FwbTable/FwbTableHeadCell.vue
new file mode 100644
index 00000000..b0832532
--- /dev/null
+++ b/src/components/FwbTable/FwbTableHeadCell.vue
@@ -0,0 +1,14 @@
+<template>
+  <th
+    scope="col"
+    :class="tableHeadCellClasses"
+  >
+    <slot />
+  </th>
+</template>
+
+<script lang="ts" setup>
+import { useTableHeadCellClasses } from './composables/useTableHeadCellClasses'
+
+const { tableHeadCellClasses } = useTableHeadCellClasses()
+</script>
diff --git a/src/components/Table/TableRow.vue b/src/components/FwbTable/FwbTableRow.vue
similarity index 58%
rename from src/components/Table/TableRow.vue
rename to src/components/FwbTable/FwbTableRow.vue
index f129b2ac..a5bf1188 100644
--- a/src/components/Table/TableRow.vue
+++ b/src/components/FwbTable/FwbTableRow.vue
@@ -1,10 +1,11 @@
 <template>
   <tr :class="tableRowClasses">
-    <slot></slot>
+    <slot />
   </tr>
 </template>
+
 <script lang="ts" setup>
-import { useTableRowClasses } from '@/components/Table/composables/useTableRowClasses'
+import { useTableRowClasses } from './composables/useTableRowClasses'
 
 const { tableRowClasses } = useTableRowClasses()
 </script>
diff --git a/src/components/Table/composables/useTableCellClasses.ts b/src/components/FwbTable/composables/useTableCellClasses.ts
similarity index 50%
rename from src/components/Table/composables/useTableCellClasses.ts
rename to src/components/FwbTable/composables/useTableCellClasses.ts
index 86cd6c88..980892ed 100644
--- a/src/components/Table/composables/useTableCellClasses.ts
+++ b/src/components/FwbTable/composables/useTableCellClasses.ts
@@ -1,20 +1,16 @@
-import { computed, inject } from 'vue'
-import type { Ref } from 'vue'
+import { computed, inject, type Ref } from 'vue'
 import classNames from 'classnames'
 
 const baseClasses = 'px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right'
 const stripedCellClasses = 'even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
 
-export function useTableCellClasses(): { tableCellClasses: Ref<string> } {
+export function useTableCellClasses (): { tableCellClasses: Ref<string> } {
   const isColumnsStriped = inject('stripedColumns')
 
-  const tableCellClasses = computed(() => {
-    return classNames(baseClasses, {
-      [stripedCellClasses]: isColumnsStriped,
-    })
-  })
+  const tableCellClasses = computed(() => classNames(
+    baseClasses,
+    { [stripedCellClasses]: isColumnsStriped },
+  ))
 
-  return {
-    tableCellClasses,
-  }
+  return { tableCellClasses }
 }
diff --git a/src/components/FwbTable/composables/useTableHeadCellClasses.ts b/src/components/FwbTable/composables/useTableHeadCellClasses.ts
new file mode 100644
index 00000000..b311c80a
--- /dev/null
+++ b/src/components/FwbTable/composables/useTableHeadCellClasses.ts
@@ -0,0 +1,16 @@
+import { computed, inject, type Ref } from 'vue'
+import classNames from 'classnames'
+
+const baseClasses = 'px-6 py-3 text-xs uppercase'
+const stripedHeadCellClasses = 'even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
+
+export function useTableHeadCellClasses (): { tableHeadCellClasses: Ref<string> } {
+  const isColumnsStriped = inject('stripedColumns')
+
+  const tableHeadCellClasses = computed(() => classNames(
+    baseClasses,
+    { [stripedHeadCellClasses]: isColumnsStriped },
+  ))
+
+  return { tableHeadCellClasses }
+}
diff --git a/src/components/Table/composables/useTableRowClasses.ts b/src/components/FwbTable/composables/useTableRowClasses.ts
similarity index 63%
rename from src/components/Table/composables/useTableRowClasses.ts
rename to src/components/FwbTable/composables/useTableRowClasses.ts
index 75209e54..3fa59921 100644
--- a/src/components/Table/composables/useTableRowClasses.ts
+++ b/src/components/FwbTable/composables/useTableRowClasses.ts
@@ -1,23 +1,21 @@
-import { computed, inject } from 'vue'
-import type { Ref } from 'vue'
+import { computed, inject, type Ref } from 'vue'
 import classNames from 'classnames'
 
 const baseClasses = 'bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700'
 const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700'
 const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600'
 
-export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
+export function useTableRowClasses (): { tableRowClasses: Ref<string> } {
   const isStriped = inject('striped')
   const isHoverable = inject('hoverable')
 
-  const tableRowClasses = computed(() => {
-    return classNames(baseClasses, {
-      [stripedClasses]: isStriped,
+  const tableRowClasses = computed(() => classNames(
+    baseClasses,
+    {
       [hoverableClasses]: isHoverable,
-    })
-  })
+      [stripedClasses]: isStriped,
+    },
+  ))
 
-  return {
-    tableRowClasses,
-  }
+  return { tableRowClasses }
 }
diff --git a/src/components/Tabs/components/Tab/Tab.vue b/src/components/FwbTabs/FwbTab.vue
similarity index 52%
rename from src/components/Tabs/components/Tab/Tab.vue
rename to src/components/FwbTabs/FwbTab.vue
index b3739a03..a203de9e 100644
--- a/src/components/Tabs/components/Tab/Tab.vue
+++ b/src/components/FwbTabs/FwbTab.vue
@@ -1,20 +1,26 @@
 <template>
-  <div>
-    <template v-if="directive === 'if'">
-      <div v-if="activeTab === name">
-        <slot/>
-      </div>
-    </template>
-    <template v-else-if="directive === 'show'">
-      <div v-show="activeTab === name">
-        <slot/>
-      </div>
-    </template>
-  </div>
+  <template v-if="directive === 'if'">
+    <div v-if="activeTab === name">
+      <slot />
+    </div>
+  </template>
+  <template v-else-if="directive === 'show'">
+    <div v-show="activeTab === name">
+      <slot />
+    </div>
+  </template>
 </template>
+
 <script lang="ts" setup>
 import { inject } from 'vue'
-import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../injection/config'
+import {
+  TAB_ACTIVE_NAME_INJECTION_KEY,
+  TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY,
+} from './injection/config'
+
+defineOptions({
+  __FLOWBITE_TAB__: true, // add this to easily find tab components from tabs
+})
 
 defineProps({
   name: {
@@ -34,9 +40,3 @@ defineProps({
 const activeTab = inject(TAB_ACTIVE_NAME_INJECTION_KEY, '')
 const directive = inject(TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, 'if')
 </script>
-
-<script lang="ts">
-export default {
-  __FLOWBITE_TAB__: true, // add this to easily find tab components from tabs
-}
-</script>
\ No newline at end of file
diff --git a/src/components/Tabs/components/TabPane/TabPane.vue b/src/components/FwbTabs/FwbTabPane.vue
similarity index 68%
rename from src/components/Tabs/components/TabPane/TabPane.vue
rename to src/components/FwbTabs/FwbTabPane.vue
index 61abe8a6..1fbe2426 100644
--- a/src/components/Tabs/components/TabPane/TabPane.vue
+++ b/src/components/FwbTabs/FwbTabPane.vue
@@ -1,15 +1,22 @@
 <template>
   <li>
-    <div :class="tabClasses" @click="tryActivateTab">
+    <div
+      :class="tabClasses"
+      @click="tryActivateTab"
+    >
       {{ title }}
     </div>
   </li>
 </template>
+
 <script lang="ts" setup>
 import { inject, toRef } from 'vue'
-import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../injection/config'
-import type { TabsVariant } from '../../types'
+import type { TabsVariant } from './types'
 import { useTabClasses } from './composables/useTabClasses'
+import {
+  TAB_ACTIVATE_INJECTION_KEY,
+  TAB_STYLE_INJECTION_KEY,
+} from './injection/config'
 
 const props = defineProps({
   name: {
@@ -31,24 +38,24 @@ const props = defineProps({
 })
 
 const variant = inject<TabsVariant>(TAB_STYLE_INJECTION_KEY)
-if(!variant) {
+if (!variant) {
   console.warn('you can\'t use Tab outside of Tabs component. No tab style injection found')
 }
 
 const onActivate = inject<(value: string) => void>(TAB_ACTIVATE_INJECTION_KEY)
-if(!onActivate) {
+if (!onActivate) {
   console.warn('you can\'t use Tab outside of Tabs component. No tab activate injection found')
 }
 
 const tryActivateTab = () => {
-  if(props.disabled) return
-  if(!onActivate) return console.warn('no onActivate')
+  if (props.disabled) return
+  if (!onActivate) return console.warn('no onActivate')
   onActivate(props.name)
 }
 
 const { tabClasses } = useTabClasses({
-  active: toRef(props,'active'),
-  disabled: toRef(props,'disabled'),
+  active: toRef(props, 'active'),
+  disabled: toRef(props, 'disabled'),
   variant,
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Tabs/Tabs.vue b/src/components/FwbTabs/FwbTabs.vue
similarity index 51%
rename from src/components/Tabs/Tabs.vue
rename to src/components/FwbTabs/FwbTabs.vue
index c958e3a9..48e9a694 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/FwbTabs/FwbTabs.vue
@@ -1,50 +1,49 @@
 <template>
-  <div>
-    <div :class="divClasses">
-      <ul :class="ulClasses">
-        <tab-pane
-            v-for="(item, id) in tabsChildren"
-            :key="id"
-            :active="modelValueRef === item.props?.name"
-            :name="item.props?.name"
-            :disabled="item.props?.disabled"
-            :title="item.props?.title"
-            @click="emitClick"
-        />
-      </ul>
-    </div>
-    <div v-bind="$attrs">
-      <slot />
-    </div>
+  <div :class="divClasses">
+    <ul :class="ulClasses">
+      <fwb-tab-pane
+        v-for="(item, id) in tabsChildren"
+        :key="id"
+        :active="modelValueRef === item.props?.name"
+        :disabled="item.props?.disabled"
+        :name="item.props?.name"
+        :title="item.props?.title"
+        @click="emitClick"
+      />
+    </ul>
+  </div>
+  <div v-bind="$attrs">
+    <slot />
   </div>
 </template>
+
 <script lang="ts" setup>
+import { computed, provide, toRef, useSlots } from 'vue'
+import { flatten } from '../../utils/flatten'
+import { useTabsClasses } from './composables/useTabsClasses'
+import FwbTabPane from './FwbTabPane.vue'
+import type { TabsVariant } from './types'
 import {
   TAB_ACTIVATE_INJECTION_KEY,
   TAB_ACTIVE_NAME_INJECTION_KEY,
   TAB_STYLE_INJECTION_KEY,
   TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY,
 } from './injection/config'
-import { useTabsClasses } from './composables/useTabsClasses'
-import type { PropType } from 'vue'
-import { computed, provide, toRef, useSlots } from 'vue'
-import { flatten } from '@/utils/flatten'
-import TabPane from './components/TabPane/TabPane.vue'
-import type { TabsVariant } from './types'
 
-const props = defineProps({
-  variant: {
-    type: String as PropType<TabsVariant>,
-    default: 'default',
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  directive: {
-    type: String as PropType<'if' | 'show'>,
-    default: 'if',
-  },
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface ITabsProps {
+  variant?: TabsVariant
+  modelValue?: string
+  directive?: 'if' | 'show'
+}
+
+const props = withDefaults(defineProps<ITabsProps>(), {
+  variant: 'default',
+  modelValue: '',
+  directive: 'if',
 })
 
 const emit = defineEmits(['update:modelValue', 'click:pane'])
@@ -58,10 +57,10 @@ const defaultSlot = slots.default
 
 const tabsChildren = computed(() => {
   return defaultSlot
-      ? flatten(defaultSlot()).filter((v) => {
-        return (v.type as { __FLOWBITE_TAB__?: true }).__FLOWBITE_TAB__
-      })
-      : []
+    ? flatten(defaultSlot()).filter((v) => {
+      return (v.type as { __FLOWBITE_TAB__?: true }).__FLOWBITE_TAB__
+    })
+    : []
 })
 
 const modelValueRef = computed({
@@ -76,15 +75,9 @@ const onActivate = (value: string) => {
   modelValueRef.value = value
 }
 
-function emitClick(): void {
+const emitClick = (): void => {
   emit('click:pane')
 }
 
 provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)
 </script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
diff --git a/src/components/FwbTabs/composables/useTabClasses.ts b/src/components/FwbTabs/composables/useTabClasses.ts
new file mode 100644
index 00000000..8556ece4
--- /dev/null
+++ b/src/components/FwbTabs/composables/useTabClasses.ts
@@ -0,0 +1,75 @@
+import { computed, type Ref } from 'vue'
+import { simplifyTailwindClasses } from '../../../utils/simplifyTailwindClasses'
+import { useFlowbiteThemable } from '../../utils/FlowbiteThemable/composables/useFlowbiteThemable'
+import type { TabsVariant } from './../types'
+
+export type TabClassMap = {
+  active: string
+  default: string,
+  disabled: string,
+}
+
+export type UseTabClassesProps = {
+  active: Ref<boolean>
+  disabled: Ref<boolean>
+  variant?: TabsVariant
+}
+
+const defaultTabClasses: TabClassMap = {
+  default: 'cursor-pointer inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300',
+  active: 'cursor-pointer inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
+  disabled: 'inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500',
+}
+const underlineTabClasses: TabClassMap = {
+  default: 'cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
+  active: 'cursor-pointer inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500',
+  disabled: 'inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500',
+}
+const pillsTabClasses: TabClassMap = {
+  default: 'cursor-pointer inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white',
+  active: 'cursor-pointer inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active',
+  disabled: 'inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500',
+}
+
+export function useTabClasses (props: UseTabClassesProps): {
+  tabClasses: Ref<string>,
+} {
+  const theme = useFlowbiteThemable()
+
+  const tabClasses = computed(() => {
+    const isActiveTheme = theme.isActive.value
+
+    const tabClassType: keyof TabClassMap = props.active.value
+      ? 'active'
+      : props.disabled.value
+        ? 'disabled'
+        : 'default'
+
+    if (props.variant === 'default') {
+      return simplifyTailwindClasses(
+        defaultTabClasses[tabClassType],
+        (isActiveTheme && tabClassType) === 'active'
+          ? theme.textClasses.value
+          : '',
+      )
+    } else if (props.variant === 'underline') {
+      return simplifyTailwindClasses(
+        underlineTabClasses[tabClassType],
+        (isActiveTheme && tabClassType) === 'active'
+          ? [theme.borderClasses.value, theme.textClasses.value]
+          : '',
+      )
+    } else if (props.variant === 'pills') {
+      return simplifyTailwindClasses(
+        pillsTabClasses[tabClassType],
+        (isActiveTheme && tabClassType) === 'active'
+          ? [theme.backgroundClasses.value, 'text-white']
+          : '',
+      )
+    }
+
+    return ''
+  })
+
+  return { tabClasses }
+}
diff --git a/src/components/FwbTabs/composables/useTabsClasses.ts b/src/components/FwbTabs/composables/useTabsClasses.ts
new file mode 100644
index 00000000..a99831dd
--- /dev/null
+++ b/src/components/FwbTabs/composables/useTabsClasses.ts
@@ -0,0 +1,35 @@
+import { computed, type Ref } from 'vue'
+import type { TabsVariant } from '../types'
+import { twMerge } from 'tailwind-merge'
+
+export type UseTabsClassesProps = {
+  variant: TabsVariant
+}
+
+export function useTabsClasses (props: UseTabsClassesProps): {
+  divClasses: Ref<string>,
+  ulClasses: Ref<string>,
+} {
+  const ulClasses = computed(() => {
+    const baseClasses = 'flex flex-wrap font-medium text-center text-gray-500 dark:text-gray-400 text-sm'
+
+    return twMerge(
+      baseClasses,
+      props.variant === 'underline' && '-mb-px',
+      props.variant === 'default' && 'border-b border-gray-200 dark:border-gray-700',
+    )
+  })
+
+  const divClasses = computed(() => {
+    if (props.variant === 'underline') {
+      return 'border-b border-gray-200 dark:border-gray-700 font-medium text-center text-gray-500 dark:text-gray-400 text-sm'
+    }
+
+    return ''
+  })
+
+  return {
+    divClasses,
+    ulClasses,
+  }
+}
diff --git a/src/components/Tabs/injection/config.ts b/src/components/FwbTabs/injection/config.ts
similarity index 95%
rename from src/components/Tabs/injection/config.ts
rename to src/components/FwbTabs/injection/config.ts
index 19c37816..8d81f4f3 100644
--- a/src/components/Tabs/injection/config.ts
+++ b/src/components/FwbTabs/injection/config.ts
@@ -1,6 +1,6 @@
 // dependency injection config for tabs
 
-export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection'
+export const TAB_ACTIVATE_INJECTION_KEY = 'flowbite-tab-activate-func-injection'
 export const TAB_ACTIVE_NAME_INJECTION_KEY = 'flowbite-tab-active-name-injection'
+export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection'
 export const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection'
-export const TAB_ACTIVATE_INJECTION_KEY = 'flowbite-tab-activate-func-injection'
\ No newline at end of file
diff --git a/src/components/FwbTabs/types.ts b/src/components/FwbTabs/types.ts
new file mode 100644
index 00000000..76e9b6bb
--- /dev/null
+++ b/src/components/FwbTabs/types.ts
@@ -0,0 +1 @@
+export type TabsVariant = 'default' | 'underline' | 'pills'
diff --git a/src/components/Textarea/Textarea.vue b/src/components/FwbTextarea/FwbTextarea.vue
similarity index 63%
rename from src/components/Textarea/Textarea.vue
rename to src/components/FwbTextarea/FwbTextarea.vue
index 60bd2509..6a1539d6 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/FwbTextarea/FwbTextarea.vue
@@ -1,12 +1,20 @@
 <template>
   <label>
-    <div :class="labelClasses">{{ label }}</div>
-    <div :class="wrapperClasses">
-      <textarea v-model="model" :rows="rows" :class="textareaClasses" :placeholder="placeholder"></textarea>
-      <div v-if="$slots.footer" :class="footerClasses">
-        <slot name="footer"></slot>
-      </div>
-    </div>
+    <span :class="labelClasses">{{ label }}</span>
+    <span :class="wrapperClasses">
+      <textarea
+        v-model="model"
+        :rows="rows"
+        :class="textareaClasses"
+        :placeholder="placeholder"
+      />
+      <span
+        v-if="$slots.footer"
+        :class="footerClasses"
+      >
+        <slot name="footer" />
+      </span>
+    </span>
   </label>
 </template>
 
@@ -23,7 +31,7 @@ interface TextareaProps {
 }
 
 const props = withDefaults(defineProps<TextareaProps>(), {
-  value: '',
+  modelValue: '',
   label: 'Your message',
   rows: 4,
   custom: false,
@@ -32,17 +40,17 @@ const props = withDefaults(defineProps<TextareaProps>(), {
 
 const emit = defineEmits(['update:modelValue'])
 const model = computed({
-  get() {
+  get () {
     return props.modelValue
   },
-  set(val) {
+  set (val) {
     emit('update:modelValue', val)
   },
 })
 
 const {
   textareaClasses,
-  labelClasses, 
+  labelClasses,
   wrapperClasses,
   footerClasses,
 } = useTextareaClasses(props.custom)
diff --git a/src/components/FwbTextarea/composables/useTextareaClasses.ts b/src/components/FwbTextarea/composables/useTextareaClasses.ts
new file mode 100644
index 00000000..344913a7
--- /dev/null
+++ b/src/components/FwbTextarea/composables/useTextareaClasses.ts
@@ -0,0 +1,25 @@
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import { computed } from 'vue'
+
+const textareaWrapperClasses = 'block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
+const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+const textareaLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+const textareaFooterClasses = 'block py-2 px-3 border-gray-200 dark:border-gray-600'
+
+export function useTextareaClasses (custom: boolean) {
+  const textareaClasses = computed(() => simplifyTailwindClasses(
+    textareaDefaultClasses,
+    custom ? 'bg-white dark:bg-gray-800 border-none' : 'border',
+  ))
+
+  const labelClasses = computed(() => textareaLabelClasses)
+  const wrapperClasses = computed(() => (custom) ? textareaWrapperClasses : '')
+  const footerClasses = computed(() => textareaFooterClasses)
+
+  return {
+    textareaClasses,
+    labelClasses,
+    wrapperClasses,
+    footerClasses,
+  }
+}
diff --git a/src/components/Timeline/Timeline.vue b/src/components/FwbTimeline/FwbTimeline.vue
similarity index 64%
rename from src/components/Timeline/Timeline.vue
rename to src/components/FwbTimeline/FwbTimeline.vue
index f6a803f3..c0eaa9eb 100644
--- a/src/components/Timeline/Timeline.vue
+++ b/src/components/FwbTimeline/FwbTimeline.vue
@@ -1,13 +1,15 @@
 <template>
-  <div>
-    <ol :class="timelineClasses" v-bind="$attrs">
-      <slot></slot>
-    </ol>
-  </div>
+  <ol
+    :class="timelineClasses"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ol>
 </template>
+
 <script lang="ts" setup>
-import classNames from 'classnames'
 import { computed, provide } from 'vue'
+import classNames from 'classnames'
 
 const props = defineProps({
   horizontal: {
@@ -22,5 +24,10 @@ const defaultClasses = 'relative border-gray-200 dark:border-gray-700'
 const verticalClasses = 'border-l'
 const horizontalClasses = 'flex'
 
-const timelineClasses = computed(() => classNames(defaultClasses, props.horizontal ? horizontalClasses : verticalClasses))
+const timelineClasses = computed(() => classNames(
+  defaultClasses,
+  props.horizontal
+    ? horizontalClasses
+    : verticalClasses,
+))
 </script>
diff --git a/src/components/FwbTimeline/FwbTimelineBody.vue b/src/components/FwbTimeline/FwbTimelineBody.vue
new file mode 100644
index 00000000..3b2f0c01
--- /dev/null
+++ b/src/components/FwbTimeline/FwbTimelineBody.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="font-normal mb-4 text-base text-gray-500 dark:text-gray-400">
+    <slot />
+  </p>
+</template>
diff --git a/src/components/Timeline/TimelineContent.vue b/src/components/FwbTimeline/FwbTimelineContent.vue
similarity index 84%
rename from src/components/Timeline/TimelineContent.vue
rename to src/components/FwbTimeline/FwbTimelineContent.vue
index 7c271168..b47067d1 100644
--- a/src/components/Timeline/TimelineContent.vue
+++ b/src/components/FwbTimeline/FwbTimelineContent.vue
@@ -1,5 +1,7 @@
 <template>
-  <div :class="classes"><slot></slot></div>
+  <div :class="classes">
+    <slot />
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/Timeline/TimelineItem.vue b/src/components/FwbTimeline/FwbTimelineItem.vue
similarity index 96%
rename from src/components/Timeline/TimelineItem.vue
rename to src/components/FwbTimeline/FwbTimelineItem.vue
index 1d976666..a14d0d22 100644
--- a/src/components/Timeline/TimelineItem.vue
+++ b/src/components/FwbTimeline/FwbTimelineItem.vue
@@ -1,6 +1,6 @@
 <template>
   <li :class="timelineItemClasses">
-    <slot></slot>
+    <slot />
   </li>
 </template>
 
diff --git a/src/components/Timeline/TimelinePoint.vue b/src/components/FwbTimeline/FwbTimelinePoint.vue
similarity index 71%
rename from src/components/Timeline/TimelinePoint.vue
rename to src/components/FwbTimeline/FwbTimelinePoint.vue
index 61e195f7..8815397a 100644
--- a/src/components/Timeline/TimelinePoint.vue
+++ b/src/components/FwbTimeline/FwbTimelinePoint.vue
@@ -1,11 +1,9 @@
 <template>
   <div :class="wrapperClasses">
-    <div
-        :class="pointClasses"
-    >
+    <div :class="pointClasses">
       <slot />
     </div>
-    <div :class="borderClasses"></div>
+    <div :class="borderClasses" />
   </div>
 </template>
 
@@ -14,21 +12,12 @@ import { computed, inject, useSlots } from 'vue'
 import classNames from 'classnames'
 
 const slots = useSlots()
-
-const hasSlot = computed(() => {
-  return !!slots.default
-})
-
+const hasSlot = computed(() => !!slots.default)
 const isHorizontal = inject('horizontal')
-
-const wrapperClasses = computed(() => {
-  return classNames(isHorizontal ? 'flex items-center' : '')
-})
-
+const wrapperClasses = computed(() => classNames(isHorizontal ? 'flex items-center' : ''))
 const defaultBorderClasses = 'h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex'
 const borderClasses = computed(() => classNames(defaultBorderClasses, { 'sm:hidden hidden': !isHorizontal }))
 
-
 const pointClasses = computed(() => {
   const defaultClasses = 'absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700'
 
@@ -43,13 +32,13 @@ const pointClasses = computed(() => {
   const isHorizontalWithIcon = isHorizontal && hasSlot.value
 
   return classNames(
-      defaultClasses,
-      {
-        [verticalWithNoIconClasses]: isVerticalWithNoIcon,
-        [verticalWithIconClasses]: isVerticalWithIcon,
-        [horizontalWithNoIconClasses]: isHorizontalWithNoIcon,
-        [horizontalWithIconClasses]: isHorizontalWithIcon,
-      },
+    defaultClasses,
+    {
+      [verticalWithNoIconClasses]: isVerticalWithNoIcon,
+      [verticalWithIconClasses]: isVerticalWithIcon,
+      [horizontalWithNoIconClasses]: isHorizontalWithNoIcon,
+      [horizontalWithIconClasses]: isHorizontalWithIcon,
+    },
   )
 })
 </script>
diff --git a/src/components/FwbTimeline/FwbTimelineTime.vue b/src/components/FwbTimeline/FwbTimelineTime.vue
new file mode 100644
index 00000000..3ad38a84
--- /dev/null
+++ b/src/components/FwbTimeline/FwbTimelineTime.vue
@@ -0,0 +1,5 @@
+<template>
+  <time class="font-normal leading-none mb-1 text-gray-400 dark:text-gray-500 text-sm">
+    <slot />
+  </time>
+</template>
diff --git a/src/components/FwbTimeline/FwbTimelineTitle.vue b/src/components/FwbTimeline/FwbTimelineTitle.vue
new file mode 100644
index 00000000..0f2476e4
--- /dev/null
+++ b/src/components/FwbTimeline/FwbTimelineTitle.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="font-semibold text-gray-900 dark:text-white text-lg">
+    <slot />
+  </h3>
+</template>
diff --git a/src/components/FwbToast/FwbToast.vue b/src/components/FwbToast/FwbToast.vue
new file mode 100644
index 00000000..98c4ba46
--- /dev/null
+++ b/src/components/FwbToast/FwbToast.vue
@@ -0,0 +1,127 @@
+<template>
+  <div
+    v-if="visible"
+    id="toast-default"
+    :class="wrapperClasses"
+    role="alert"
+  >
+    <flowbite-themable-child
+      v-if="type !== 'empty' || $slots.icon"
+      :apply="['background', 'text']"
+      :class="[ 'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg', typeClasses ]"
+    >
+      <slot
+        v-if="$slots.icon"
+        :class="{ 'ml-3': type !== 'empty' }"
+        name="icon"
+      />
+      <svg
+        v-else-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
+          clip-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"
+          fill-rule="evenodd"
+        />
+      </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
+          clip-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"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <svg
+        v-else-if="type === 'warning'"
+        aria-hidden="true"
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-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"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </flowbite-themable-child>
+    <div :class="[contentClasses, { 'ml-3': $slots.icon || type !== 'empty' }]">
+      <slot />
+    </div>
+    <button
+      v-if="closable"
+      aria-label="Close"
+      class="border-none 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"
+      type="button"
+      @click="onClose"
+    >
+      <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
+          clip-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"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, ref, toRefs } from 'vue'
+import type { ToastAlign, ToastType } from './types'
+import { useToastClasses } from './composables/useToastClasses'
+import FlowbiteThemableChild from '@/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue'
+
+const props = defineProps({
+  type: {
+    type: String as PropType<ToastType>,
+    default: 'empty',
+  },
+  alignment: {
+    type: String as PropType<ToastAlign>,
+    default: 'center',
+  },
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  divide: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const visible = ref(true)
+
+const emit = defineEmits(['close'])
+
+const {
+  typeClasses,
+  wrapperClasses,
+  contentClasses,
+} = useToastClasses(toRefs(props))
+
+const onClose = () => {
+  emit('close')
+  visible.value = false
+}
+</script>
diff --git a/src/components/FwbToast/FwbToastProvider.vue b/src/components/FwbToast/FwbToastProvider.vue
new file mode 100644
index 00000000..6481908f
--- /dev/null
+++ b/src/components/FwbToast/FwbToastProvider.vue
@@ -0,0 +1,169 @@
+<script lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+import { defineComponent, h, type PropType, provide, ref, TransitionGroup } from 'vue'
+import { FLOWBITE_TOAST_INJECTION_KEY } from './injection/config'
+import type {
+  ToastItem,
+  ToastItemWithId,
+  ToastTransition,
+  UseToastInjection,
+} from './types'
+import FwbToast from './FwbToast.vue'
+
+export default defineComponent({
+  components: {
+    FwbToast,
+  },
+  props: {
+    transition: {
+      type: String as PropType<ToastTransition>,
+      default: 'slide-left',
+    },
+  },
+  setup () {
+    const toasts = ref<ToastItemWithId[]>([])
+
+    const runRemoveTimeout = (id: string, ms: number) => {
+      useTimeoutFn(() => removeToast(id), ms)
+    }
+
+    const addToast = (toast: ToastItem) => {
+      const id = parseInt((new Date().getTime() * Math.random()).toString()).toString()
+      toasts.value.push({
+        id,
+        ...toast,
+      })
+      if (toast.time > 0) {
+        runRemoveTimeout(id, toast.time)
+      }
+
+      return id
+    }
+
+    const popToast = () => {
+      if (toasts.value.length === 0) {
+        return ''
+      }
+
+      const lastId = toasts.value[toasts.value.length - 1].id
+      toasts.value.pop()
+
+      return lastId
+    }
+
+    const removeToast = (id: string) => {
+      const index = toasts.value.findIndex((_) => _.id === id)
+      if (index >= 0) {
+        toasts.value.splice(index, 1)
+      }
+
+      return index >= 0
+    }
+
+    provide<UseToastInjection>(FLOWBITE_TOAST_INJECTION_KEY, {
+      add: addToast,
+      pop: popToast,
+      remove: removeToast,
+    })
+
+    return {
+      toasts,
+      removeToast,
+    }
+  },
+  render () {
+    const { $props, $slots, toasts, removeToast } = this
+
+    return h('div', {}, [
+      $slots.default ? $slots.default() : null, // rendering default slot
+      h(
+        TransitionGroup,
+        {
+          name: $props.transition,
+          tag: 'div',
+          class: 'xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50',
+        },
+        {
+          default: () =>
+            toasts.map(
+              (
+                _toast, // rendering every toast
+              ) =>
+                _toast.component
+                  ? h(
+                    _toast.component,
+                    {
+                      key: _toast.id,
+                      onClose: () => removeToast(_toast.id),
+                      ...(_toast.componentProps ? _toast.componentProps : {}),
+                    },
+                    () => _toast.text,
+                  )
+                  : h(
+                    FwbToast,
+                    {
+                      closable: true,
+                      type: _toast.type,
+                      key: _toast.id,
+                      onClose: () => removeToast(_toast.id),
+                    },
+                    () => _toast.text,
+                  ),
+            ),
+        },
+      ),
+    ])
+  },
+})
+</script>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.5s ease;
+}
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.5s ease;
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-top-enter-active,
+.slide-top-leave-active {
+  transition: all 0.5s ease;
+}
+.slide-top-enter-from,
+.slide-top-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-bottom-enter-active,
+.slide-bottom-leave-active {
+  transition: all 0.5s ease;
+}
+.slide-bottom-enter-from,
+.slide-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/FwbToast/composables/useToast.ts b/src/components/FwbToast/composables/useToast.ts
new file mode 100644
index 00000000..0394c84b
--- /dev/null
+++ b/src/components/FwbToast/composables/useToast.ts
@@ -0,0 +1,38 @@
+import { inject } from 'vue'
+import type { ToastItem, UseToastInjection } from '../types'
+import { FLOWBITE_TOAST_INJECTION_KEY } from '../injection/config'
+
+export function useToast (): UseToastInjection {
+  const injection = inject<UseToastInjection | null>(FLOWBITE_TOAST_INJECTION_KEY, null)
+  if (injection === null) console.warn('Cannot use useToast outside <toast-provider> component. Please wrap your component with <toast-provider>')
+
+  const add = (toast: ToastItem): string => {
+    if (!injection) {
+      return ''
+    }
+
+    return injection?.add(toast)
+  }
+
+  const remove = (id: string): boolean => {
+    if (!injection) {
+      return false
+    }
+
+    return injection?.remove(id)
+  }
+
+  const pop = (): string => {
+    if (!injection) {
+      return ''
+    }
+
+    return injection?.pop()
+  }
+
+  return {
+    add,
+    remove,
+    pop,
+  }
+}
diff --git a/src/components/FwbToast/composables/useToastClasses.ts b/src/components/FwbToast/composables/useToastClasses.ts
new file mode 100644
index 00000000..314a713a
--- /dev/null
+++ b/src/components/FwbToast/composables/useToastClasses.ts
@@ -0,0 +1,58 @@
+import { computed, type Ref } from 'vue'
+import type { ToastAlign, ToastType } from '../types'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+
+type UseToastClassesReturns = {
+  typeClasses: Ref<string>
+  wrapperClasses: Ref<string>
+  contentClasses: Ref<string>
+}
+
+type UseToastClassesProps = {
+  type: Ref<ToastType>
+  divide: Ref<boolean>
+  alignment: Ref<ToastAlign>
+}
+
+const typeClassesMap: Record<ToastType, 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',
+}
+
+const wrapperAlignmentClasses: Record<ToastAlign, string> = {
+  center: 'items-center',
+  end: 'items-end',
+  start: 'items-start',
+}
+const defaultWrapperClasses = 'flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
+
+const defaultContentClasses = 'text-sm font-normal'
+
+export function useToastClasses (props: UseToastClassesProps): UseToastClassesReturns {
+  const typeClasses = computed(() => typeClassesMap[props.type.value])
+
+  const wrapperClasses = computed(() => {
+    const alignmentClass = wrapperAlignmentClasses[props.alignment.value]
+    if (props.divide.value) {
+      return simplifyTailwindClasses(defaultWrapperClasses, 'dark:divide-gray-700 divide-x divide-gray-200', alignmentClass)
+    }
+
+    return simplifyTailwindClasses(defaultWrapperClasses, alignmentClass)
+  })
+
+  const contentClasses = computed(() => {
+    if (props.type.value !== 'empty' && props.divide.value) {
+      return simplifyTailwindClasses(defaultContentClasses, 'pl-3')
+    }
+
+    return defaultContentClasses
+  })
+
+  return {
+    typeClasses,
+    wrapperClasses,
+    contentClasses,
+  }
+}
diff --git a/src/components/Toast/components/ToastProvider/injection/config.ts b/src/components/FwbToast/injection/config.ts
similarity index 100%
rename from src/components/Toast/components/ToastProvider/injection/config.ts
rename to src/components/FwbToast/injection/config.ts
diff --git a/src/components/FwbToast/types.ts b/src/components/FwbToast/types.ts
new file mode 100644
index 00000000..872aa361
--- /dev/null
+++ b/src/components/FwbToast/types.ts
@@ -0,0 +1,24 @@
+import type { DefineComponent } from 'vue'
+
+export type ToastAlign = 'start' | 'center' | 'end'
+export type ToastType = 'success' | 'warning' | 'danger' | 'empty'
+
+export type ToastItem = {
+  time: number // ms
+  type: ToastType
+  text: string
+  component?: DefineComponent
+  componentProps?: Record<string, unknown>
+}
+
+export type ToastItemWithId = ToastItem & {
+  id: string
+}
+
+export type ToastTransition = 'slide-left' | 'slide-right' | 'fade' | 'slide-top' | 'slide-bottom'
+
+export type UseToastInjection = {
+  add: (toast: ToastItem) => string
+  remove: (id: string) => boolean // true if removed, false if not found
+  pop: () => string // empty '' string if no toast to pop
+}
diff --git a/src/components/Toggle/Toggle.vue b/src/components/FwbToggle/FwbToggle.vue
similarity index 58%
rename from src/components/Toggle/Toggle.vue
rename to src/components/FwbToggle/FwbToggle.vue
index b7272add..64e666d7 100644
--- a/src/components/Toggle/Toggle.vue
+++ b/src/components/FwbToggle/FwbToggle.vue
@@ -1,41 +1,52 @@
 <template>
   <label :class="labelClasses">
-    <input :disabled="disabled" v-model="model" type="checkbox" class="sr-only peer" />
-    <span :class="[toggleClasses, toggleSize, toggleColor]"></span>
+    <input
+      v-model="model"
+      :disabled="disabled"
+      class="sr-only peer"
+      type="checkbox"
+    >
+    <span :class="[toggleClasses, toggleSize, toggleColor]" />
     <span :class="toggleBallClasses">{{ label }}</span>
   </label>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, computed } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useToggleClasses } from './composables/useToggleClasses'
-import type { InputSize } from '@/components/Input/types'
+import type { InputSize } from '@/components/FwbInput/types'
 
 interface ToggleProps {
-  modelValue?: boolean;
+  color?: string;
+  disabled?: boolean;
   label?: string;
-  color?: '';
+  modelValue?: boolean;
   size?: InputSize;
-  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<ToggleProps>(), {
-  modelValue: false,
-  label: '',
   color: '',
-  size: 'md',
   disabled: false,
+  label: '',
+  modelValue: false,
+  size: 'md',
 })
 
 const emit = defineEmits(['update:modelValue'])
 const model = computed({
-  get() {
+  get () {
     return props.modelValue
   },
-  set(val) {
+  set (val) {
     emit('update:modelValue', val)
   },
 })
 
-const { labelClasses, toggleSize, toggleClasses, toggleColor, toggleBallClasses } = useToggleClasses(toRefs(props))
+const {
+  labelClasses,
+  toggleSize,
+  toggleClasses,
+  toggleColor,
+  toggleBallClasses,
+} = useToggleClasses(toRefs(props))
 </script>
diff --git a/src/components/Toggle/composables/useToggleClasses.ts b/src/components/FwbToggle/composables/useToggleClasses.ts
similarity index 73%
rename from src/components/Toggle/composables/useToggleClasses.ts
rename to src/components/FwbToggle/composables/useToggleClasses.ts
index 71013b26..4bf91b3f 100644
--- a/src/components/Toggle/composables/useToggleClasses.ts
+++ b/src/components/FwbToggle/composables/useToggleClasses.ts
@@ -1,6 +1,5 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type { InputSize } from '@/components/Input/types'
+import { computed, type Ref } from 'vue'
+import type { InputSize } from '@/components/FwbInput/types'
 
 // Toggle Background
 const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
@@ -25,28 +24,14 @@ export type UseToggleClassesProps = {
   color: Ref<string>
 }
 
-export function useToggleClasses(props: UseToggleClassesProps) {
-  const labelClasses = computed(() => {
-    return defaultLabelClasses
-  })
+export function useToggleClasses (props: UseToggleClassesProps) {
+  const labelClasses = computed(() => defaultLabelClasses)
+  const toggleClasses = computed(() => defaultToggleBackgroundClasses)
+  const toggleSize = computed(() => toggleSizeClasses[props.size.value])
+  const toggleColor = computed(() => toggleColorClasses[props.color.value])
+  const toggleBallClasses = computed(() => defaultToggleBallClasses)
 
-  const toggleClasses = computed(() => {
-    return defaultToggleBackgroundClasses
-  })
-
-  const toggleSize = computed(() => {
-    return toggleSizeClasses[props.size.value]
-  })
-
-  const toggleColor = computed(() => {
-    return toggleColorClasses[props.color.value]
-  })
-
-  const toggleBallClasses = computed(() => {
-    return defaultToggleBallClasses
-  })
-
-  return { 
+  return {
     labelClasses,
     toggleSize,
     toggleClasses,
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/FwbTooltip/FwbTooltip.vue
similarity index 90%
rename from src/components/Tooltip/Tooltip.vue
rename to src/components/FwbTooltip/FwbTooltip.vue
index 7f2fc0b2..533bfb7f 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/FwbTooltip/FwbTooltip.vue
@@ -1,19 +1,25 @@
 <template>
   <div class="flex items-start">
-    <Tooltip :placement="placement" :triggers="[trigger]" :theme="theme" auto-hide>
-      <slot name="trigger"></slot>
+    <tooltip
+      :placement="placement"
+      :triggers="[trigger]"
+      :theme="theme"
+      auto-hide
+    >
+      <slot name="trigger" />
       <template #popper>
-        <slot name="content"></slot>
+        <slot name="content" />
       </template>
-    </Tooltip>
+    </tooltip>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
+import { computed } from 'vue'
 import { Tooltip } from 'floating-vue'
+import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
 import 'floating-vue/dist/style.css'
-import { computed } from 'vue'
+
 interface TooltipProps {
   placement?: TooltipPlacement
   theme?: TooltipStyle
diff --git a/src/components/Tooltip/types.ts b/src/components/FwbTooltip/types.ts
similarity index 68%
rename from src/components/Tooltip/types.ts
rename to src/components/FwbTooltip/types.ts
index edbfc7b1..7a1f68cb 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/FwbTooltip/types.ts
@@ -1,3 +1,3 @@
 export type TooltipPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export type TooltipStyle     = 'dark' | 'light';
-export type TooltipTrigger   =  'hover' | 'click' ;
+export type TooltipStyle = 'dark' | 'light';
+export type TooltipTrigger = 'hover' | 'click';
diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
deleted file mode 100644
index 77e07ce3..00000000
--- a/src/components/Input/Input.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div>
-    <label v-if="label" :class="labelClasses">{{ label }}</label>
-    <div class="flex relative">
-      <div v-if="$slots.prefix" class="w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden">
-        <slot name="prefix" />
-      </div>
-      <input v-bind="$attrs" v-model="model" :disabled="disabled" :type="type" :required="required" :class="[inputClasses, $slots.prefix ? 'pl-10' : '']" />
-      <div v-if="$slots.suffix" class="absolute right-2.5 bottom-2.5">
-        <slot name="suffix" />
-      </div>
-    </div>
-    <p v-if="$slots.validationMessage" :class="validationWrapperClasses">
-      <slot name="validationMessage" />
-    </p>
-    <p v-if="$slots.helper" class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-      <slot name="helper" />
-    </p>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ValidationStatus, type InputSize } from '@/components/Input/types'
-import { useInputClasses } from '@/components/Input/composables/useInputClasses'
-import { computed, toRefs } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { twMerge } from 'tailwind-merge'
-
-interface InputProps {
-  label?: string
-  disabled?: boolean
-  type?:
-    | 'button'
-    | 'checkbox'
-    | 'color'
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'file'
-    | 'hidden'
-    | 'image'
-    | 'month'
-    | 'number'
-    | 'password'
-    | 'radio'
-    | 'range'
-    | 'reset'
-    | 'search'
-    | 'submit'
-    | 'tel'
-    | 'text'
-    | 'time'
-    | 'url'
-    | 'week'
-  size?: InputSize
-  required?: boolean
-  modelValue: string
-  validationStatus?: ValidationStatus
-}
-
-const props = withDefaults(defineProps<InputProps>(), {
-  label: '',
-  disabled: false,
-  type: 'text',
-  size: 'md',
-  required: false,
-  modelValue: '',
-  validationStatus: undefined,
-})
-
-const model = useVModel(props, 'modelValue')
-
-const { inputClasses, labelClasses } = useInputClasses(toRefs(props))
-
-const validationWrapperClasses = computed(() => {
-  return twMerge(
-    'mt-2 text-sm',
-    props.validationStatus === ValidationStatus.Success ? 'text-green-600 dark:text-green-500' : '',
-    props.validationStatus === ValidationStatus.Error ? 'text-red-600 dark:text-red-500' : '',
-  )
-})
-</script>
diff --git a/src/components/Input/types.ts b/src/components/Input/types.ts
deleted file mode 100644
index 740409cb..00000000
--- a/src/components/Input/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type InputSize = 'sm' | 'md' | 'lg'
-
-export enum ValidationStatus {
-  Success = 'success',
-  Error = 'error',
-}
diff --git a/src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts b/src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts
deleted file mode 100644
index 2ca0a759..00000000
--- a/src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { computed } from 'vue'
-import type { Ref } from 'vue'
-import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
-
-const defaultItemClasses = 'inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600'
-const hoverItemClasses = 'block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white'
-const disabledItemClasses = 'bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400'
-
-export type UseListGroupItemClassesProps = {
-    hover: Ref<boolean>,
-    disabled: Ref<boolean>,
-}
-
-export function useListGroupItemClasses(props: UseListGroupItemClassesProps): {
-    itemClasses: Ref<string>,
-} {
-
-    const itemClasses = computed<string>(() => {
-        return simplifyTailwindClasses(
-            defaultItemClasses,
-            props.disabled.value ? disabledItemClasses : '',
-            !props.disabled.value && props.hover.value ? hoverItemClasses : '',
-        )
-    })
-
-    return {
-        itemClasses,
-    }
-}
diff --git a/src/components/ListGroup/composables/useListGroupClasses.ts b/src/components/ListGroup/composables/useListGroupClasses.ts
deleted file mode 100644
index d27c365b..00000000
--- a/src/components/ListGroup/composables/useListGroupClasses.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { computed } from 'vue'
-import type { Ref } from 'vue'
-import classNames from 'classnames'
-
-const defaultContainerClasses = 'overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white'
-
-export function useListGroupClasses(): {
-    containerClasses: Ref<string>,
-} {
-
-    const containerClasses = computed<string>(() => {
-        return classNames(
-            defaultContainerClasses,
-        )
-    })
-
-    return {
-        containerClasses,
-    }
-}
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
deleted file mode 100644
index db8e777a..00000000
--- a/src/components/Modal/Modal.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div>
-    <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" />
-    <div
-        tabindex="0"
-        ref="modalRef"
-        class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
-        @keyup.esc="closeWithEsc"
-        @click.self="clickOutside"
-    >
-      <div
-          class="relative p-4 w-full h-full"
-          :class="`${modalSizeClasses[size]}`"
-      >
-        <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-          <!-- Modal header -->
-          <div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b border-gray-200 dark:border-gray-600' : ''">
-            <slot name="header" />
-            <button v-if="!persistent" @click="closeModal" aria-label="close" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
-              <slot name="close-icon">
-                <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>
-              </slot>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-6" :class="$slots.header ? '' : 'pt-0'">
-            <slot name="body" />
-          </div>
-          <!-- Modal footer -->
-          <div v-if="$slots.footer" class="p-6 rounded-b border-gray-200 border-t dark:border-gray-600">
-            <slot name="footer" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { ModalSize } from './types'
-import { onMounted, ref, type Ref } from 'vue'
-
-interface ModalProps {
-  size?: ModalSize,
-  escapable?: boolean,
-  persistent?: boolean
-}
-const props = withDefaults(defineProps<ModalProps>(), {
-  size: '2xl',
-  escapable: true,
-  persistent: false,
-})
-const emit = defineEmits(['close', 'click:outside'])
-const modalSizeClasses = {
-  xs: 'max-w-xs',
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  '2xl': 'max-w-2xl',
-  '3xl': 'max-w-3xl',
-  '4xl': 'max-w-4xl',
-  '5xl': 'max-w-5xl',
-  '6xl': 'max-w-6xl',
-  '7xl': 'max-w-7xl',
-}
-
-function closeModal() {
-  emit('close')
-}
-function clickOutside() {
-  if(!props.persistent) {
-    emit('click:outside')
-    closeModal()
-  }
-}
-
-function closeWithEsc() {
-  if(props.escapable && !props.persistent) closeModal()
-}
-const modalRef: Ref<HTMLElement | null> = ref(null)
-onMounted(() => {
-  if(modalRef.value) {
-    modalRef.value.focus()
-  }
-})
-</script>
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
deleted file mode 100644
index 70d47594..00000000
--- a/src/components/Navbar/Navbar.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <nav :class="navbarClasses">
-    <div class="container flex flex-wrap justify-between items-center mx-auto">
-      <slot name="logo"/>
-      <button @click="toggleMobileMenu()" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
-        <span class="sr-only">Open main menu</span>
-        <slot name="menu-icon">
-          <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
-        </slot>
-      </button>
-      <slot name="default" :isShowMenu="isShowMenu" />
-      <div v-if="slots['right-side']" class="flex md:order-2 hidden md:flex">
-        <slot name="right-side" />
-      </div>
-    </div>
-  </nav>
-</template>
-<script lang="ts" setup>
-import { useSlots, ref, computed } from 'vue'
-import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
-import classNames from 'classnames'
-
-const props = defineProps({
-  sticky: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-  solid: {
-    type: Boolean,
-    default: false,
-  },
-})
-const slots = useSlots()
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isMobile = breakpoints.smaller('md')
-const isShowMenuOnMobile = ref(false)
-const toggleMobileMenu = useToggle(isShowMenuOnMobile)
-const navbarBaseClasses = ' border-gray-200'
-const navbarFloatClasses = 'fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600'
-const navbarRoundedClasses = 'rounded'
-const navbarSolidClasses = 'p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
-const navbarWhiteClasses = 'bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900'
-
-const navbarClasses = computed(() => {
-  return classNames(
-      navbarBaseClasses,
-      props.sticky ? navbarFloatClasses : '',
-      props.rounded ? navbarRoundedClasses: '',
-      props.solid ? navbarSolidClasses : navbarWhiteClasses,
-  )
-})
-const isShowMenu = computed(() => {
-  if(!isMobile) {
-    return true
-  } else {
-    return isShowMenuOnMobile.value
-  }
-})
-</script>
diff --git a/src/components/Navbar/NavbarLink.ts b/src/components/Navbar/NavbarLink.ts
deleted file mode 100644
index 497867f4..00000000
--- a/src/components/Navbar/NavbarLink.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { defineComponent, h, resolveComponent } from 'vue'
-import classNames from 'classnames'
-
-export default defineComponent({
-    name: 'NavbarLink',
-    props: {
-        link: {
-            type: String,
-            default: '/',
-        },
-        isActive: {
-            type: Boolean,
-            default: false,
-        },
-        component: {
-            type: [Object, String],
-            default: 'a',
-        },
-        linkAttr: {
-            type: String,
-            default: 'href',
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    emits: [
-        'click',
-    ],
-    setup(props, { slots, emit }) {
-        const currentPageClasses = 'bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white'
-        const defaultStateClasses = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent'
-        const defaultClasses = 'block py-2 pr-4 pl-3 rounded md:p-0'
-        const linkClasses = classNames(
-            defaultClasses,
-            props.isActive ? currentPageClasses : defaultStateClasses,
-        )
-        const handleClick = (event: Event) => {
-            if (props.disabled) {
-                return
-            }
-            emit('click', event)
-        }
-        return () =>
-            h('li', null, h(
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                resolveComponent(props.component),
-                {
-                    ...props,
-                    class: linkClasses,
-                    [props.linkAttr]: props.link,
-                    onClick: handleClick,
-                },
-                {
-                    default: () => slots.default && slots.default(),
-                },
-            ))
-    },
-})
diff --git a/src/components/Navbar/NavbarLogo.ts b/src/components/Navbar/NavbarLogo.ts
deleted file mode 100644
index 2d51de02..00000000
--- a/src/components/Navbar/NavbarLogo.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { defineComponent, h } from 'vue'
-
-export default defineComponent({
-    name: 'NavbarLogo',
-    props: {
-        link: {
-            type: String,
-            default: '/',
-        },
-        imageUrl: {
-            type: String,
-            default: '/assets/logo.svg',
-        },
-        alt: {
-            type: String,
-            default: 'Logo',
-        },
-        component: {
-            type: [Object, String],
-            default: 'a',
-        },
-        linkAttr: {
-            type: String,
-            default: 'href',
-        },
-    },
-    emits: [
-        'click',
-    ],
-    setup(props, { slots }) {
-        return () =>
-            h(
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                props.component,
-                {
-                    [props.linkAttr]: props.link,
-                    class: 'flex items-center',
-                },
-                {
-                    default: () => [
-                        h(
-                            'img',
-                            {
-                                src: props.imageUrl,
-                                class: 'mr-3 h-6 sm:h-10',
-                                alt: props.alt,
-                            },
-                        ),
-                        h(
-                            'span',
-                            {
-                                class: 'self-center text-xl font-semibold whitespace-nowrap dark:text-white',
-                            },
-                            slots,
-                        )],
-                },
-            )
-    },
-})
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
deleted file mode 100644
index 61cbd5be..00000000
--- a/src/components/Progress/Progress.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div>
-  <template v-if="label || (labelProgress && labelPosition === 'outside')">
-    <div class="flex justify-between mb-1">
-      <span class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
-      <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</span>
-    </div>
-  </template>
-  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
-    <div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" :style="{ width: progress + '%' }">
-      <template v-if="labelProgress && labelPosition === 'inside'">
-        {{ progress }}%
-      </template>
-    </div>
-  </div>
-</div>
-</template>
-<script lang="ts" setup>
-import { toRefs } from 'vue'
-import type { PropType } from 'vue'
-import { useProgressClasses } from './composables/useProgressClasses'
-import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
-
-const props = defineProps({
-  color: {
-    type: String as PropType<ProgressVariant>,
-    default: 'default',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  labelPosition: {
-    type: String as PropType<ProgressLabelPosition>,
-    default: 'none',
-  },
-  labelProgress: {
-    type: Boolean,
-    default: false,
-  },
-  progress: {
-    type: Number,
-    default: 0,
-  },
-  size: {
-    type: String as PropType<ProgressSize>,
-    default: 'md',
-  },
-})
-
-const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
-
-</script>
diff --git a/src/components/Radio/Radio.vue b/src/components/Radio/Radio.vue
deleted file mode 100644
index fc1920bf..00000000
--- a/src/components/Radio/Radio.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <label class="flex w-[100%] items-center">
-    <input type="radio" v-model="model" :disabled="disabled" :name="name" :value="value"
-      :class="radioClasses">
-    <span :class="labelClasses">{{ label }}</span>
-    <slot />
-  </label>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRadioClasses } from './composables/useRadioClasses'
-
-interface RadioProps {
-  modelValue?: string;
-  name?: string;
-  value?: string;
-  label?: string;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<RadioProps>(), {
-  value: '',
-  name: '',
-  label: '',
-  disabled: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-const model = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emit('update:modelValue', val)
-  },
-})
-
-const { radioClasses, labelClasses } = useRadioClasses()
-</script>
diff --git a/src/components/Radio/composables/useRadioClasses.ts b/src/components/Radio/composables/useRadioClasses.ts
deleted file mode 100644
index 9fa05fb3..00000000
--- a/src/components/Radio/composables/useRadioClasses.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { computed } from 'vue'
-
-// Radio
-export const radioDefaultClasses = 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
-export const radioLabelClasses = 'm-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300'
-
-export function useRadioClasses() {
-  const radioClasses = computed(() => {
-    return radioDefaultClasses
-  })
-
-  const labelClasses = computed(() => {
-    return radioLabelClasses
-  })
-
-  return {
-    radioClasses,
-    labelClasses,
-  }
-}
diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
deleted file mode 100644
index 4c0caf47..00000000
--- a/src/components/Range/Range.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <label for="default-range" :class="labelClasses">{{ label }}</label>
-    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" type="range" :class="rangeClasses">
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import { useRangeClasses } from './composables/useRangeClasses'
-import type { InputSize } from '@/components/Input/types'
-
-interface RangeProps {
-  modelValue?: string;
-  label?: string;
-  disabled?: boolean;
-  min?: string;
-  max?: string;
-  size?: InputSize;
-  steps?: string;
-}
-
-const props = withDefaults(defineProps<RangeProps>(), {
-  modelValue: '50',
-  label: 'Range slider',
-  disabled: false,
-  min: '0',
-  max: '100',
-  size: 'md',
-  steps: '1',
-})
-
-const emit = defineEmits(['update:modelValue'])
-const model = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emit('update:modelValue', val)
-  },
-})
-
-const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
-</script>
diff --git a/src/components/Rating/types.ts b/src/components/Rating/types.ts
deleted file mode 100644
index f6f279e6..00000000
--- a/src/components/Rating/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type RatingSize = 'sm' | 'md' | 'lg'
\ No newline at end of file
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
deleted file mode 100644
index e145ce8e..00000000
--- a/src/components/Select/Select.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div>
-    <label v-if="label" :class="labelClasses">{{ label }}</label>
-    <select v-model="model" :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '']">
-      <option disabled selected value="">{{ placeholder }}</option>
-      <option :value="option.value" v-for="(option, index) in options" :key="index">
-        {{ option.name }}
-      </option>
-    </select>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { InputSize } from '@/components/Input/types'
-import type { OptionsType } from '@/components/Select/types'
-import { toRefs, computed } from 'vue'
-import { useSelectClasses } from '@/components/Select/composables/useSelectClasses'
-
-interface InputProps {
-  modelValue?: string;
-  label?: string;
-  options?: OptionsType[];
-  placeholder?: string;
-  disabled?: boolean;
-  underline?: boolean;
-  size?: InputSize;
-}
-const props = withDefaults(defineProps<InputProps>(), {
-  modelValue: '',
-  label: '',
-  options: () => [],
-  placeholder: 'Please select one',
-  disabled: false,
-  underline: false,
-  size: 'md',
-})
-const emit = defineEmits(['update:modelValue'])
-
-const model = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emit('update:modelValue', val)
-  },
-})
-
-const { selectClasses, underlineClasses, labelClasses } = useSelectClasses(toRefs(props))
-</script>
diff --git a/src/components/Select/composables/useSelectClasses.ts b/src/components/Select/composables/useSelectClasses.ts
deleted file mode 100644
index 3b1d7100..00000000
--- a/src/components/Select/composables/useSelectClasses.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
-import type { InputSize } from '@/components/Input/types'
-
-// LABEL
-const defaultLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300'
-
-// SELECT
-const defaultSelectClasses = 'w-full text-gray-900 bg-gray-50 border-[1px] border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
-const disabledSelectClasses = 'cursor-not-allowed bg-gray-100'
-const underlineSelectClasses = 'bg-transparent dark:bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer rounded-none'
-const selectSizeClasses: Record<InputSize, string> = {
-  lg: 'p-4',
-  md: 'p-2.5 text-sm',
-  sm: 'p-2 text-sm',
-}
-
-export type UseSelectClassesProps = {
-  size: Ref<InputSize>
-  disabled: Ref<boolean>
-  underline: Ref<boolean>
-}
-
-export function useSelectClasses(props: UseSelectClassesProps) {
-  const selectClasses = computed(() => {
-    return simplifyTailwindClasses(defaultSelectClasses, selectSizeClasses[props.size.value], props.disabled.value ? disabledSelectClasses : '')
-  })
-
-  const underlineClasses = computed(() => {
-    return underlineSelectClasses
-  })
-
-  const labelClasses = computed(() => {
-    return defaultLabelClasses
-  })
-
-  return { 
-    selectClasses,
-    underlineClasses,
-    labelClasses,
-  }
-}
\ No newline at end of file
diff --git a/src/components/Spinner/Spinner.vue b/src/components/Spinner/Spinner.vue
deleted file mode 100644
index d64f90fe..00000000
--- a/src/components/Spinner/Spinner.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <svg role="status" :class="spinnerClasses" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-  </svg>
-</template>
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import { useSpinnerClasses } from './composables/useSpinnerClasses'
-import { toRefs } from 'vue'
-import type { SpinnerColor, SpinnerSize } from './types'
-
-const props = defineProps({
-  size: {
-    type: String as PropType<SpinnerSize>, // any string for w-${size} and h-${size} tailwind classes, TODO: add all classes
-    default: '4',
-  },
-  color: {
-    type: String as PropType<SpinnerColor>,
-    default: 'blue',
-  },
-})
-
-const { spinnerClasses } = useSpinnerClasses(toRefs(props))
-</script>
\ No newline at end of file
diff --git a/src/components/Spinner/composables/useSpinnerClasses.ts b/src/components/Spinner/composables/useSpinnerClasses.ts
deleted file mode 100644
index bfe05247..00000000
--- a/src/components/Spinner/composables/useSpinnerClasses.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { SpinnerColor, SpinnerSize } from '../types'
-import { computed } from 'vue'
-import type { Ref } from 'vue'
-import classNames from 'classnames'
-
-const sizes: Record<SpinnerSize, string> = {
-    '0': 'w-0 h-0',
-    '0.5': 'w-0.5 h-0.5',
-    '1': 'w-1 h-1',
-    '1.5': 'w-1.5 h-1.5',
-    '10': 'w-10 h-10',
-    '11': 'w-11 h-11',
-    '12': 'w-12 h-12',
-    '2': 'w-2 h-2',
-    '2.5': 'w-2.5 h-2.5',
-    '3': 'w-3 h-3',
-    '4': 'w-4 h-4',
-    '5': 'w-5 h-5',
-    '6': 'w-6 h-6',
-    '7': 'w-7 h-7',
-    '8': 'w-8 h-8',
-    '9': 'w-9 h-9',
-    px: 'w-px h-px',
-}
-
-const colors: Record<SpinnerColor, string> = {
-    blue: 'fill-blue-600',
-    gray: 'fill-gray-600 dark:fill-gray-300',
-    green: 'fill-green-500',
-    pink: 'fill-pink-600',
-    purple: 'fill-purple-600',
-    red: 'fill-red-600',
-    yellow: 'fill-yellow-400',
-    white: 'fill-white',
-}
-
-export type UseSpinnerClassesProps = {
-    size: Ref<SpinnerSize>
-    color: Ref<SpinnerColor>
-}
-
-export function useSpinnerClasses(props: UseSpinnerClassesProps): { spinnerClasses: Ref<string> } {
-
-    const sizeClasses = computed(() => sizes[props.size.value])
-    const colorClasses = computed(() => colors[props.color.value])
-    const bgColorClasses = computed(() => 'text-gray-200 dark:text-gray-600')
-    const animateClasses = computed(() => 'animate-spin')
-
-    const spinnerClasses = computed(() => {
-        return classNames(
-            sizeClasses.value,
-            bgColorClasses.value,
-            colorClasses.value,
-            animateClasses.value,
-        )
-    })
-
-    return {
-        spinnerClasses,
-    }
-}
\ No newline at end of file
diff --git a/src/components/Spinner/types.ts b/src/components/Spinner/types.ts
deleted file mode 100644
index 708413d3..00000000
--- a/src/components/Spinner/types.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
-export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
\ No newline at end of file
diff --git a/src/components/Table/TableBody.vue b/src/components/Table/TableBody.vue
deleted file mode 100644
index 9a1b1f04..00000000
--- a/src/components/Table/TableBody.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <tbody>
-    <slot></slot>
-  </tbody>
-</template>
-<script lang="ts" setup>
-</script>
diff --git a/src/components/Table/TableHeadCell.vue b/src/components/Table/TableHeadCell.vue
deleted file mode 100644
index b8e08b63..00000000
--- a/src/components/Table/TableHeadCell.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <th scope="col" :class="tableHeadCellClasses">
-    <slot></slot>
-  </th>
-</template>
-<script lang="ts" setup>
-import { useTableHeadCellClasses } from '@/components/Table/composables/useTableHeadCellClasses'
-
-const { tableHeadCellClasses } = useTableHeadCellClasses()
-</script>
diff --git a/src/components/Table/composables/useTableHeadCellClasses.ts b/src/components/Table/composables/useTableHeadCellClasses.ts
deleted file mode 100644
index f928fe82..00000000
--- a/src/components/Table/composables/useTableHeadCellClasses.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { computed, inject } from 'vue'
-import type { Ref } from 'vue'
-import classNames from 'classnames'
-
-const baseClasses = 'px-6 py-3 text-xs uppercase'
-const stripedHeadCellClasses = 'even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
-
-export function useTableHeadCellClasses(): { tableHeadCellClasses: Ref<string> } {
-  const isColumnsStriped = inject('stripedColumns')
-
-  const tableHeadCellClasses = computed(() => {
-    return classNames(baseClasses, {
-      [stripedHeadCellClasses]: isColumnsStriped,
-    })
-  })
-
-  return {
-    tableHeadCellClasses,
-  }
-}
diff --git a/src/components/Tabs/components/TabPane/composables/useTabClasses.ts b/src/components/Tabs/components/TabPane/composables/useTabClasses.ts
deleted file mode 100644
index a624c82b..00000000
--- a/src/components/Tabs/components/TabPane/composables/useTabClasses.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type { TabsVariant } from '../../../types'
-import { useFlowbiteThemable } from '../../../../utils/FlowbiteThemable/composables/useFlowbiteThemable'
-import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
-
-export type TabClassMap =  { disabled: string, default: string, active: string }
-
-export type UseTabClassesProps = {
-    variant?: TabsVariant
-    active: Ref<boolean>
-    disabled: Ref<boolean>
-}
-
-const defaultTabClasses: TabClassMap = {
-    default: 'cursor-pointer inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300',
-    active: 'cursor-pointer inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
-    disabled: 'inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500',
-}
-const underlineTabClasses: TabClassMap = {
-    default: 'cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
-    active: 'cursor-pointer inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500',
-    disabled: 'inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500',
-}
-const pillsTabClasses: TabClassMap = {
-    default: 'cursor-pointer inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white',
-    active: 'cursor-pointer inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active',
-    disabled: 'inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500',
-}
-
-export function useTabClasses(props: UseTabClassesProps): {
-    tabClasses: Ref<string>,
-} {
-
-    const theme = useFlowbiteThemable()
-
-    const tabClasses = computed(() => {
-        const isActiveTheme = theme.isActive.value
-
-        const tabClassType: keyof TabClassMap = props.active.value ? 'active' : props.disabled.value ? 'disabled' : 'default'
-
-        if(props.variant === 'default')
-            return simplifyTailwindClasses(
-                defaultTabClasses[tabClassType],
-                isActiveTheme && tabClassType === 'active' ? theme.textClasses.value : '',
-            )
-        else if(props.variant === 'underline')
-            return simplifyTailwindClasses(
-                underlineTabClasses[tabClassType],
-                isActiveTheme && tabClassType === 'active' ? [theme.borderClasses.value, theme.textClasses.value] : '',
-            )
-        else if (props.variant === 'pills')
-            return simplifyTailwindClasses(
-                pillsTabClasses[tabClassType],
-                isActiveTheme && tabClassType === 'active' ? [theme.backgroundClasses.value, 'text-white'] : '',
-            )
-        return ''
-    })
-
-    return {
-        tabClasses,
-    }
-}
\ No newline at end of file
diff --git a/src/components/Tabs/composables/useTabsClasses.ts b/src/components/Tabs/composables/useTabsClasses.ts
deleted file mode 100644
index 0f2de440..00000000
--- a/src/components/Tabs/composables/useTabsClasses.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type { TabsVariant } from '../types'
-
-export type UseTabsClassesProps = {
-    variant: TabsVariant
-}
-
-export function useTabsClasses(props: UseTabsClassesProps): {
-    ulClasses: Ref<string>,
-    divClasses: Ref<string>,
-} {
-
-    const ulClasses = computed(() => {
-        if(props.variant === 'default')
-            return 'flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400'
-        else if(props.variant === 'pills')
-            return 'flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400'
-        else if(props.variant === 'underline')
-            return 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400'
-        return ''
-    })
-
-    const divClasses = computed(() => {
-        if(props.variant === 'underline')
-            return 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700'
-        return ''
-    })
-
-    return {
-        ulClasses,
-        divClasses,
-    }
-}
\ No newline at end of file
diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts
deleted file mode 100644
index 913cde7d..00000000
--- a/src/components/Tabs/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type TabsVariant = 'default' | 'underline' | 'pills'
\ No newline at end of file
diff --git a/src/components/Textarea/composables/useTextareaClasses.ts b/src/components/Textarea/composables/useTextareaClasses.ts
deleted file mode 100644
index 70fe3d31..00000000
--- a/src/components/Textarea/composables/useTextareaClasses.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
-import { computed } from 'vue'
-
-const textareaWrapperClasses = 'w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
-const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
-const textareaLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
-const textareaFooterClasses = 'py-2 px-3 border-gray-200 dark:border-gray-600'
-
-export function useTextareaClasses(custom: boolean) {
-  const textareaClasses = computed(() => {
-    return simplifyTailwindClasses(textareaDefaultClasses, custom? 'bg-white dark:bg-gray-800 border-none': 'border')
-  })
-
-  const labelClasses = computed(() => {
-    return textareaLabelClasses
-  })
-
-  const wrapperClasses = computed(() => {
-    if(custom) return textareaWrapperClasses
-    return ''
-  })
-
-  const footerClasses = computed(() => {
-    return textareaFooterClasses
-  })
-
-  return {
-    textareaClasses,
-    labelClasses,
-    wrapperClasses,
-    footerClasses,
-  }
-}
diff --git a/src/components/Timeline/TimelineBody.vue b/src/components/Timeline/TimelineBody.vue
deleted file mode 100644
index d9c5bece..00000000
--- a/src/components/Timeline/TimelineBody.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400"><slot></slot></p>
-</template>
diff --git a/src/components/Timeline/TimelineTime.vue b/src/components/Timeline/TimelineTime.vue
deleted file mode 100644
index 03eab9a5..00000000
--- a/src/components/Timeline/TimelineTime.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
-    <slot></slot>
-  </time>
-</template>
diff --git a/src/components/Timeline/TimelineTitle.vue b/src/components/Timeline/TimelineTitle.vue
deleted file mode 100644
index e39664e9..00000000
--- a/src/components/Timeline/TimelineTitle.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-    <slot></slot>
-  </h3>
-</template>
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
deleted file mode 100644
index f47cf52e..00000000
--- a/src/components/Toast/Toast.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div v-if="visible" id="toast-default" :class="wrapperClasses" role="alert" >
-    <flowbite-themable-child
-        v-if="type !== 'empty' || $slots.icon"
-        :class="[
-            'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg',
-             typeClasses
-        ]"
-        :apply="['background', 'text']"
-    >
-      <slot v-if="$slots.icon" :class="{ 'ml-3': type !== 'empty' }" name="icon" />
-      <svg v-else-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="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>
-    </flowbite-themable-child>
-    <div :class="[contentClasses, { 'ml-3': $slots.icon || type !== 'empty' }]">
-      <slot />
-    </div>
-    <button @click="onClose" v-if="closable" type="button" class="border-none 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" 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>
-    </button>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { ToastAlign, ToastType } from '@/components/Toast/types'
-import type { PropType } from 'vue'
-import { useToastClasses } from './composables/useToastClasses'
-import { ref, toRefs } from 'vue'
-import FlowbiteThemableChild
-  from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
-
-const props = defineProps({
-  type: {
-    type: String as PropType<ToastType>,
-    default: 'empty',
-  },
-  alignment: {
-    type: String as PropType<ToastAlign>,
-    default: 'center',
-  },
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-  divide: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const visible = ref(true)
-
-const emit = defineEmits(['close'])
-
-const { typeClasses, wrapperClasses, contentClasses } = useToastClasses(toRefs(props))
-
-const onClose = () => {
-  emit('close')
-  visible.value = false
-}
-</script>
diff --git a/src/components/Toast/components/ToastProvider/ToastProvider.css b/src/components/Toast/components/ToastProvider/ToastProvider.css
deleted file mode 100644
index e52bb84b..00000000
--- a/src/components/Toast/components/ToastProvider/ToastProvider.css
+++ /dev/null
@@ -1,49 +0,0 @@
-
-.slide-left-enter-active,
-.slide-left-leave-active {
-    transition: all 0.5s ease;
-}
-.slide-left-enter-from,
-.slide-left-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-}
-
-.slide-right-enter-active,
-.slide-right-leave-active {
-    transition: all 0.5s ease;
-}
-.slide-right-enter-from,
-.slide-right-leave-to {
-    opacity: 0;
-    transform: translateX(-30px);
-}
-
-.slide-top-enter-active,
-.slide-top-leave-active {
-    transition: all 0.5s ease;
-}
-.slide-top-enter-from,
-.slide-top-leave-to {
-    opacity: 0;
-    transform: translateY(30px);
-}
-
-.slide-bottom-enter-active,
-.slide-bottom-leave-active {
-    transition: all 0.5s ease;
-}
-.slide-bottom-enter-from,
-.slide-bottom-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: all 0.5s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
diff --git a/src/components/Toast/components/ToastProvider/ToastProvider.vue b/src/components/Toast/components/ToastProvider/ToastProvider.vue
deleted file mode 100644
index 2f7d21c9..00000000
--- a/src/components/Toast/components/ToastProvider/ToastProvider.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-import { defineComponent, h, provide, ref, TransitionGroup } from 'vue'
-import { FLOWBITE_TOAST_INJECTION_KEY } from '@/components/Toast/components/ToastProvider/injection/config'
-import type { ToastItem, ToastItemWithId, ToastTransition, UseToastInjection } from '@/components/Toast/components/ToastProvider/types'
-import { Toast } from '@/index'
-import { useTimeoutFn } from '@vueuse/core'
-import type { PropType } from 'vue'
-
-export default defineComponent({
-  components: {
-    Toast,
-  },
-  props: {
-    transition: {
-      type: String as PropType<ToastTransition>,
-      default: 'slide-left',
-    },
-  },
-  setup() {
-    const toasts = ref<ToastItemWithId[]>([])
-
-    const runRemoveTimeout = (id: string, ms: number) => {
-      useTimeoutFn(() => removeToast(id), ms)
-    }
-
-    const addToast = (toast: ToastItem) => {
-      const id = parseInt((new Date().getTime() * Math.random()).toString()).toString()
-      toasts.value.push({
-        id,
-        ...toast,
-      })
-      if (toast.time > 0) runRemoveTimeout(id, toast.time)
-      return id
-    }
-
-    const popToast = () => {
-      if (toasts.value.length === 0) return ''
-      const lastId = toasts.value[toasts.value.length - 1].id
-      toasts.value.pop()
-      return lastId
-    }
-
-    const removeToast = (id: string) => {
-      const index = toasts.value.findIndex((_) => _.id === id)
-      if (index >= 0) toasts.value.splice(index, 1)
-      return index >= 0
-    }
-
-    provide<UseToastInjection>(FLOWBITE_TOAST_INJECTION_KEY, {
-      add: addToast,
-      pop: popToast,
-      remove: removeToast,
-    })
-
-    return {
-      toasts,
-      removeToast,
-    }
-  },
-  render() {
-    const { $props, $slots, toasts, removeToast } = this
-
-    return h('div', {}, [
-      $slots.default ? $slots.default() : null, // rendering default slot
-      h(
-        TransitionGroup,
-        {
-          name: $props.transition,
-          tag: 'div',
-          class: 'xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50',
-        },
-        {
-          default: () =>
-            toasts.map(
-              (
-                _toast, // rendering every toast
-              ) =>
-                _toast.component
-                  ? h(
-                      _toast.component,
-                      {
-                        key: _toast.id,
-                        onClose: () => removeToast(_toast.id),
-                        ...(_toast.componentProps ? _toast.componentProps : {}),
-                      },
-                      () => _toast.text,
-                    )
-                  : h(
-                      Toast,
-                      {
-                        closable: true,
-                        type: _toast.type,
-                        key: _toast.id,
-                        onClose: () => removeToast(_toast.id),
-                      },
-                      () => _toast.text,
-                    ),
-            ),
-        },
-      ),
-    ])
-  },
-})
-</script>
-<style lang="scss" scoped src="./ToastProvider.css"></style>
diff --git a/src/components/Toast/components/ToastProvider/composables/useToast.ts b/src/components/Toast/components/ToastProvider/composables/useToast.ts
deleted file mode 100644
index 65e33c3b..00000000
--- a/src/components/Toast/components/ToastProvider/composables/useToast.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { inject } from 'vue'
-import type { ToastItem, UseToastInjection } from '@/components/Toast/components/ToastProvider/types'
-import { FLOWBITE_TOAST_INJECTION_KEY } from '@/components/Toast/components/ToastProvider/injection/config'
-
-export function useToast(): UseToastInjection {
-    const injection = inject<UseToastInjection | null>(FLOWBITE_TOAST_INJECTION_KEY, null)
-    if(injection === null) console.warn('Cannot use useToast outside <toast-provider> component. Please wrap your component with <toast-provider>')
-
-    const add = (toast: ToastItem): string => {
-        if(!injection) return ''
-        return injection?.add(toast)
-    }
-
-    const remove = (id: string): boolean => {
-        if(!injection) return false
-        return injection?.remove(id)
-    }
-
-    const pop = (): string => {
-        if(!injection) return ''
-        return injection?.pop()
-    }
-
-    return {
-        add,
-        remove,
-        pop,
-    }
-}
diff --git a/src/components/Toast/components/ToastProvider/types.ts b/src/components/Toast/components/ToastProvider/types.ts
deleted file mode 100644
index ac64d986..00000000
--- a/src/components/Toast/components/ToastProvider/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { ToastType } from '@/components/Toast/types'
-import type { DefineComponent } from 'vue'
-
-export type ToastItem = {
-    time: number // ms
-    type: ToastType
-    text: string
-    component?: DefineComponent
-    componentProps?: Record<string, unknown>
-}
-
-export type ToastItemWithId = ToastItem & {
-    id: string
-}
-
-export type ToastTransition = 'slide-left' | 'slide-right' | 'fade' | 'slide-top' | 'slide-bottom'
-
-export type UseToastInjection = {
-    add: (toast: ToastItem) => string
-    remove: (id: string) => boolean // true if removed, false if not found
-    pop: () => string // empty '' string if no toast to pop
-}
diff --git a/src/components/Toast/composables/useToastClasses.ts b/src/components/Toast/composables/useToastClasses.ts
deleted file mode 100644
index 16cdafdb..00000000
--- a/src/components/Toast/composables/useToastClasses.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type { ToastType } from '@/components/Toast/types'
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
-import type { ToastAlign } from '@/components/Toast/types'
-
-type UseToastClassesReturns = {
-    typeClasses: Ref<string>
-    wrapperClasses: Ref<string>
-    contentClasses: Ref<string>
-}
-
-type UseToastClassesProps = {
-    type: Ref<ToastType>
-    divide: Ref<boolean>
-    alignment: Ref<ToastAlign>
-}
-
-const typeClassesMap: Record<ToastType, 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',
-}
-
-
-const wrapperAlignmentClasses: Record<ToastAlign, string> = {
-    center: 'items-center',
-    end: 'items-end',
-    start: 'items-start',
-}
-const defaultWrapperClasses = 'flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
-
-const defaultContentClasses = 'text-sm font-normal'
-
-export function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns {
-
-    const typeClasses = computed(() => {
-        return typeClassesMap[props.type.value]
-    })
-
-    const wrapperClasses = computed(() => {
-        const alignmentClass = wrapperAlignmentClasses[props.alignment.value]
-        if(props.divide.value) return simplifyTailwindClasses(defaultWrapperClasses, 'dark:divide-gray-700 divide-x divide-gray-200', alignmentClass)
-        return simplifyTailwindClasses(defaultWrapperClasses, alignmentClass)
-    })
-
-    const contentClasses = computed(() => {
-        if(props.type.value !== 'empty' && props.divide.value) return simplifyTailwindClasses(defaultContentClasses, 'pl-3')
-        return defaultContentClasses
-    })
-
-    return {
-        typeClasses,
-        wrapperClasses,
-        contentClasses,
-    }
-}
diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
deleted file mode 100644
index 2d08fca0..00000000
--- a/src/components/Toast/types.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type ToastType = 'success' | 'warning' | 'danger' | 'empty'
-export type ToastAlign = 'start' | 'center' | 'end'
diff --git a/src/components/Typography/A.vue b/src/components/Typography/FwbA.vue
similarity index 72%
rename from src/components/Typography/A.vue
rename to src/components/Typography/FwbA.vue
index 30842857..a88801b0 100644
--- a/src/components/Typography/A.vue
+++ b/src/components/Typography/FwbA.vue
@@ -1,5 +1,8 @@
 <template>
-  <a :href="href" :class="[color, 'inline-flex items-center hover:underline']">
+  <a
+    :href="href"
+    :class="[color, 'inline-flex items-center hover:underline']"
+  >
     <slot />
   </a>
 </template>
diff --git a/src/components/Typography/Heading.vue b/src/components/Typography/FwbHeading.vue
similarity index 50%
rename from src/components/Typography/Heading.vue
rename to src/components/Typography/FwbHeading.vue
index f011e592..c579c42b 100644
--- a/src/components/Typography/Heading.vue
+++ b/src/components/Typography/FwbHeading.vue
@@ -1,17 +1,28 @@
 <template>
-  <div :class="customSize ? customSize : [textSizes[tag], color, 'w-full']">
+  <component
+    :is="componentTag"
+    v-bind="$attrs"
+    :class="headingClasses"
+  >
     <slot />
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+import { useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 interface HeadingProps {
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   color?: string
   customSize?: string
 }
 
-withDefaults(defineProps<HeadingProps>(), {
+const props = withDefaults(defineProps<HeadingProps>(), {
   tag: 'h1',
   color: 'text-gray-900 dark:text-white',
   customSize: '',
@@ -25,4 +36,13 @@ const textSizes: Record<string, string> = {
   h5: 'text-xl font-bold',
   h6: 'text-lg font-bold',
 }
+const attrs = useAttrs()
+const headingClasses = twMerge(
+  'w-full',
+  textSizes[props.tag],
+  props.color,
+  props.customSize,
+  attrs.class as string,
+)
+const componentTag = props.tag
 </script>
diff --git a/src/components/Typography/Img.vue b/src/components/Typography/FwbImg.vue
similarity index 58%
rename from src/components/Typography/Img.vue
rename to src/components/Typography/FwbImg.vue
index b377a460..4a252367 100644
--- a/src/components/Typography/Img.vue
+++ b/src/components/Typography/FwbImg.vue
@@ -1,9 +1,23 @@
 <template>
-  <figure v-if="caption" :class="size">
-    <img :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
-    <figcaption :class="captionClass">{{ caption }}</figcaption>
+  <figure
+    v-if="caption"
+    :class="size"
+  >
+    <img
+      :src="src"
+      :alt="alt"
+      :class="[size, alignment, imgClass]"
+    >
+    <figcaption :class="captionClass">
+      {{ caption }}
+    </figcaption>
   </figure>
-  <img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
+  <img
+    v-else
+    :src="src"
+    :alt="alt"
+    :class="[size, alignment, imgClass]"
+  >
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Typography/P.vue b/src/components/Typography/FwbP.vue
similarity index 100%
rename from src/components/Typography/P.vue
rename to src/components/Typography/FwbP.vue
diff --git a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
index fb438d6b..29f9d649 100644
--- a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
+++ b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue
@@ -1,19 +1,18 @@
 <template>
-  <div>
-    <slot />
-  </div>
+  <slot />
 </template>
+
 <script lang="ts" setup>
-import type { PropType } from 'vue'
-import type { FlowbiteTheme } from './types'
 import { provide, toRef } from 'vue'
+import type { FlowbiteTheme } from './types'
 import { FLOWBITE_THEMABLE_INJECTION_KEY } from './injection/config'
 
-const props = defineProps({
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    required: true,
-  },
+interface IFlowbiteThemableProps {
+  theme?: FlowbiteTheme,
+}
+
+const props = withDefaults(defineProps<IFlowbiteThemableProps>(), {
+  theme: 'blue',
 })
 
 provide(FLOWBITE_THEMABLE_INJECTION_KEY, toRef(props, 'theme'))
diff --git a/src/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue b/src/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue
new file mode 100644
index 00000000..c682d513
--- /dev/null
+++ b/src/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue
@@ -0,0 +1,36 @@
+<template>
+  <component
+    :is="tag"
+    :class="simplifyTailwindClasses(classAttr, classes)"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType, toRefs, useAttrs } from 'vue'
+import type { FlowbiteTheme, ThemableChildrenApply } from '@/components/utils/FlowbiteThemable/types'
+import { useFlowbiteThemableChildClasses } from './composables/useFlowbiteThemableChildClasses'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  apply: {
+    type: Array as PropType<ThemableChildrenApply[]>,
+    required: true,
+  },
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: undefined,
+  },
+})
+
+const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
+
+const classAttr = computed<string>(() => attrs.class as string || '')
+</script>
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
deleted file mode 100644
index 5d80f708..00000000
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <component :is="tag" :class="simplifyTailwindClasses(classAttr, 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 { computed, toRefs, useAttrs } from 'vue'
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
-import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
-
-const attrs = useAttrs()
-
-const props = defineProps({
-  apply: {
-    type: Array as PropType<ThemableChildrenApply[]>,
-    required: true,
-  },
-  tag: {
-    type: String,
-    default: 'div',
-  },
-  theme: {
-    type: String as PropType<FlowbiteTheme>,
-    default: undefined,
-  },
-})
-
-const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
-
-const classAttr = computed<string>(() => {
-  return attrs.class as string || '' // TODO:
-})
-</script>
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
deleted file mode 100644
index 00a41d34..00000000
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type {
-    ThemableChildrenApply,
-} from '../types'
-import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
-import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
-
-type UseFlowbiteThemableChildReturns = {
-    classes: Ref<string>
-}
-
-type UseFlowbiteThemableChildProps = {
-    apply: Ref<ThemableChildrenApply[]>
-    theme?: Ref<FlowbiteTheme | undefined>
-}
-
-export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
-
-    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable(props.theme?.value)
-
-    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
deleted file mode 100644
index bf19a244..00000000
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-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 b1f8fcdf..196b5037 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -1,20 +1,27 @@
+import { computed, inject, ref, type Ref } from 'vue'
 import type { FlowbiteTheme } from '../types'
-import type { Ref } from 'vue'
-import { computed, inject, ref } from 'vue'
 import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
 
 type UseFlowbiteThemableReturns = {
-  textClasses: Ref<string>
   backgroundClasses: Ref<string>
-  hoverClasses: Ref<string>
-  disabledClasses: Ref<string>
   borderClasses: Ref<string>
+  color: Ref<FlowbiteTheme | undefined>
+  disabledClasses: Ref<string>
   focusClasses: Ref<string>
+  hoverClasses: Ref<string>
   isActive: Ref<boolean>
-  color: Ref<FlowbiteTheme | undefined>
+  textClasses: Ref<string>
+}
+
+type FlowbiteThemeMap = {
+  background: string
+  border: string
+  disabled: string
+  focus: string
+  hover: string
+  text: 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 flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
@@ -60,54 +67,61 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
   },
 }
 
-export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
+export function useFlowbiteThemable (_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
   const theme = inject<Ref<FlowbiteTheme | null>>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
 
-  const isActive = computed(() => !!theme?.value)
-  const color = computed(() => theme?.value || undefined)
-
   const themeName = computed(() => {
     return _theme || theme.value
   })
 
-  const backgroundClasses = computed(() => {
-    if (!themeName.value) return ''
-    return flowbiteThemeClasses[themeName.value].background
-  })
+  const isActive = computed(() => !!theme?.value)
 
-  const disabledClasses = computed(() => {
-    if (!themeName.value) return ''
-    return flowbiteThemeClasses[themeName.value].disabled
-  })
+  const backgroundClasses = computed(() =>
+    (!themeName.value)
+      ? ''
+      : flowbiteThemeClasses[themeName.value].background,
+  )
 
-  const hoverClasses = computed(() => {
-    if (!themeName.value) return ''
-    return flowbiteThemeClasses[themeName.value].hover
-  })
+  const borderClasses = computed(() =>
+    (!themeName.value)
+      ? ''
+      : flowbiteThemeClasses[themeName.value].border,
+  )
 
-  const textClasses = computed(() => {
-    if (!themeName.value) return ''
-    return flowbiteThemeClasses[themeName.value].text
-  })
+  const color = computed(() => theme?.value || undefined)
 
-  const borderClasses = computed(() => {
-    if (!themeName.value) return ''
-    return flowbiteThemeClasses[themeName.value].border
-  })
+  const disabledClasses = computed(() =>
+    (!themeName.value)
+      ? ''
+      : flowbiteThemeClasses[themeName.value].disabled,
+  )
 
-  const focusClasses = computed(() => {
-    if (!themeName.value) return ''
-    return flowbiteThemeClasses[themeName.value].focus
-  })
+  const focusClasses = computed(() =>
+    (!themeName.value)
+      ? ''
+      : flowbiteThemeClasses[themeName.value].focus,
+  )
+
+  const hoverClasses = computed(() =>
+    (!themeName.value)
+      ? ''
+      : flowbiteThemeClasses[themeName.value].hover,
+  )
+
+  const textClasses = computed(() =>
+    (!themeName.value)
+      ? ''
+      : flowbiteThemeClasses[themeName.value].text,
+  )
 
   return {
     backgroundClasses,
-    disabledClasses,
-    hoverClasses,
-    textClasses,
     borderClasses,
+    color,
+    disabledClasses,
     focusClasses,
+    hoverClasses,
     isActive,
-    color,
+    textClasses,
   }
 }
diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.ts
new file mode 100644
index 00000000..69985de7
--- /dev/null
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.ts
@@ -0,0 +1,62 @@
+import { computed, type Ref } from 'vue'
+import type { ThemableChildrenApply } from '../types'
+import { useFlowbiteThemable } from './useFlowbiteThemable'
+import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
+
+type UseFlowbiteThemableChildReturns = {
+    classes: Ref<string>
+}
+
+type UseFlowbiteThemableChildProps = {
+    apply: Ref<ThemableChildrenApply[]>
+    theme?: Ref<FlowbiteTheme | undefined>
+}
+
+export function useFlowbiteThemableChildClasses (props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
+  const {
+    backgroundClasses,
+    borderClasses,
+    disabledClasses,
+    focusClasses,
+    hoverClasses,
+    isActive,
+    textClasses,
+  } = useFlowbiteThemable(props.theme?.value)
+
+  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/injection/config.ts b/src/components/utils/FlowbiteThemable/injection/config.ts
index cb3f7745..09074669 100644
--- a/src/components/utils/FlowbiteThemable/injection/config.ts
+++ b/src/components/utils/FlowbiteThemable/injection/config.ts
@@ -1 +1 @@
-export const FLOWBITE_THEMABLE_INJECTION_KEY = 'flowbite-themable-injection-key'
\ No newline at end of file
+export const FLOWBITE_THEMABLE_INJECTION_KEY = 'flowbite-themable-injection-key'
diff --git a/src/components/utils/FlowbiteThemable/types.d.ts b/src/components/utils/FlowbiteThemable/types.d.ts
deleted file mode 100644
index 20172b39..00000000
--- a/src/components/utils/FlowbiteThemable/types.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type FlowbiteTheme = 'blue' | 'green' | 'red' | 'pink' | 'purple'
-
-export type FlowbiteThemablePayload = {
-    theme: FlowbiteTheme
-}
\ No newline at end of file
diff --git a/src/components/utils/FlowbiteThemable/types.ts b/src/components/utils/FlowbiteThemable/types.ts
new file mode 100644
index 00000000..016785eb
--- /dev/null
+++ b/src/components/utils/FlowbiteThemable/types.ts
@@ -0,0 +1,7 @@
+export type FlowbiteTheme = 'blue' | 'green' | 'red' | 'pink' | 'purple'
+
+export type FlowbiteThemablePayload = {
+  theme: FlowbiteTheme
+}
+
+export type ThemableChildrenApply = 'background' | 'disabled' | 'hover' | 'text' | 'border' | 'focus'
diff --git a/src/components/utils/SlotListener/SlotListener.vue b/src/components/utils/FwbSlotListener/FwbSlotListener.vue
similarity index 85%
rename from src/components/utils/SlotListener/SlotListener.vue
rename to src/components/utils/FwbSlotListener/FwbSlotListener.vue
index db755519..ab9f6c00 100644
--- a/src/components/utils/SlotListener/SlotListener.vue
+++ b/src/components/utils/FwbSlotListener/FwbSlotListener.vue
@@ -1,9 +1,8 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import type { VNode, PropType } from 'vue'
-import type { SlotListenerTrigger, TriggerEventHandlers } from '@/components/utils/SlotListener/types'
-import { getFirstSlotVNode } from '@/utils/getFirstSlotNode'
+import { defineComponent, type PropType, type VNode } from 'vue'
 import { pick } from 'lodash-es'
+import type { SlotListenerTrigger, TriggerEventHandlers } from '@/components/utils/FwbSlotListener/types'
+import { getFirstSlotVNode } from '@/utils/getFirstSlotNode'
 
 // inspired from https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx
 
@@ -13,9 +12,9 @@ const triggerEventMap: Record<SlotListenerTrigger, string[]> = {
   hover: ['onMouseenter', 'onMouseleave'],
 }
 
-function appendEvents(
-    vNode: VNode,
-    events: TriggerEventHandlers,
+function appendEvents (
+  vNode: VNode,
+  events: TriggerEventHandlers,
 ): void {
   Object.entries(triggerEventMap).forEach(([, eventNames]) => {
     eventNames.forEach((eventName) => {
@@ -39,14 +38,14 @@ function appendEvents(
 
 export default defineComponent({
   name: 'SlotListener',
-  emits: ['click', 'focus', 'blur', 'mouseenter', 'mouseleave'],
   props: {
     trigger: {
       type: String as PropType<SlotListenerTrigger>,
       default: 'click',
     },
   },
-  setup(props, { emit }) {
+  emits: ['click', 'focus', 'blur', 'mouseenter', 'mouseleave'],
+  setup (props, { emit }) {
     const handleFocus = (e: FocusEvent) => {
       emit('focus', e)
     }
@@ -71,7 +70,7 @@ export default defineComponent({
       handleMouseEnter,
     }
   },
-  render() {
+  render () {
     const {
       $slots,
     } = this
@@ -84,13 +83,16 @@ export default defineComponent({
       onBlur: this.handleBlur,
     }
 
-    let triggerVNode = getFirstSlotVNode($slots, 'default')
+    const triggerVNode = getFirstSlotVNode($slots, 'default')
 
     const ascendantAndCurrentHandlers: TriggerEventHandlers[] = [
       handlers,
     ]
-    if (triggerVNode?.props)
-      ascendantAndCurrentHandlers.push(pick(triggerVNode.props, 'onClick', 'onMouseenter', 'onMouseleave', 'onFocus', 'onBlur'))
+    if (triggerVNode?.props) {
+      ascendantAndCurrentHandlers.push(
+        pick(triggerVNode.props, 'onClick', 'onMouseenter', 'onMouseleave', 'onFocus', 'onBlur'),
+      )
+    }
 
     const mergedHandlers: TriggerEventHandlers = {
       onBlur: (e: FocusEvent) => {
@@ -120,11 +122,12 @@ export default defineComponent({
       },
     }
 
-    if (triggerVNode)
+    if (triggerVNode) {
       appendEvents(
-          triggerVNode,
-          mergedHandlers,
+        triggerVNode,
+        mergedHandlers,
       )
+    }
 
     return triggerVNode
   },
diff --git a/src/components/utils/FwbSlotListener/types.ts b/src/components/utils/FwbSlotListener/types.ts
new file mode 100644
index 00000000..61ccb835
--- /dev/null
+++ b/src/components/utils/FwbSlotListener/types.ts
@@ -0,0 +1,9 @@
+export type SlotListenerTrigger = 'click' | 'focus' | 'hover'
+
+export type TriggerEventHandlers = {
+  onClick: (e: MouseEvent) => void
+  onMouseenter: (e: MouseEvent) => void
+  onMouseleave: (e: MouseEvent) => void
+  onFocus: (e: FocusEvent) => void
+  onBlur: (e: FocusEvent) => void
+}
diff --git a/src/components/utils/SlotListener/types.ts b/src/components/utils/SlotListener/types.ts
deleted file mode 100644
index 6e690229..00000000
--- a/src/components/utils/SlotListener/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type SlotListenerTrigger = 'click' | 'focus' | 'hover'
-
-
-export type TriggerEventHandlers = {
-    onClick: (e: MouseEvent) => void
-    onMouseenter: (e: MouseEvent) => void
-    onMouseleave: (e: MouseEvent) => void
-    onFocus: (e: FocusEvent) => void
-    onBlur: (e: FocusEvent) => void
-}
diff --git a/src/composables.ts b/src/composables.ts
index 1e7bcc60..3b675e05 100644
--- a/src/composables.ts
+++ b/src/composables.ts
@@ -1,5 +1,3 @@
-import { useToast } from '@/components/Toast/components/ToastProvider/composables/useToast'
+import { useToast } from '@/components/FwbToast/composables/useToast'
 
-export {
-    useToast,
-}
+export { useToast }
diff --git a/src/composables/useClasses.ts b/src/composables/useClasses.ts
index 5452d0a3..80f71ea3 100644
--- a/src/composables/useClasses.ts
+++ b/src/composables/useClasses.ts
@@ -1,3 +1,3 @@
-export function useClasses() {
+export function useClasses () {
 
-}
\ No newline at end of file
+}
diff --git a/src/index.ts b/src/index.ts
index d5002ca2..a5ec56d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,82 +1,80 @@
-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'
-export { default as Alert } from './components/Alert/Alert.vue'
-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 Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
-export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.vue'
-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 Badge } from './components/Badge/Badge.vue'
-export { default as TheCard } from './components/Card/TheCard.vue'
-export { default as Carousel } from './components/Carousel/Carousel.vue'
-export { default as Footer } from './components/Footer/Footer.vue'
-export { default as FooterBrand } from './components/Footer/FooterBrand.vue'
-export { default as FooterCopyright } from './components/Footer/FooterCopyright.vue'
-export { default as FooterLink } from './components/Footer/FooterLink.vue'
-export { default as FooterLinkGroup } from './components/Footer/FooterLinkGroup.vue'
-export { default as FooterIcon } from './components/Footer/FooterIcon.vue'
-export { default as ListGroup } from './components/ListGroup/ListGroup.vue'
-export { default as ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue'
-export { default as Modal } from './components/Modal/Modal.vue'
-export { default as Navbar } from './components/Navbar/Navbar.vue'
-export { default as NavbarLogo } from './components/Navbar/NavbarLogo'
-export { default as NavbarCollapse } from './components/Navbar/NavbarCollapse.vue'
-export { default as NavbarLink } from './components/Navbar/NavbarLink'
-export { default as Pagination } from './components/Pagination/Pagination.vue'
-export { default as Progress } from './components/Progress/Progress.vue'
-export { default as Rating } from './components/Rating/Rating.vue'
-export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
-export { default as SidebarCta } from './components/Sidebar/SidebarCta.vue'
-export { default as SidebarDropdownItem } from './components/Sidebar/SidebarDropdownItem.vue'
-export { default as SidebarItem } from './components/Sidebar/SidebarItem.vue'
-export { default as SidebarItemGroup } from './components/Sidebar/SidebarItemGroup.vue'
-export { default as SidebarLogo } from './components/Sidebar/SidebarLogo.vue'
-export { default as Table } from './components/Table/Table.vue'
-export { default as TableHead } from './components/Table/TableHead.vue'
-export { default as TableBody } from './components/Table/TableBody.vue'
-export { default as TableHeadCell } from './components/Table/TableHeadCell.vue'
-export { default as TableRow } from './components/Table/TableRow.vue'
-export { default as TableCell } from './components/Table/TableCell.vue'
-export { default as Timeline } from './components/Timeline/Timeline.vue'
-export { default as TimelineItem } from './components/Timeline/TimelineItem.vue'
-export { default as TimelinePoint } from './components/Timeline/TimelinePoint.vue'
-export { default as TimelineContent } from './components/Timeline/TimelineContent.vue'
-export { default as TimelineTime } from './components/Timeline/TimelineTime.vue'
-export { default as TimelineTitle } from './components/Timeline/TimelineTitle.vue'
-export { default as TimelineBody } from './components/Timeline/TimelineBody.vue'
-export { default as Toast } from './components/Toast/Toast.vue'
-export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'
-export { default as Tooltip } from './components/Tooltip/Tooltip.vue'
-export { default as Textarea } from './components/Textarea/Textarea.vue'
-export { default as Input } from './components/Input/Input.vue'
-
-export { default as SlotListener } from './components/utils/SlotListener/SlotListener.vue'
-
-export { default as Checkbox } from './components/Checkbox/Checkbox.vue'
-
-export { default as Select } from './components/Select/Select.vue'
+export { default as FwbAccordion } from './components/FwbAccordion/FwbAccordion.vue'
+export { default as FwbAccordionContent } from './components/FwbAccordion/FwbAccordionContent.vue'
+export { default as FwbAccordionHeader } from './components/FwbAccordion/FwbAccordionHeader.vue'
+export { default as FwbAccordionPanel } from './components/FwbAccordion/FwbAccordionPanel.vue'
+export { default as FwbAlert } from './components/FwbAlert/FwbAlert.vue'
+export { default as FwbAvatar } from './components/FwbAvatar/FwbAvatar.vue'
+export { default as FwbAvatarStack } from './components/FwbAvatar/FwbAvatarStack.vue'
+export { default as FwbAvatarStackCounter } from './components/FwbAvatar/FwbAvatarStackCounter.vue'
+export { default as FwbBadge } from './components/FwbBadge/FwbBadge.vue'
+export { default as FwbBreadcrumb } from './components/FwbBreadcrumb/FwbBreadcrumb.vue'
+export { default as FwbBreadcrumbItem } from './components/FwbBreadcrumb/FwbBreadcrumbItem.vue'
+export { default as FwbButton } from './components/FwbButton/FwbButton.vue'
+export { default as FwbButtonGroup } from './components/FwbButtonGroup/FwbButtonGroup.vue'
+export { default as FwbCard } from './components/FwbCard/FwbCard.vue'
+export { default as FwbCarousel } from './components/FwbCarousel/FwbCarousel.vue'
+export { default as FwbDropdown } from './components/FwbDropdown/FwbDropdown.vue'
+export { default as FwbFooter } from './components/FwbFooter/FwbFooter.vue'
+export { default as FwbFooterBrand } from './components/FwbFooter/FwbFooterBrand.vue'
+export { default as FwbFooterCopyright } from './components/FwbFooter/FwbFooterCopyright.vue'
+export { default as FwbFooterIcon } from './components/FwbFooter/FwbFooterIcon.vue'
+export { default as FwbFooterLink } from './components/FwbFooter/FwbFooterLink.vue'
+export { default as FwbFooterLinkGroup } from './components/FwbFooter/FwbFooterLinkGroup.vue'
+export { default as FwbListGroup } from './components/FwbListGroup/FwbListGroup.vue'
+export { default as FwbListGroupItem } from './components/FwbListGroup/FwbListGroupItem.vue'
+export { default as FwbModal } from './components/FwbModal/FwbModal.vue'
+export { default as FwbNavbar } from './components/FwbNavbar/FwbNavbar.vue'
+export { default as FwbNavbarCollapse } from './components/FwbNavbar/FwbNavbarCollapse.vue'
+export { default as FwbNavbarLink } from './components/FwbNavbar/FwbNavbarLink.vue'
+export { default as FwbNavbarLogo } from './components/FwbNavbar/FwbNavbarLogo.vue'
+export { default as FwbPagination } from './components/FwbPagination/FwbPagination.vue'
+export { default as FwbProgress } from './components/FwbProgress/FwbProgress.vue'
+export { default as FwbRating } from './components/FwbRating/FwbRating.vue'
+export { default as FwbSidebar } from '@/components/FwbSidebar/FwbSidebar.vue'
+export { default as FwbSidebarCta } from '@/components/FwbSidebar/FwbSidebarCta.vue'
+export { default as FwbSidebarDropdownItem } from '@/components/FwbSidebar/FwbSidebarDropdownItem.vue'
+export { default as FwbSidebarItem } from '@/components/FwbSidebar/FwbSidebarItem.vue'
+export { default as FwbSidebarItemGroup } from '@/components/FwbSidebar/FwbSidebarItemGroup.vue'
+export { default as FwbSidebarLogo } from '@/components/FwbSidebar/FwbSidebarLogo.vue'
+export { default as FwbSpinner } from './components/FwbSpinner/FwbSpinner.vue'
+export { default as FwbTable } from './components/FwbTable/FwbTable.vue'
+export { default as FwbTableBody } from './components/FwbTable/FwbTableBody.vue'
+export { default as FwbTableCell } from './components/FwbTable/FwbTableCell.vue'
+export { default as FwbTableHead } from './components/FwbTable/FwbTableHead.vue'
+export { default as FwbTableHeadCell } from './components/FwbTable/FwbTableHeadCell.vue'
+export { default as FwbTableRow } from './components/FwbTable/FwbTableRow.vue'
+export { default as FwbTab } from './components/FwbTabs/FwbTab.vue'
+export { default as FwbTabs } from './components/FwbTabs/FwbTabs.vue'
+export { default as FwbTimeline } from './components/FwbTimeline/FwbTimeline.vue'
+export { default as FwbTimelineBody } from './components/FwbTimeline/FwbTimelineBody.vue'
+export { default as FwbTimelineContent } from './components/FwbTimeline/FwbTimelineContent.vue'
+export { default as FwbTimelineItem } from './components/FwbTimeline/FwbTimelineItem.vue'
+export { default as FwbTimelinePoint } from './components/FwbTimeline/FwbTimelinePoint.vue'
+export { default as FwbTimelineTime } from './components/FwbTimeline/FwbTimelineTime.vue'
+export { default as FwbTimelineTitle } from './components/FwbTimeline/FwbTimelineTitle.vue'
+export { default as FwbToast } from './components/FwbToast/FwbToast.vue'
+export { default as FwbToastProvider } from './components/FwbToast/FwbToastProvider.vue'
+export { default as FwbTooltip } from './components/FwbTooltip/FwbTooltip.vue'
 
-export { default as Toggle } from './components/Toggle/Toggle.vue'
+// Form
+export { default as FwbCheckbox } from './components/FwbCheckbox/FwbCheckbox.vue'
+export { default as FwbFileInput } from './components/FwbFileInput/FwbFileInput.vue'
+export { default as FwbInput } from './components/FwbInput/FwbInput.vue'
+export { default as FwbRadio } from './components/FwbRadio/FwbRadio.vue'
+export { default as FwbRange } from './components/FwbRange/FwbRange.vue'
+export { default as FwbSelect } from './components/FwbSelect/FwbSelect.vue'
+export { default as FwbTextarea } from './components/FwbTextarea/FwbTextarea.vue'
+export { default as FwbToggle } from './components/FwbToggle/FwbToggle.vue'
 
-export { default as Range } from './components/Range/Range.vue'
+// Typography
+export { default as FwbA } from './components/Typography/FwbA.vue'
+export { default as FwbHeading } from './components/Typography/FwbHeading.vue'
+export { default as FwbImg } from './components/Typography/FwbImg.vue'
+export { default as FwbP } from './components/Typography/FwbP.vue'
 
-export { default as Radio } from './components/Radio/Radio.vue'
-
-export { default as FileInput } from './components/FileInput/FileInput.vue'
-
-export { default as Heading } from './components/Typography/Heading.vue'
-export { default as A } from './components/Typography/A.vue'
-export { default as P } from './components/Typography/P.vue'
-export { default as Img } from './components/Typography/Img.vue'
+// utilities
+export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/FlowbiteThemableChild.vue'
+export { default as FwbSlotListener } from './components/utils/FwbSlotListener/FwbSlotListener.vue'
 
 export * from './composables'
diff --git a/src/utils/flatten.ts b/src/utils/flatten.ts
index 268b4607..757416c2 100644
--- a/src/utils/flatten.ts
+++ b/src/utils/flatten.ts
@@ -1,33 +1,43 @@
-import { Fragment, createTextVNode, Comment } from 'vue'
-import type { VNodeChild, VNode } from 'vue'
+import { Comment, createTextVNode, Fragment, type VNode, type VNodeChild } from 'vue'
 
 // o(n) flatten
 export function flatten (
-    vNodes: VNodeChild[],
-    filterCommentNode = true,
-    result: VNode[] = [],
+  vNodes: VNodeChild[],
+  filterCommentNode = true,
+  result: VNode[] = [],
 ): VNode[] {
-    vNodes.forEach((vNode) => {
-        if (vNode === null) return
-        if (typeof vNode !== 'object') {
-            if (typeof vNode === 'string' || typeof vNode === 'number') {
-                result.push(createTextVNode(String(vNode)))
-            }
-            return
-        }
-        if (Array.isArray(vNode)) {
-            flatten(vNode, filterCommentNode, result)
-            return
-        }
-        if (vNode.type === Fragment) {
-            if (vNode.children === null) return
-            if (Array.isArray(vNode.children)) {
-                flatten(vNode.children, filterCommentNode, result)
-            }
-            // rawSlot
-        } else if (vNode.type !== Comment) {
-            result.push(vNode)
-        }
-    })
-    return result
-}
\ No newline at end of file
+  vNodes.forEach((vNode) => {
+    if (vNode === null) {
+      return
+    }
+
+    if (typeof vNode !== 'object') {
+      if (typeof vNode === 'string' || typeof vNode === 'number') {
+        result.push(createTextVNode(String(vNode)))
+      }
+
+      return
+    }
+
+    if (Array.isArray(vNode)) {
+      flatten(vNode, filterCommentNode, result)
+
+      return
+    }
+
+    if (vNode.type === Fragment) {
+      if (vNode.children === null) {
+        return
+      }
+
+      if (Array.isArray(vNode.children)) {
+        flatten(vNode.children, filterCommentNode, result)
+      }
+      // rawSlot
+    } else if (vNode.type !== Comment) {
+      result.push(vNode)
+    }
+  })
+
+  return result
+}
diff --git a/src/utils/getFirstSlotNode.ts b/src/utils/getFirstSlotNode.ts
index b8ef760d..d3b36b8a 100644
--- a/src/utils/getFirstSlotNode.ts
+++ b/src/utils/getFirstSlotNode.ts
@@ -4,21 +4,21 @@ import { flatten } from './flatten'
 // ref: https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx
 
 export function getFirstSlotVNode (
-    slots: Slots,
-    slotName = 'default',
-    props: unknown = undefined,
+  slots: Slots,
+  slotName = 'default',
+  props: unknown = undefined,
 ): VNode | null {
-    const slot = slots[slotName]
-    if (!slot) {
-        console.warn('getFirstSlotVNode', `slot[${slotName}] is empty`)
-        return null
-    }
-    const slotContent = flatten(slot(props))
-    // vue will normalize the slot, so slot must be an array
-    if (slotContent.length === 1) {
-        return slotContent[0]
-    } else {
-        console.warn('getFirstSlotVNode', `slot[${slotName}] should have exactly one child`)
-        return null
-    }
+  const slot = slots[slotName]
+  if (!slot) {
+    console.warn('getFirstSlotVNode', `slot[${slotName}] is empty`)
+    return null
+  }
+  const slotContent = flatten(slot(props))
+  // vue will normalize the slot, so slot must be an array
+  if (slotContent.length === 1) {
+    return slotContent[0]
+  } else {
+    console.warn('getFirstSlotVNode', `slot[${slotName}] should have exactly one child`)
+    return null
+  }
 }
diff --git a/src/utils/simplifyTailwindClasses.ts b/src/utils/simplifyTailwindClasses.ts
index 5a742088..bdecf6ee 100644
--- a/src/utils/simplifyTailwindClasses.ts
+++ b/src/utils/simplifyTailwindClasses.ts
@@ -5,48 +5,46 @@
 export type TailwindClassMatcherMap = Record<string, (c: string) => string>
 
 const classTypeMatchers: TailwindClassMatcherMap = {
-    border: (_class: string): string => {
-      return _class.substring(0, _class.lastIndexOf('-')) // for splitting border-b-2 and border-red
-    },
+  border: (_class: string): string => {
+    return _class.substring(0, _class.lastIndexOf('-')) // for splitting border-b-2 and border-red
+  },
 }
 
 const getTypeFromClass = (_class: string, matchers: TailwindClassMatcherMap = classTypeMatchers) => {
-    const classesToMatch = Object.keys(matchers)
-    const matchClass = classesToMatch.find(_matchClass => _class.includes(_matchClass)) // TODO: maybe need to filter instead of find
-    if(!matchClass) return _class.substring(0, _class.indexOf('-'))
+  const classesToMatch = Object.keys(matchers)
+  const matchClass = classesToMatch.find(_matchClass => _class.includes(_matchClass)) // TODO: maybe need to filter instead of find
+  if (!matchClass) return _class.substring(0, _class.indexOf('-'))
 
-    return matchers[matchClass as keyof typeof matchers](_class)
+  return matchers[matchClass as keyof typeof matchers](_class)
 }
 
-export function simplifyTailwindClasses(...classes: (string | string[])[]): string {
-    return classes.filter(_ => _).reduce((acc: { types: string[], classes: string[] }, value: string | string[]) => {
-        const currentClasses = Array.isArray(value)
-            ? Array.from(value).map(_ => _.split(' ')).flat() // to support args like ['text-white background-red', 'flex'] etc.
-            : value.split(' ')
-        const currentTypes = currentClasses.map(_class => getTypeFromClass(_class))
-
-        const typesToAdd = currentTypes.filter(_ => !acc.types.includes(_))
-        const typesToReplace = currentTypes.filter(_ => acc.types.includes(_))
-        const newTypes = [...typesToReplace, ...typesToAdd]
-
-        const types = [...new Set([...acc.types, ...newTypes])]
-        const classes = types.map(type => {
-            if(newTypes.includes(type)) {
-                const classIndex = currentTypes.indexOf(type)
-                if(classIndex >= 0)
-                    return currentClasses[classIndex] || ''
-            }
-            const classIndex = acc.types.indexOf(type)
-            if(classIndex >= 0)
-                return acc.classes[classIndex] || ''
-            return ''
-        }).filter(_ => !!_)
-
-        return {
-            types,
-            classes,
-        }
-    }, { types: [], classes: [] }).classes.join(' ')
+export function simplifyTailwindClasses (...classes: (string | string[])[]): string {
+  return classes.filter(_ => _).reduce((acc: { types: string[], classes: string[] }, value: string | string[]) => {
+    const currentClasses = Array.isArray(value)
+      ? Array.from(value).map(_ => _.split(' ')).flat() // to support args like ['text-white background-red', 'flex'] etc.
+      : value.split(' ')
+    const currentTypes = currentClasses.map(_class => getTypeFromClass(_class))
+
+    const typesToAdd = currentTypes.filter(_ => !acc.types.includes(_))
+    const typesToReplace = currentTypes.filter(_ => acc.types.includes(_))
+    const newTypes = [...typesToReplace, ...typesToAdd]
+
+    const types = [...new Set([...acc.types, ...newTypes])]
+    const classes = types.map(type => {
+      if (newTypes.includes(type)) {
+        const classIndex = currentTypes.indexOf(type)
+        if (classIndex >= 0) { return currentClasses[classIndex] || '' }
+      }
+      const classIndex = acc.types.indexOf(type)
+      if (classIndex >= 0) { return acc.classes[classIndex] || '' }
+      return ''
+    }).filter(_ => !!_)
+
+    return {
+      types,
+      classes,
+    }
+  }, { types: [], classes: [] }).classes.join(' ')
 }
 
-// simplifyClasses('dark:background-red-600 background-red text-400-black', 'dark:background-blue', 'text-600-white', 'dark:background-red-600')
\ No newline at end of file
+// simplifyClasses('dark:background-red-600 background-red text-400-black', 'dark:background-blue', 'text-600-white', 'dark:background-red-600')
diff --git a/vitest.config.ts b/vitest.config.ts
index 37f32aff..4f786fd2 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -2,11 +2,11 @@ import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
-    plugins: [
-        vue(),
-    ],
-    test: {
-        globals: true,
-        environment: 'jsdom',
-    },
-})
\ No newline at end of file
+  plugins: [
+    vue(),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+})