Merge pull request #17 from RichardGG/bulk-import-components

Bulk create components

docs/.vitepress/config.ts

@@ -30,6 +30,25 @@ function getComponents() {
     { text: 'Dropdown', link: '/guide/dropdown/dropdown.md' },
     { text: 'Spinner', link: '/guide/spinner/spinner.md' },
     { text: 'Tabs', link: '/guide/tabs/tabs.md' },
+
+    { text: 'Accordion', link: 'guide/accordion/accordion.md' },
+    { text: 'Avatar', link: 'guide/avatar/avatar.md' },
+    { text: 'Badge', link: 'guide/badge/badge.md' },
+    { text: 'Breadcrumb', link: 'guide/breadcrumb/breadcrumb.md' },
+    { text: 'Card', link: 'guide/card/card.md' },
+    { text: 'Carousel', link: 'guide/carousel/carousel.md' },
+    { text: 'Footer', link: 'guide/footer/footer.md' },
+    { text: 'ListGroup', link: 'guide/listGroup/listGroup.md' },
+    { text: 'Modal', link: 'guide/modal/modal.md' },
+    { text: 'Navbar', link: 'guide/navbar/navbar.md' },
+    { text: 'Pagination', link: 'guide/pagination/pagination.md' },
+    { text: 'Progress', link: 'guide/progress/progress.md' },
+    { text: 'Rating', link: 'guide/rating/rating.md' },
+    { text: 'Sidebar', link: 'guide/sidebar/sidebar.md' },
+    { text: 'Table', link: 'guide/table/table.md' },
+    { text: 'Timeline', link: 'guide/timeline/timeline.md' },
+    { text: 'Toast', link: 'guide/toast/toast.md' },
+    { text: 'Tooltip', link: 'guide/tooltip/tooltip.md' },
   ]
 }
 

docs/guide/accordion/accordion.md

@@ -0,0 +1,15 @@
+<script setup>
+import AccordionExample from './examples/AccordionExample.vue'
+</script>
+# Accordion
+
+```vue
+<script setup>
+import { Accordion } from 'flowbite-vue'
+</script>
+<template>
+  <Accordion></Accordion>
+</template>
+```
+
+<AccordionExample />

docs/guide/accordion/examples/AccordionExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Accordion></Accordion>
+  </div>
+</template>
+<script setup>
+import { Accordion } from '../../../../src/index'
+</script>

docs/guide/avatar/avatar.md

@@ -0,0 +1,15 @@
+<script setup>
+import AvatarExample from './examples/AvatarExample.vue'
+</script>
+# Avatar
+
+```vue
+<script setup>
+import { Avatar } from 'flowbite-vue'
+</script>
+<template>
+  <Avatar></Avatar>
+</template>
+```
+
+<AvatarExample />

docs/guide/avatar/examples/AvatarExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Avatar></Avatar>
+  </div>
+</template>
+<script setup>
+import { Avatar } from '../../../../src/index'
+</script>

docs/guide/badge/badge.md

@@ -0,0 +1,15 @@
+<script setup>
+import BadgeExample from './examples/BadgeExample.vue'
+</script>
+# Badge
+
+```vue
+<script setup>
+import { Badge } from 'flowbite-vue'
+</script>
+<template>
+  <Badge></Badge>
+</template>
+```
+
+<BadgeExample />

docs/guide/badge/examples/BadgeExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Badge></Badge>
+  </div>
+</template>
+<script setup>
+import { Badge } from '../../../../src/index'
+</script>

docs/guide/breadcrumb/breadcrumb.md

@@ -0,0 +1,15 @@
+<script setup>
+import BreadcrumbExample from './examples/BreadcrumbExample.vue'
+</script>
+# Breadcrumb
+
+```vue
+<script setup>
+import { Breadcrumb } from 'flowbite-vue'
+</script>
+<template>
+  <Breadcrumb></Breadcrumb>
+</template>
+```
+
+<BreadcrumbExample />

