Merge branch 'main' into main

2022-12-06 11:31:39 +03:00
parent c3472bbd81 19d4414515
commit 3a7d67a553
75 changed files with 7759 additions and 1043 deletions
--- a/.node-version
+++ b/.node-version
@@ -0,0 +1 @@
+16.6.2
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2022 Themesberg (Crafty Dwarf LLC) company@themesberg.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -84,8 +84,8 @@ module.exports = {
 <table>
  <tr>
    <td width="33.3333%">Alerts</td>
-    <td width="33.3333%">:construction: Badge</td>
-    <td width="33.3333%">:construction: Breadcrumbs</td>
+    <td width="33.3333%">Badge</td>
+    <td width="33.3333%">Breadcrumbs</td>
  </tr>
  <tr>
    <td width="33.3333%">
@@ -94,12 +94,12 @@ module.exports = {
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/badges/">
+        <a href="https://flowbite-vue.com/components/badge/badge.html">
            <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/breadcrumb/">
+        <a href="https://flowbite-vue.com/components/breadcrumb/breadcrumb.html">
            <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
        </a>
    </td>
@@ -107,7 +107,7 @@ module.exports = {
  <tr>
    <td width="33.3333%">Buttons</td>
    <td width="33.3333%">Button group</td>
-    <td width="33.3333%">:construction: Cards</td>
+    <td width="33.3333%">Cards</td>
  </tr>
  <tr>
    <td width="33.3333%">
@@ -121,7 +121,7 @@ module.exports = {
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/card/">
+        <a href="https://flowbite-vue.com/components/card/card.html">
            <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
        </a>
    </td>
@@ -138,7 +138,7 @@ module.exports = {
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/forms/">
+        <a href="https://flowbite-vue.com/components/input/input.html">
            <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
        </a>
    </td>
@@ -150,7 +150,7 @@ module.exports = {
  </tr>
  <tr>
    <td width="33.3333%">:construction: Typography</td>
-    <td width="33.3333%">:construction: Modal</td>
+    <td width="33.3333%">Modal</td>
    <td width="33.3333%">Tabs</td>
  </tr>
  <tr>
@@ -160,7 +160,7 @@ module.exports = {
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/modal/">
+        <a href="https://flowbite-vue.com/components/modal/modal.html">
            <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
        </a>
    </td>
@@ -171,40 +171,40 @@ module.exports = {
    </td>
  </tr>
  <tr>
-    <td width="33.3333%">:construction: Navbar</td>
+    <td width="33.3333%">Navbar</td>
    <td width="33.3333%">:construction: Pagination</td>
    <td width="33.3333%">:construction: Timeline</td>
  </tr>
  <tr>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/navbars/">
+        <a href="https://flowbite-vue.com/components/navbar/navbar.html">
            <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/pagination/">
+        <a href="https://flowbite-vue.com/components/pagination/pagination.html">
            <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/timeline/">
+        <a href="https://flowbite-vue.com/components/timeline/timeline.html">
            <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
        </a>
    </td>
  </tr>
  <tr>
-    <td width="33.3333%">:construction: Progress bar</td>
+    <td width="33.3333%">Progress bar</td>
    <td width="33.3333%">:construction: Tables</td>
    <td width="33.3333%">Toast</td>
  </tr>
  <tr>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/progress/">
+        <a href="https://flowbite-vue.com/components/progress/progress.html">
            <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/tables/">
+        <a href="https://flowbite-vue.com/components/table/table.html">
            <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
        </a>
    </td>
@@ -215,13 +215,13 @@ module.exports = {
    </td>
  </tr>
  <tr>
-    <td width="33.3333%">:construction: Tooltips</td>
+    <td width="33.3333%">Tooltips</td>
    <td width="33.3333%">:construction: Datepicker</td>
    <td width="33.3333%">Spinner</td>
  </tr>
  <tr>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/tooltips/">
+        <a href="https://flowbite-vue.com/components/tooltip/tooltip.html">
            <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
        </a>
    </td>
@@ -243,39 +243,39 @@ module.exports = {
  </tr>
  <tr>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/footer/">
+        <a href="https://flowbite-vue.com/components/footer/footer.html">
            <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/accordion/">
+        <a href="https://flowbite-vue.com/components/accordion/accordion.html">
            <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/sidebar/">
+        <a href="https://flowbite-vue.com/components/sidebar/sidebar.html">
            <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">:construction: Carousel</td>
-    <td width="33.3333%">:construction: Avatar</td>
+    <td width="33.3333%">Avatar</td>
    <td width="33.3333%">:construction: Rating</td>
  </tr>
  <tr>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/carousel/">
+        <a href="https://flowbite-vue.com/components/carousel/carousel.html">
            <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/avatar/">
+        <a href="https://flowbite-vue.com/components/avatar/avatar.html">
            <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
        </a>
    </td>
    <td width="33.3333%">
-        <a href="https://flowbite-react.com/rating/">
+        <a href="https://flowbite-vue.com/components/rating/rating.html">
            <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
        </a>
    </td>
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -40,25 +40,25 @@ function getComponents() {
    { text: 'Button', link: '/components/button/button.md' },
    { text: 'Badge', link: 'components/badge/badge.md' },
    { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
+    { text: 'Card', link: 'components/card/card.md' },
    { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
+    { text: 'Progress', link: 'components/progress/progress.md' },
    { text: 'Spinner', link: '/components/spinner/spinner.md' },
    { text: 'Tabs', link: '/components/tabs/tabs.md' },
    { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
    { text: 'Toast', link: 'components/toast/toast.md' },
+    { text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
+    { text: 'Modal', link: 'components/modal/modal.md' },
+    { text: 'Navbar', link: 'components/navbar/navbar.md' },

    { text: '- Accordion', link: 'components/accordion/accordion.md' },
-    { text: '- Card', link: 'components/card/card.md' },
    { text: '- Carousel', link: 'components/carousel/carousel.md' },
    { text: '- Footer', link: 'components/footer/footer.md' },
-    { text: '- Modal', link: 'components/modal/modal.md' },
-    { text: '- Navbar', link: 'components/navbar/navbar.md' },
    { text: '- Pagination', link: 'components/pagination/pagination.md' },
-    { text: '- Progress', link: 'components/progress/progress.md' },
    { text: '- Rating', link: 'components/rating/rating.md' },
    { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
    { text: '- Table', link: 'components/table/table.md' },
    { text: '- Timeline', link: 'components/timeline/timeline.md' },
-    { text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
  ]
 }

@@ -95,7 +95,7 @@ export default defineConfig({

    footer: {
      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2022 themesberg'
+      copyright: 'Copyright © 2022 Flowbite™'
    },

  },
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -1,7 +1,7 @@
 <script setup>
 import AccordionExample from './examples/AccordionExample.vue'
 </script>
-# Accordion
+# Vue Accordion Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/alert/alert.md
+++ b/docs/components/alert/alert.md
@@ -7,7 +7,7 @@ import AlertIconExample from './examples/AlertIconExample.vue';
 import AlertInlineExample from './examples/AlertInlineExample.vue';
 </script>

-# Alert
+# Vue Alert Component - Flowbite

 #### Show contextual information to your users using alert elements based on Tailwind CSS

--- a/docs/components/avatar/avatar.md
+++ b/docs/components/avatar/avatar.md
@@ -10,7 +10,7 @@ import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
 import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'

 </script>
-# Avatar
+# Vue Avatar Component - 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

 ## Default avatar
--- a/docs/components/badge/badge.md
+++ b/docs/components/badge/badge.md
@@ -5,7 +5,7 @@ import BadgeLinksExample from './examples/BadgeLinksExample.vue'
 import BadgeIconsExample from './examples/BadgeIconsExample.vue'
 import BadgeOnlyIconsExample from './examples/BadgeOnlyIconsExample.vue'
 </script>
-# Badge
+# Vue Badge Component - Flowbite

 #### Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
 ---
--- a/docs/components/breadcrumb/breadcrumb.md
+++ b/docs/components/breadcrumb/breadcrumb.md
@@ -3,7 +3,7 @@ import BreadcrumbExample from './examples/BreadcrumbExample.vue'
 import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
 import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
 </script>
-# Breadcrumb
+# Vue Breadcrumb Component - Flowbite
 The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.

 Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
--- a/docs/components/button/button.md
+++ b/docs/components/button/button.md
@@ -15,7 +15,7 @@ import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
 import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
 </script>

-# Button
+# Vue Button Component - Flowbite

 #### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows

@@ -412,7 +412,7 @@ import { Button } from 'flowbite-vue'
 <template>
  <Button color="default">
    <template #prefix>
-      <svg class="w-5 h-5 mr-2 -ml-1" 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="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>
    </template>
    Buy
  </Button>
@@ -431,7 +431,7 @@ import { Button } from 'flowbite-vue'
  <Button color="default">
    Choose plan
    <template #suffix>
-      <svg class="w-5 h-5 ml-2 -mr-1" 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="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>
    </template>
  </Button>
 </template>
--- a/docs/components/buttonGroup/buttonGroup.md
+++ b/docs/components/buttonGroup/buttonGroup.md
@@ -3,7 +3,7 @@ import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
 import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
 </script>

-# Button Group
+# Vue Button Group Component - Flowbite

 #### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line

--- a/docs/components/card/card.md
+++ b/docs/components/card/card.md
@@ -1,15 +1,70 @@
 <script setup>
-import CardExample from './examples/CardExample.vue'
+import CardDefaultExample from './examples/CardDefaultExample.vue'
+import CardImageExample from './examples/CardImageExample.vue'
+import CardHorizontalExample from './examples/CardHorizontalExample.vue'
 </script>
-# Card
+# Vue Card Components - Flowbite
+
+#### Get started with a large variety of Tailwind CSS card examples for your web project
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/card/](https://flowbite.com/docs/components/card/)
+:::
+
+Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
+
+## Prop - default
+
+<CardDefaultExample />

 ```vue
 <script setup>
-import { Card } from 'flowbite-vue'
+import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <Card></Card>
+  <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>
 </template>
 ```

-<CardExample />
+## Prop - image
+
+<CardImageExample />
+
+```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>
+</template>
+```
+
+## Prop - horizontal
+
+<CardHorizontalExample />
+
+```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>
+</template>
+```
--- a/docs/components/card/examples/CardDefaultExample.vue
+++ b/docs/components/card/examples/CardDefaultExample.vue
@@ -0,0 +1,12 @@
+<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>
--- a/docs/components/card/examples/CardExample.vue
+++ b/docs/components/card/examples/CardExample.vue
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Card></Card>
-  </div>
-</template>
-<script setup>
-import { Card } from '../../../../src/index'
-</script>
--- a/docs/components/card/examples/CardHorizontalExample.vue
+++ b/docs/components/card/examples/CardHorizontalExample.vue
@@ -0,0 +1,11 @@
+<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>
--- a/docs/components/card/examples/CardImageExample.vue
+++ b/docs/components/card/examples/CardImageExample.vue
@@ -0,0 +1,11 @@
+<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>
--- a/docs/components/carousel/carousel.md
+++ b/docs/components/carousel/carousel.md
@@ -1,7 +1,7 @@
 <script setup>
 import CarouselExample from './examples/CarouselExample.vue'
 </script>
-# Carousel
+# Vue Carousel Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/dropdown/dropdown.md
+++ b/docs/components/dropdown/dropdown.md
@@ -4,7 +4,7 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
 import DropdownTriggerExample from './examples/DropdownTriggerExample.vue';
 </script>

-# Dropdown
+# Vue Dropdown Component - Flowbite

 #### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements

@@ -32,7 +32,7 @@ import { Dropdown } from 'flowbite-vue'
      <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>
+          <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>
--- a/docs/components/flowbiteThemable/flowbiteThemable.md
+++ b/docs/components/flowbiteThemable/flowbiteThemable.md
@@ -6,7 +6,7 @@ import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemabl
 import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
 </script>

-# Flowbite Themable
+# Vue Themable Configuration - Flowbite

 You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)

--- a/docs/components/footer/footer.md
+++ b/docs/components/footer/footer.md
@@ -1,7 +1,7 @@
 <script setup>
 import FooterExample from './examples/FooterExample.vue'
 </script>
-# Footer
+# Vue Footer Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/input/input.md
+++ b/docs/components/input/input.md
@@ -7,7 +7,7 @@ import InputPrefixExample from './examples/InputPrefixExample.vue';
 import InputSuffixExample from './examples/InputSuffixExample.vue'
 </script>

-# Input
+# Vue Input Components - Flowbite

 #### Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types

--- a/docs/components/listGroup/listGroup.md
+++ b/docs/components/listGroup/listGroup.md
@@ -5,7 +5,7 @@ import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
 import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
 </script>

-# ListGroup
+# Vue List Group Component - Flowbite

 #### Use the list group component to display a series of items, buttons or links inside a single element

--- a/docs/components/modal/examples/ModalExample.vue
+++ b/docs/components/modal/examples/ModalExample.vue
@@ -1,8 +1,74 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Modal></Modal>
+  <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">
+      {{ triggerText }}
+    </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>
  </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 import { Modal } from '../../../../src/index'
+import type { PropType } from 'vue'
+import type { ModalSize, ModalPosition } from '../../../../src/components/Modal/types'
+import { ref } from 'vue'
+
+defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  popup: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String as PropType<ModalPosition>,
+    default: 'center',
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<ModalSize>,
+    default: '2xl',
+  },
+  triggerText: {
+    type: String,
+    default: 'Demo Modal',
+  },
+})
+const isShowModal = ref(false)
+function closeModal() {
+  isShowModal.value = false
+}
+function showModal() {
+  isShowModal.value = true
+}
 </script>
--- a/docs/components/modal/examples/ModalSizeExample.vue
+++ b/docs/components/modal/examples/ModalSizeExample.vue
@@ -0,0 +1,19 @@
+<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>
--- a/docs/components/modal/modal.md
+++ b/docs/components/modal/modal.md
@@ -1,15 +1,84 @@
 <script setup>
-import ModalExample from './examples/ModalExample.vue'
+import ModalExample from './examples/ModalExample.vue';
+import ModalSizeExample from './examples/ModalSizeExample.vue';
 </script>
-# Modal
+# Vue Modal Component - Flowbite
+
+## Demo
+
+<ModalExample />
+
+```vue
+<script setup>
+import { Modal } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const isShowModal = ref(false)
+function closeModal() {
+  isShowModal.value = false
+}
+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="xs" v-if="isShowModal">
+      <template #header>
+        <div class="flex justify-between">
+          <div class="flex items-center text-lg">
+            Terms of Service
+          </div>
+          <div>
+            <button @click="closeModal" 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">
+              <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>
+        </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>
+```
+
+## Sizes
+
+You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.
+
+`xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`
+
+The default value is: `2xl`
+
+Demo:
+<ModalSizeExample/>

 ```vue
 <script setup>
 import { Modal } from 'flowbite-vue'
 </script>
 <template>
-  <Modal></Modal>
+    <Modal size="xs" />
+    <Modal size="md" />
+    <Modal size="xl" />
+    <Modal size="5xl" />
 </template>
 ```
-
-<ModalExample />
--- a/docs/components/navbar/examples/NavbarActionButtonExample.vue
+++ b/docs/components/navbar/examples/NavbarActionButtonExample.vue
@@ -0,0 +1,25 @@
+<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>
--- a/docs/components/navbar/examples/NavbarCustomMobileIconExample.vue
+++ b/docs/components/navbar/examples/NavbarCustomMobileIconExample.vue
@@ -0,0 +1,25 @@
+<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>
--- a/docs/components/navbar/examples/NavbarExample.vue
+++ b/docs/components/navbar/examples/NavbarExample.vue
@@ -1,8 +1,22 @@
 <template>
  <div class="vp-raw flex flex-col">
-    <Navbar></Navbar>
+    <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 } from '../../../../src/index'
+import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
 </script>
--- a/docs/components/navbar/examples/NavbarSolidExample.vue
+++ b/docs/components/navbar/examples/NavbarSolidExample.vue
@@ -0,0 +1,22 @@
+<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>
--- a/docs/components/navbar/navbar.md
+++ b/docs/components/navbar/navbar.md
@@ -1,15 +1,119 @@
 <script setup>
 import NavbarExample from './examples/NavbarExample.vue'
+import NavbarSolidExample from './examples/NavbarSolidExample.vue'
+import NavbarActionButtonExample from './examples/NavbarActionButtonExample.vue'
+import NavbarCustomMobileIconExample from './examples/NavbarCustomMobileIconExample.vue'
+
 </script>
-# Navbar
+# Navbar Component – Flowbite
+The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns
+
+## Default navbar

 ```vue
 <script setup>
-import { Navbar } from 'flowbite-vue'
+import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
 </script>
 <template>
-  <Navbar></Navbar>
+    <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>
 </template>
 ```

 <NavbarExample />
+
+## Solid navbar
+```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>
+</template>
+```
+
+<NavbarSolidExample />
+
+## Navbar with 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>
+</template>
+```
+
+<NavbarActionButtonExample />
+
+## Navbar with 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>
+</template>
+```
+<NavbarCustomMobileIconExample />
--- a/docs/components/pagination/pagination.md
+++ b/docs/components/pagination/pagination.md
@@ -1,7 +1,7 @@
 <script setup>
 import PaginationExample from './examples/PaginationExample.vue'
 </script>
-# Pagination
+# Vue Pagination Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/progress/examples/ProgressColorExample.vue
+++ b/docs/components/progress/examples/ProgressColorExample.vue
@@ -0,0 +1,15 @@
+<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>
--- a/docs/components/progress/examples/ProgressExample.vue
+++ b/docs/components/progress/examples/ProgressExample.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="vp-raw flex flex-col">
-    <Progress></Progress>
+    <Progress progress="45"></Progress>
  </div>
 </template>
 <script setup>
--- a/docs/components/progress/examples/ProgressInsideLabelExample.vue
+++ b/docs/components/progress/examples/ProgressInsideLabelExample.vue
@@ -0,0 +1,6 @@
+<template>
+  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>
--- a/docs/components/progress/examples/ProgressOutsideLabelExample.vue
+++ b/docs/components/progress/examples/ProgressOutsideLabelExample.vue
@@ -0,0 +1,6 @@
+<template>
+  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>
--- a/docs/components/progress/examples/ProgressSizeExample.vue
+++ b/docs/components/progress/examples/ProgressSizeExample.vue
@@ -0,0 +1,11 @@
+<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>
--- a/docs/components/progress/progress.md
+++ b/docs/components/progress/progress.md
@@ -1,15 +1,102 @@
 <script setup>
 import ProgressExample from './examples/ProgressExample.vue'
+import ProgressSizeExample from './examples/ProgressSizeExample.vue'
+import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
+import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
+import ProgressColorExample from './examples/ProgressColorExample.vue'
+
+
 </script>
-# Progress
+# Vue Progress Bar Component - Flowbite
+
+## Default

 ```vue
 <script setup>
 import { Progress } from 'flowbite-vue'
 </script>
 <template>
-  <Progress></Progress>
+  <Progress progress="45"></Progress>
 </template>
 ```

 <ProgressExample />
+
+## Sizes
+You can also use different sizes by using various sizing.
+
+```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>
+</template>
+```
+
+<ProgressSizeExample />
+
+## With label inside
+Here is an example of using a progress bar with the label inside the bar.
+
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
+</template>
+```
+
+<ProgressInsideLabelExample />
+
+## With label outside
+And this is an example of using a progress bar outside the bar.
+
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+</template>
+```
+
+<ProgressOutsideLabelExample />
+
+## Colors
+You can also apply 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>
+
+</template>
+```
+
+<ProgressColorExample />
--- a/docs/components/rating/rating.md
+++ b/docs/components/rating/rating.md
@@ -1,7 +1,7 @@
 <script setup>
 import RatingExample from './examples/RatingExample.vue'
 </script>
-# Rating
+# Vue Rating Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/sidebar/sidebar.md
+++ b/docs/components/sidebar/sidebar.md
@@ -1,7 +1,7 @@
 <script setup>
 import SidebarExample from './examples/SidebarExample.vue'
 </script>
-# Sidebar
+# Vue Sidebar Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/spinner/spinner.md
+++ b/docs/components/spinner/spinner.md
@@ -4,7 +4,7 @@ import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
 import SpinnerColorExample from './examples/SpinnerColorExample.vue';
 </script>

-# Spinner
+# Vue Spinner Component - Flowbite

 #### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS

--- a/docs/components/table/table.md
+++ b/docs/components/table/table.md
@@ -1,7 +1,7 @@
 <script setup>
 import TableExample from './examples/TableExample.vue'
 </script>
-# Table
+# Vue Table Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/tabs/tabs.md
+++ b/docs/components/tabs/tabs.md
@@ -4,7 +4,7 @@ import TabsPillsExample from './examples/TabsPillsExample.vue';
 import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
 </script>

-# Tabs
+# Vue Tabs Component - Flowbite

 #### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

--- a/docs/components/timeline/timeline.md
+++ b/docs/components/timeline/timeline.md
@@ -1,7 +1,7 @@
 <script setup>
 import TimelineExample from './examples/TimelineExample.vue'
 </script>
-# Timeline
+# Vue Timeline Component - Flowbite

 ```vue
 <script setup>
--- a/docs/components/toast/toast.md
+++ b/docs/components/toast/toast.md
@@ -6,7 +6,7 @@ import ToastDivideExample from './examples/ToastDivideExample.vue';
 import ToastMessageExample from './examples/ToastMessageExample.vue';
 import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
 </script>
-# Toast
+# Vue Toast Component - Flowbite

 #### Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions

--- a/docs/components/toastProvider/toastProvider.md
+++ b/docs/components/toastProvider/toastProvider.md
@@ -1,6 +1,6 @@
 <script setup>
 import ToastProviderExample from './examples/ToastProviderExample.vue';
 </script>
-# Toast provider
+# Vue Toast Provider - Flowbite

 <ToastProviderExample />
--- a/docs/components/tooltip/examples/TooltipExample.vue
+++ b/docs/components/tooltip/examples/TooltipExample.vue
@@ -1,8 +1,19 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Tooltip></Tooltip>
-  </div>
+  <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'
+  import { Tooltip } from '../../../../src/index'
 </script>
--- a/docs/components/tooltip/examples/TooltipPositionExample.vue
+++ b/docs/components/tooltip/examples/TooltipPositionExample.vue
@@ -0,0 +1,64 @@
+<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>
--- a/docs/components/tooltip/examples/TooltipStyleExample.vue
+++ b/docs/components/tooltip/examples/TooltipStyleExample.vue
@@ -0,0 +1,36 @@
+<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>
--- a/docs/components/tooltip/examples/TooltipTriggerExample.vue
+++ b/docs/components/tooltip/examples/TooltipTriggerExample.vue
@@ -0,0 +1,49 @@
+<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'
+
+const props = defineProps({
+placement: {
+  type: String as PropType<TooltipPlacement>,
+  default: 'top',
+},
+arrowColor: {
+    type: String,
+    default: '#0f172a',
+},
+})
+</script>
--- a/docs/components/tooltip/tooltip.md
+++ b/docs/components/tooltip/tooltip.md
@@ -1,15 +1,199 @@
 <script setup>
 import TooltipExample from './examples/TooltipExample.vue'
+import TooltipPositionExample from './examples/TooltipPositionExample.vue'
+import TooltipStyleExample from './examples/TooltipStyleExample.vue'
+import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
 </script>
-# Tooltip
+# Vue Tooltip Component - Flowbite
+
+## Demo
+
+<TooltipExample></TooltipExample>

 ```vue
 <script setup>
 import { Tooltip } from 'flowbite-vue'
 </script>
+
 <template>
-  <Tooltip></Tooltip>
+  <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>
 ```

-<TooltipExample />
+## 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 />
+
+```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>
+</template>
+```
+
+## Placement
+
+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 />
+
+```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>
+</template>
+```
+
+
+
+## triggerType
+
+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 />
+
+```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>
+</template>
+```
--- a/docs/index.md
+++ b/docs/index.md
@@ -6,7 +6,7 @@ titleTemplate: Flowbite

 hero:
  name: Flowbite Vue 3
-  text: Tailwind CSS Vue based component library
+  text: Vue component library based on Tailwind CSS
  tagline: Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS
  actions:
    - theme: brand
@@ -15,4 +15,14 @@ hero:
    - theme: alt
      text: View on GitHub
      link: https://github.com/themesberg/flowbite-vue
+
+features:
+  - title: Vue 3 components 🧱
+    details: Use hundreds of open-source components such as navbars, modals, and dropdowns based on Vue 3 and Tailwind CSS.
+  - title: Based on Tailwind CSS 💨
+    details: The components are based on the utility classes from Tailwind CSS and you can use them to further customize the interface.
+  - title: Powered by Flowbite 🚀
+    details: The Flowbite Vue library is based on the original Flowbite component library using vanilla JavaScript.
+  - title: Open-source community ❤️
+    details: Thousands of developers actively use the components from Flowbite Vue to power their applications.
 ---
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "flowbite-vue",
-  "version": "0.0.5",
+  "version": "0.0.9",
  "repository": "https://github.com/themesberg/flowbite-vue.git",
  "author": "themesberg",
  "license": "MIT",
@@ -15,6 +15,10 @@
    ".": {
      "import": "./dist/flowbite-vue.mjs",
      "require": "./dist/flowbite-vue.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
    }
  },
  "scripts": {
@@ -32,39 +36,43 @@
    "typecheck": "vue-tsc --noEmit"
  },
  "peerDependencies": {
-    "vue": "^3",
-    "tailwindcss": "^3"
+    "tailwindcss": "^3",
+    "vue": "^3.2.41"
  },
  "devDependencies": {
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.30.0",
-    "@typescript-eslint/parser": "^5.30.0",
-    "@vitejs/plugin-vue": "^3.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.11.3",
-    "class-names": "^1.0.0",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^9.1.1",
-    "flowbite": "^1.4.2",
-    "jsdom": "^20.0.0",
-    "lodash": "^4.17.21",
-    "postcss": "^8.4.14",
-    "postcss-prefix-selector": "^1.16.0",
-    "prettier": "^2.3.2",
-    "tailwindcss": "^3",
-    "tsc-alias": "^1.7.0",
-    "typescript": "^4.7.3",
-    "vite": "^3.1.3",
-    "vitest": "^0.16.0",
-    "vue-eslint-parser": "^9.0.3",
-    "vue-tsc": "^0.30.0"
+    "@types/lodash-es": "4.17.6",
+    "@types/node": "18.11.9",
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "5.43.0",
+    "@vitejs/plugin-vue": "3.2.0",
+    "@vue/test-utils": "2.2.4",
+    "@vue/tsconfig": "0.1.3",
+    "c8": "7.12.0",
+    "eslint": "8.28.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-vue": "9.7.0",
+    "jsdom": "20.0.3",
+    "postcss": "8.4.19",
+    "postcss-prefix-selector": "1.16.0",
+    "prettier": "2.7.1",
+    "tsc-alias": "1.7.1",
+    "typescript": "4.7.3",
+    "vite": "3.2.5",
+    "vitepress": "1.0.0-alpha.30",
+    "vitest": "0.25.2",
+    "vue-eslint-parser": "9.1.0",
+    "vue-tsc": "0.30.0"
  },
  "dependencies": {
-    "@vueuse/core": "^8.9.1",
-    "vitepress": "^1.0.0-alpha.4"
+    "floating-vue": "^2.0.0-beta.20",
+    "@vueuse/core": "9.3.0",
+    "classnames": "2.3.2",
+    "flowbite": "1.5.4",
+    "lodash-es": "4.17.21",
+    "tailwindcss": "3.2.4"
+  },
+  "engines": {
+    "node": "14.x",
+    "npm": "8.x"
  }
 }
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -28,7 +28,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useAlertClasses } from './composables/useAlertClasses'
-import { onBeforeUnmount, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import type { AlertType } from './types'


@@ -66,8 +66,4 @@ const visible = ref(true)
 const onCloseClick = () => {
  visible.value = false
 }
-
-onBeforeUnmount(() => {
-  console.log('UNMOUNTED')
-})
 </script>
--- a/src/components/Avatar/composables/useAvatarClasses.ts
+++ b/src/components/Avatar/composables/useAvatarClasses.ts
@@ -65,7 +65,6 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
 } {

    const avatarClasses = computed<string>(() => {
-        console.log('border', props.bordered.value)
        return classNames(
            avatarSizeClasses[props.size.value],
            avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
--- a/src/components/Button/composables/useButtonClasses.ts
+++ b/src/components/Button/composables/useButtonClasses.ts
@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
  },
 }

-
 const buttonSizeClasses: Record<ButtonSize, string> = {
  xs: 'text-xs px-2 py-1',
  sm: 'text-sm px-3 py-1.5',
--- a/src/components/Card/Card.vue
+++ b/src/components/Card/Card.vue
@@ -1,30 +0,0 @@
-<template>
-  <a href="#" class="block p-6 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">
-    <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>
-  </a>
-</template>
-<script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  horizontal: {
-    type: Boolean,
-    default: false,
-  },
-  href: {
-    type: String,
-    default: '',
-  },
-  imgAlt: {
-    type: String,
-    default: '',
-  },
-  imgSrc: {
-    type: String,
-    default: '',
-  },
-})
-
-</script>
--- a/src/components/Card/TheCard.vue
+++ b/src/components/Card/TheCard.vue
@@ -0,0 +1,37 @@
+<template>
+  <component :is="wrapperType" :href="href" :class="cardClasses">
+    <img v-if="imgSrc" class="rounded-t-lg" :class="horizontalImageClasses" :src="imgSrc" :alt="imgAlt"/>
+    <div class="p-6">
+      <slot />
+    </div>
+  </component>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+import { useCardsClasses } from './composables/useCardClasses'
+import type { CardsVariant } from './types'
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  imgAlt: {
+    type: String,
+    default: '',
+  },
+  imgSrc: {
+    type: String,
+    default: '',
+  },
+  variant: {
+    type: String as PropType<CardsVariant>,
+    default: 'default',
+  },
+})
+
+const { cardClasses, horizontalImageClasses } = useCardsClasses(toRefs(props))
+const wrapperType = computed(() => props.href ? 'a' : 'div')
+
+</script>
--- a/src/components/Card/composables/useCardClasses.ts
+++ b/src/components/Card/composables/useCardClasses.ts
@@ -0,0 +1,34 @@
+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,
+    }
+}
+
--- a/src/components/Card/types.ts
+++ b/src/components/Card/types.ts
@@ -0,0 +1 @@
+export type CardsVariant = 'default' | 'image' | 'horizontal'
--- a/src/components/Input/Input.vue
+++ b/src/components/Input/Input.vue
@@ -54,5 +54,5 @@ const props = defineProps({

 const model = useVModel(props, 'modelValue')

-const {inputClasses, labelClasses} = useInputClasses(toRefs(props))
+const { inputClasses, labelClasses } = useInputClasses(toRefs(props))
 </script>
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -1,30 +1,30 @@
 <template>
-  <div id="defaultModal" tabindex="-1" aria-hidden="true" class="hidden 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">
-    <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
-      <!-- Modal content -->
-      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-        <!-- Modal header -->
-        <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
-          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-            Terms of Service
-          </h3>
-          <button 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" data-modal-toggle="defaultModal">
-            <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>
-        <!-- Modal body -->
-        <div class="p-6 space-y-6">
-          <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>
-        </div>
-        <!-- Modal footer -->
-        <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-          <button data-modal-toggle="defaultModal" 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>
-          <button data-modal-toggle="defaultModal" 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>
+  <div>
+    <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" />
+    <div
+        tabindex="-1"
+        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"
+    >
+      <div class="relative p-4 w-full h-full md:h-auto" :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 @click="closeModal" 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>
@@ -32,8 +32,9 @@
 </template>
 <script lang="ts" setup>
 import type { PropType } from 'vue'
+import type { ModalSize, ModalPosition } from './types'

-const props = defineProps({
+defineProps({
  children: {
    type: Array,
    default() {
@@ -45,17 +46,30 @@ const props = defineProps({
    default: false,
  },
  position: {
-    type: String, // 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'
+    type: String as PropType<ModalPosition>,
    default: 'center',
  },
-  show: {
-    type: Boolean,
-    default: false,
-  },
  size: {
-    type: String, // 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
+    type: String as PropType<ModalSize>,
    default: '2xl',
  },
 })
+const emit = defineEmits(['close'])
+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')
+}
 </script>
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -0,0 +1,2 @@
+export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right';
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -1,61 +1,27 @@
 <template>
-  <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
+  <nav :class="navbarClasses">
    <div class="container flex flex-wrap justify-between items-center mx-auto">
-      <a href="https://flowbite.com/" class="flex items-center">
-<!--        <img src="/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />-->
-        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
-      </a>
-      <button data-collapse-toggle="mobile-menu" 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="mobile-menu" aria-expanded="false">
+      <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>
-        <svg class="w-6 h-6" 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>
-        <svg class="hidden w-6 h-6" 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 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>
-      <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
-        <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
-          </li>
-        </ul>
+      <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 { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { useSlots, ref, computed } from 'vue'
+import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
+import classNames from 'classnames'

 const props = defineProps({
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  className: {
-    type: String,
-    default: '',
-  },
-  fluid: {
-    type: Boolean,
-    default: false,
-  },
-  menuOpen: {
+  sticky: {
    type: Boolean,
    default: false,
  },
@@ -63,6 +29,36 @@ const props = defineProps({
    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>
--- a/src/components/Navbar/NavbarCollapse.vue
+++ b/src/components/Navbar/NavbarCollapse.vue
@@ -0,0 +1,31 @@
+<template>
+  <div :class="menuClasses">
+    <ul :class="listClasses">
+      <slot name="default" />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import classNames from 'classnames'
+import { computed } from 'vue'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('md')
+const props = defineProps({
+  isShowMenu: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+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 : '')
+})
+</script>
--- a/src/components/Navbar/NavbarLink.ts
+++ b/src/components/Navbar/NavbarLink.ts
@@ -0,0 +1,61 @@
+import { defineComponent, h } 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
+                props.component,
+                {
+                    ...props,
+                    class: linkClasses,
+                    [props.linkAttr]: props.link,
+                    onClick: handleClick,
+                },
+                {
+                    default: () => slots.default && slots.default(),
+                },
+            ))
+    },
+})
--- a/src/components/Navbar/NavbarLogo.ts
+++ b/src/components/Navbar/NavbarLogo.ts
@@ -0,0 +1,60 @@
+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,
+                        )],
+                },
+            )
+    },
+})
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,23 +1,37 @@
 <template>
-  <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
+  <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 { computed, toRefs } from 'vue'
+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, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'blue',
+    type: String as PropType<ProgressVariant>,
+    default: 'default',
  },
  label: {
    type: String,
-    default: 'progressbar',
+    default: '',
  },
  labelPosition: {
-    type: String, // 'inside' | 'outside' | 'none'
+    type: String as PropType<ProgressLabelPosition>,
    default: 'none',
  },
  labelProgress: {
@@ -29,9 +43,11 @@ const props = defineProps({
    default: 0,
  },
  size: {
-    type: String, // 'sm' | 'md' | 'lg' | 'xl'
+    type: String as PropType<ProgressSize>,
    default: 'md',
  },
 })

+const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
+
 </script>
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -0,0 +1,64 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
+
+const barColorClasses: Record<ProgressVariant, string> = {
+  default: 'bg-blue-600 dark:bg-blue-600',
+  blue: 'bg-blue-600 dark:bg-blue-600',
+  dark: 'bg-gray-600 dark:bg-gray-300',
+  green: 'bg-green-600 dark:bg-green-500',
+  red: 'bg-red-600 dark:bg-red-500',
+  yellow: 'bg-yellow-400',
+  indigo: 'bg-indigo-600 dark:bg-indigo-500',
+  purple: 'bg-purple-600 dark:bg-purple-500',
+}
+
+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',
+}
+
+const progressSizeClasses: Record<ProgressSize, string> = {
+  sm: 'h-1.5 text-xs leading-none',
+  md: 'h-2.5 text-xs leading-none',
+  lg: 'h-4 text-sm leading-none',
+  xl: 'h-6 text-base leading-tight',
+}
+
+export type UseProgressClassesProps = {
+  color: Ref<ProgressVariant>
+  size: Ref<ProgressSize>
+  labelPosition: Ref<ProgressLabelPosition>
+}
+
+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],
+    )
+  })
+  const outerClasses = computed(() => {
+    return classNames(
+        progressSizeClasses[props.size.value],
+    )
+  })
+  const outsideLabelClasses = computed(() => {
+    return classNames(
+        outsideTextColorClasses[props.color.value],
+    )
+  })
+
+  return {
+    innerClasses: bindClasses,
+    outerClasses,
+    outsideLabelClasses,
+  }
+}
--- a/src/components/Progress/types.ts
+++ b/src/components/Progress/types.ts
@@ -0,0 +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'
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,15 +1,86 @@
 <template>