docs/guide/breadcrumb/examples/BreadcrumbExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Breadcrumb></Breadcrumb>
+  </div>
+</template>
+<script setup>
+import { Breadcrumb } from '../../../../src/index'
+</script>

docs/guide/card/card.md

@@ -0,0 +1,15 @@
+<script setup>
+import CardExample from './examples/CardExample.vue'
+</script>
+# Card
+
+```vue
+<script setup>
+import { Card } from 'flowbite-vue'
+</script>
+<template>
+  <Card></Card>
+</template>
+```
+
+<CardExample />

docs/guide/card/examples/CardExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Card></Card>
+  </div>
+</template>
+<script setup>
+import { Card } from '../../../../src/index'
+</script>

docs/guide/carousel/carousel.md

@@ -0,0 +1,15 @@
+<script setup>
+import CarouselExample from './examples/CarouselExample.vue'
+</script>
+# Carousel
+
+```vue
+<script setup>
+import { Carousel } from 'flowbite-vue'
+</script>
+<template>
+  <Carousel></Carousel>
+</template>
+```
+
+<CarouselExample />

docs/guide/carousel/examples/CarouselExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>

docs/guide/footer/examples/FooterExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Footer></Footer>
+  </div>
+</template>
+<script setup>
+import { Footer } from '../../../../src/index'
+</script>

docs/guide/footer/footer.md

@@ -0,0 +1,15 @@
+<script setup>
+import FooterExample from './examples/FooterExample.vue'
+</script>
+# Footer
+
+```vue
+<script setup>
+import { Footer } from 'flowbite-vue'
+</script>
+<template>
+  <Footer></Footer>
+</template>
+```
+
+<FooterExample />

docs/guide/listGroup/examples/ListGroupExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <ListGroup></ListGroup>
+  </div>
+</template>
+<script setup>
+import { ListGroup } from '../../../../src/index'
+</script>

docs/guide/listGroup/listGroup.md

@@ -0,0 +1,15 @@
+<script setup>
+import ListGroupExample from './examples/ListGroupExample.vue'
+</script>
+# ListGroup
+
+```vue
+<script setup>
+import { ListGroup } from 'flowbite-vue'
+</script>
+<template>
+  <ListGroup></ListGroup>
+</template>
+```
+
+<ListGroupExample />

docs/guide/modal/examples/ModalExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Modal></Modal>
+  </div>
+</template>
+<script setup>
+import { Modal } from '../../../../src/index'
+</script>

docs/guide/modal/modal.md

@@ -0,0 +1,15 @@
+<script setup>
+import ModalExample from './examples/ModalExample.vue'
+</script>
+# Modal
+
+```vue
+<script setup>
+import { Modal } from 'flowbite-vue'
+</script>
+<template>
+  <Modal></Modal>
+</template>
+```
+
+<ModalExample />

docs/guide/navbar/examples/NavbarExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Navbar></Navbar>
+  </div>
+</template>
+<script setup>
+import { Navbar } from '../../../../src/index'
+</script>

docs/guide/navbar/navbar.md

@@ -0,0 +1,15 @@
+<script setup>
+import NavbarExample from './examples/NavbarExample.vue'
+</script>
+# Navbar
+
+```vue
+<script setup>
+import { Navbar } from 'flowbite-vue'
+</script>
+<template>
+  <Navbar></Navbar>
+</template>
+```
+
+<NavbarExample />

docs/guide/pagination/examples/PaginationExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Pagination></Pagination>
+  </div>
+</template>
+<script setup>
+import { Pagination } from '../../../../src/index'
+</script>

docs/guide/pagination/pagination.md

@@ -0,0 +1,15 @@
+<script setup>
+import PaginationExample from './examples/PaginationExample.vue'
+</script>
+# Pagination
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+</script>
+<template>
+  <Pagination></Pagination>
+</template>
+```
+
+<PaginationExample />

docs/guide/progress/examples/ProgressExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Progress></Progress>
+  </div>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>

docs/guide/progress/progress.md

@@ -0,0 +1,15 @@
+<script setup>
+import ProgressExample from './examples/ProgressExample.vue'
+</script>
+# Progress
+
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress></Progress>
+</template>
+```
+
+<ProgressExample />

docs/guide/rating/examples/RatingExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Rating></Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/guide/rating/rating.md

@@ -0,0 +1,15 @@
+<script setup>
+import RatingExample from './examples/RatingExample.vue'
+</script>
+# Rating
+
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+  <Rating></Rating>
+</template>
+```
+
+<RatingExample />

docs/guide/sidebar/examples/SidebarExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Sidebar></Sidebar>
+  </div>
+</template>
+<script setup>
+import { Sidebar } from '../../../../src/index'
+</script>

docs/guide/sidebar/sidebar.md

@@ -0,0 +1,15 @@
+<script setup>
+import SidebarExample from './examples/SidebarExample.vue'
+</script>
+# Sidebar
+
+```vue
+<script setup>
+import { Sidebar } from 'flowbite-vue'
+</script>
+<template>
+  <Sidebar></Sidebar>
+</template>
+```
+
+<SidebarExample />

docs/guide/table/examples/TableExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Table></Table>
+  </div>
+</template>
+<script setup>
+import { Table } from '../../../../src/index'
+</script>

docs/guide/table/table.md

@@ -0,0 +1,15 @@
+<script setup>
+import TableExample from './examples/TableExample.vue'
+</script>
+# Table
+
+```vue
+<script setup>
+import { Table } from 'flowbite-vue'
+</script>
+<template>
+  <Table></Table>
+</template>
+```
+
+<TableExample />

docs/guide/timeline/examples/TimelineExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Timeline></Timeline>
+  </div>
+</template>
+<script setup>
+import { Timeline } from '../../../../src/index'
+</script>

docs/guide/timeline/timeline.md

@@ -0,0 +1,15 @@
+<script setup>
+import TimelineExample from './examples/TimelineExample.vue'
+</script>
+# Timeline
+
+```vue
+<script setup>
+import { Timeline } from 'flowbite-vue'
+</script>
+<template>
+  <Timeline></Timeline>
+</template>
+```
+
+<TimelineExample />

docs/guide/toast/examples/ToastExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Toast></Toast>
+  </div>
+</template>
+<script setup>
+import { Toast } from '../../../../src/index'
+</script>

docs/guide/toast/toast.md

@@ -0,0 +1,15 @@
+<script setup>
+import ToastExample from './examples/ToastExample.vue'
+</script>
+# Toast
+
+```vue
+<script setup>
+import { Toast } from 'flowbite-vue'
+</script>
+<template>
+  <Toast></Toast>
+</template>
+```
+
+<ToastExample />

docs/guide/tooltip/examples/TooltipExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Tooltip></Tooltip>
+  </div>
+</template>
+<script setup>
+import { Tooltip } from '../../../../src/index'
+</script>

docs/guide/tooltip/tooltip.md

@@ -0,0 +1,15 @@
+<script setup>
+import TooltipExample from './examples/TooltipExample.vue'
+</script>
+# Tooltip
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+<template>
+  <Tooltip></Tooltip>
+</template>
+```
+
+<TooltipExample />

src/components/Accordion/Accordion.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="accordion-collapse" data-accordion="collapse">
+    <h2 id="accordion-collapse-heading-1">
+      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 rounded-t-xl border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
+        <span>What is Flowbite?</span>
+        <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </button>
+    </h2>
+    <div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
+      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+        <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+      </div>
+    </div>
+    <h2 id="accordion-collapse-heading-2">
+      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
+        <span>Is there a Figma file available?</span>
+        <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </button>
+    </h2>
+    <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
+      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+        <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      </div>
+    </div>
+    <h2 id="accordion-collapse-heading-3">
+      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
+        <span>What are the differences between Flowbite and Tailwind UI?</span>
+        <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </button>
+    </h2>
+    <div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
+      <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+        <p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
+        <ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
+          <li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
+          <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  alwaysOpen: {
+    type: Boolean,
+    default: false,
+  },
+  arrowIcon: {
+    type: String,
+    default: '',
+  },
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  flush: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+</script>