-  <div>
-    <button data-tooltip-target="tooltip-default" 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>
-    <div id="tooltip-default" role="tooltip"
-         class="inline-block absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 tooltip dark:bg-gray-700">
-      Tooltip content
-      <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
+  <div class="flex items-start">
+    <TooltipComponent :placement="placement" :triggers="[trigger]" :theme="theme" auto-hide>
+      <slot name="trigger"></slot>
+      <template #popper>
+        <slot name="content"></slot>
+      </template>
+    </TooltipComponent>
  </div>
 </template>
+
 <script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
+import { Tooltip as TooltipComponent } from 'floating-vue'
+import 'floating-vue/dist/style.css'
+import { computed } from 'vue'
+
+const props = defineProps({
+    placement: {
+      type: String as PropType<TooltipPlacement>,
+      default: 'top',
+    },
+    theme: {
+      type: String as PropType<TooltipStyle>,
+      default: 'dark',
+    },
+    trigger: {
+      type: String as PropType<TooltipTrigger>,
+      default: 'hover',
+    },
+})
+const theme = computed(() => {
+  const themes = {
+    'light': 'tooltip-light',
+    'dark': 'tooltip-dark',
+  }
+  return themes[props.theme]
+})
 </script>
+
+<style>
+.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
+  background: rgba(0,0,0);
+  color: #fff;
+  border-radius: 6px;
+  padding: 7px 12px 6px;
+}
+
+.v-popper--theme-tooltip-dark .v-popper__arrow-inner {
+  visibility: hidden;
+}
+
+.v-popper--theme-tooltip-dark .v-popper__arrow-outer {
+  border-color: #000c;
+}
+
+@media (prefers-color-scheme: dark) {
+  .v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
+    background: rgb(55 65 81);
+  }
+
+  .v-popper--theme-tooltip-dark .v-popper__arrow-outer {
+    border-color: rgb(55 65 81);
+  }
+}
+
+.v-popper--theme-tooltip-light .v-popper__wrapper .v-popper__inner {
+  background: #fff;
+  color: black;
+  padding: 7px 12px 6px;
+  border-radius: 6px;
+  border: 1px solid #eeeeee;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+}
+
+.v-popper--theme-tooltip-light .v-popper__arrow-inner {
+  visibility: visible;
+  border-color: #fff;
+}
+
+.v-popper--theme-tooltip-light .v-popper__arrow-outer {
+  border-color: #ddd;
+}
+
+</style>
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -0,0 +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' ;
--- a/src/components/utils/SlotListener/SlotListener.vue
+++ b/src/components/utils/SlotListener/SlotListener.vue
@@ -3,7 +3,7 @@ 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 pick from 'lodash/pick'
+import { pick } from 'lodash-es'

 // inspired from https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx

--- a/src/index.ts
+++ b/src/index.ts
@@ -13,15 +13,17 @@ export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
 export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
 export { default as Accordion } from './components/Accordion/Accordion.vue'
-
 export { default as Badge } from './components/Badge/Badge.vue'
-export { default as Card } from './components/Card/Card.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 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'
--- a/static.json
+++ b/static.json
@@ -0,0 +1,3 @@
+{
+  "root": "docs/.vitepress/dist"
+}
				`@@ -0,0 +1 @@`
				`export type CardsVariant = 'default' \| 'image' \| 'horizontal'`