src/components/Avatar/Avatar.vue

@@ -0,0 +1,49 @@
+<template>
+  <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  alt: {
+    type: String,
+    default: '',
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  img: {
+    type: String,
+    default: '',
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String, // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    default: 'md',
+  },
+  stacked: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String, // 'away' | 'busy' | 'offline' | 'online';
+    default: '',
+  },
+  statusPosition: {
+    type: String, // 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'
+    default: 'top-left',
+  },
+})
+
+</script>

src/components/Badge/Badge.vue

@@ -0,0 +1,33 @@
+<template>
+  <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">Default</span>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  color: {
+    type: String, // 'failure' | 'gray' | 'indigo' | 'info' | 'pink' | 'purple' | 'success'
+    default: 'info',
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String, // 'xs' | 'sm'
+    default: 'xs',
+  },
+})
+
+</script>

src/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,33 @@
+<template>
+  <nav class="flex" aria-label="Breadcrumb">
+    <ol class="inline-flex items-center space-x-1 md:space-x-3">
+      <li class="inline-flex items-center">
+        <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
+          <svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
+          Home
+        </a>
+      </li>
+      <li>
+        <div class="flex items-center">
+          <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+          <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
+        </div>
+      </li>
+      <li aria-current="page">
+        <div class="flex items-center">
+          <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+          <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  
+})
+
+</script>

src/components/Card/Card.vue

@@ -0,0 +1,30 @@
+<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>

src/components/Carousel/Carousel.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="default-carousel" class="relative" data-carousel="static">
+    <!-- Carousel wrapper -->
+    <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
+      <!-- Item 1 -->
+      <div class="hidden duration-700 ease-in-out" data-carousel-item>
+        <span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
+        <img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
+      </div>
+      <!-- Item 2 -->
+      <div class="hidden duration-700 ease-in-out" data-carousel-item>
+        <img src="/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
+      </div>
+      <!-- Item 3 -->
+      <div class="hidden duration-700 ease-in-out" data-carousel-item>
+        <img src="/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
+      </div>
+    </div>
+    <!-- Slider indicators -->
+    <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
+    </div>
+    <!-- Slider controls -->
+    <button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
+      <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+        <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        <span class="hidden">Previous</span>
+      </span>
+    </button>
+    <button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
+      <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+        <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+        <span class="hidden">Next</span>
+      </span>
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  indicators: {
+    type: Boolean,
+    default: true,
+  },
+  slide: {
+    type: Boolean,
+    default: true,
+  },
+  slideInterval: {
+    type: Number,
+    default: 3000,
+  },
+})
+
+</script>

src/components/Footer/Footer.vue

@@ -0,0 +1,42 @@
+<template>
+  <footer class="p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
+    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2022 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
+    </span>
+    <ul class="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
+      <li>
+        <a href="#" class="mr-4 hover:underline md:mr-6 ">About</a>
+      </li>
+      <li>
+        <a href="#" class="mr-4 hover:underline md:mr-6">Privacy Policy</a>
+      </li>
+      <li>
+        <a href="#" class="mr-4 hover:underline md:mr-6">Licensing</a>
+      </li>
+      <li>
+        <a href="#" class="hover:underline">Contact</a>
+      </li>
+    </ul>
+  </footer>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  bgDark: {
+    type: Boolean,
+    default: false,
+  },
+  container: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+</script>

src/components/ListGroup/ListGroup.vue

@@ -0,0 +1,17 @@
+<template>
+  <ul class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+    <li class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">Profile</li>
+    <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Settings</li>
+    <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Messages</li>
+    <li class="w-full px-4 py-2 rounded-b-lg">Download</li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  
+})
+
+</script>

src/components/Modal/Modal.vue

@@ -0,0 +1,68 @@
+<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>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  popup: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String, // 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'
+    default: 'center',
+  },
+  root: {
+    type: HTMLElement,
+    default() {
+      return document ? document.body : undefined
+    },
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String, // 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
+    default: '2xl',
+  },
+})
+
+</script>

src/components/Navbar/Navbar.vue

@@ -0,0 +1,68 @@
+<template>
+  <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
+    <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">
+        <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>
+      </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>
+      </div>
+    </div>
+  </nav>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  className: {
+    type: String,
+    default: '',
+  },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
+  menuOpen: {
+    type: Boolean,
+    default: false,
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+</script>

src/components/Pagination/Pagination.vue

@@ -0,0 +1,51 @@
+<template>
+  <nav aria-label="Page navigation example">
+    <ul class="inline-flex -space-x-px">
+      <li>
+        <a href="#" class="py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
+      </li>
+      <li>
+        <a href="#" aria-current="page" class="py-2 px-3 text-blue-600 bg-blue-50 border border-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
+      </li>
+    </ul>
+  </nav>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  layout: {
+    type: String, // 'navigation' | 'pagination' | 'table'
+    default: 'pagination',
+  },
+  showIcons: {
+    type: Boolean,
+    default: false,
+  },
+  totalPages: {
+    type: Number,
+    default: 1,
+  },
+})
+
+</script>

src/components/Progress/Progress.vue

@@ -0,0 +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>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
+    default: 'blue',
+  },
+  label: {
+    type: String,
+    default: 'progressbar',
+  },
+  labelPosition: {
+    type: String, // 'inside' | 'outside' | 'none'
+    default: 'none',
+  },
+  labelProgress: {
+    type: Boolean,
+    default: false,
+  },
+  progress: {
+    type: Number,
+    default: 0,
+  },
+  size: {
+    type: String, // 'sm' | 'md' | 'lg' | 'xl'
+    default: 'md',
+  },
+})
+
+</script>

src/components/Rating/Rating.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex items-center">
+    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+    <svg class="w-5 h-5 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String, // 'sm' | 'md' | 'lg'
+    default: 'sm',
+  },
+})
+
+</script>

src/components/Sidebar/Sidebar.vue

@@ -0,0 +1,74 @@
+<template>
+  <aside class="w-64" aria-label="Sidebar">
+    <div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
+      <ul class="space-y-2">
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
+            <span class="ml-3">Dashboard</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
+            <span class="flex-1 ml-3 whitespace-nowrap">Kanban</span>
+            <span class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
+            <span class="flex-1 ml-3 whitespace-nowrap">Inbox</span>
+            <span class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200">3</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
+            <span class="flex-1 ml-3 whitespace-nowrap">Users</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path></svg>
+            <span class="flex-1 ml-3 whitespace-nowrap">Products</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
+            <span class="flex-1 ml-3 whitespace-nowrap">Sign In</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path></svg>
+            <span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </aside>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  collapseBehavior: {
+    type: String, // 'collapse' | 'hide';
+    default: 'collapse',
+  },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+</script>

src/components/Table/Table.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3">
+            Product name
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Color
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Category
+          </th>
+          <th scope="col" class="px-6 py-3">
+            Price
+          </th>
+          <th scope="col" class="px-6 py-3">
+            <span class="sr-only">Edit</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+            Apple MacBook Pro 17"
+          </th>
+          <td class="px-6 py-4">
+            Sliver
+          </td>
+          <td class="px-6 py-4">
+            Laptop
+          </td>
+          <td class="px-6 py-4">
+            $2999
+          </td>
+          <td class="px-6 py-4 text-right">
+            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+          </td>
+        </tr>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+            Microsoft Surface Pro
+          </th>
+          <td class="px-6 py-4">
+            White
+          </td>
+          <td class="px-6 py-4">
+            Laptop PC
+          </td>
+          <td class="px-6 py-4">
+            $1999
+          </td>
+          <td class="px-6 py-4 text-right">
+            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+          </td>
+        </tr>
+        <tr class="bg-white dark:bg-gray-800">
+          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+            Magic Mouse 2
+          </th>
+          <td class="px-6 py-4">
+            Black
+          </td>
+          <td class="px-6 py-4">
+            Accessories
+          </td>
+          <td class="px-6 py-4">
+            $99
+          </td>
+          <td class="px-6 py-4 text-right">
+            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  striped: {
+    type: Boolean,
+    default: false,
+  },
+  hoverable: {
+    type: Boolean,
+    default: false,
+  },
+  className: {
+    type: String,
+    default: '',
+  },
+})
+
+</script>

src/components/Timeline/Timeline.vue

@@ -0,0 +1,39 @@
+<template>
+  <ol class="relative border-l border-gray-200 dark:border-gray-700">                  
+    <li class="mb-10 ml-4">
+      <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
+      <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">February 2022</time>
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>
+      <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
+      <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a>
+    </li>
+    <li class="mb-10 ml-4">
+      <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
+      <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">March 2022</time>
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Marketing UI design in Figma</h3>
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
+    </li>
+    <li class="ml-4">
+      <div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
+      <time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">April 2022</time>
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">E-Commerce UI code in Tailwind CSS</h3>
+      <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
+    </li>
+  </ol>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  },
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+</script>

src/components/Toast/Toast.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
+    </div>
+    <div class="ml-3 text-sm font-normal">Set yourself free.</div>
+    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
+      <span class="sr-only">Close</span>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 300,
+  },
+})
+
+</script>

src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,40 @@
+<template>
+  <div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
+    Tooltip content
+    <div class="tooltip-arrow" data-popper-arrow></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  arrow: {
+    type: Boolean,
+    default: true,
+  },
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  duration: {
+    type: Number, // animation = duration-300
+    default: 300,
+  },
+  placement: {
+    type: String, // top | right | bottom | left | {top/right/bottom/left}-{start/end}
+    default: 'auto',
+  },
+  type: {
+    type: String, // 'dark' | 'light' | 'auto'
+    default: 'dark',
+  },
+  trigger: {
+    type: String, // 'hover' | 'click'
+    default: 'hover',
+  },
+})
+
+</script>

src/index.ts

@@ -1,18 +1,26 @@
-import Button from './components/Button/Button.vue'
-import Spinner from './components/Spinner/Spinner.vue'
-import ButtonGroup from './components/ButtonGroup/ButtonGroup.vue'
-import Alert from './components/Alert/Alert.vue'
-import Tabs from './components/Tabs/Tabs.vue'
-import Tab from './components/Tabs/components/Tab/Tab.vue'
-import Dropdown from './components/Dropdown/Dropdown.vue'
-import FlowbiteThemable from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
-export {
-    Button,
-    Spinner,
-    ButtonGroup,
-    Alert,
-    Tabs,
-    Tab,
-    Dropdown,
-    FlowbiteThemable,
-}
+export { default as Button } from './components/Button/Button.vue'
+export { default as Spinner } from './components/Spinner/Spinner.vue'
+export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
+export { default as Alert } from './components/Alert/Alert.vue'
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
+export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
+export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+export { default as Avatar } from './components/Avatar/Avatar.vue'
+export { default as Badge } from './components/Badge/Badge.vue'
+export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
+export { default as Card } from './components/Card/Card.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 Modal } from './components/Modal/Modal.vue'
+export { default as Navbar } from './components/Navbar/Navbar.vue'
+export { default as Pagination } from './components/Pagination/Pagination.vue'
+export { default as Progress } from './components/Progress/Progress.vue'
+export { default as Rating } from './components/Rating/Rating.vue'
+export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
+export { default as Table } from './components/Table/Table.vue'
+export { default as Timeline } from './components/Timeline/Timeline.vue'
+export { default as Toast } from './components/Toast/Toast.vue'
+export { default as Tooltip } from './components/Tooltip/Tooltip.vue'