diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index 7921ba5..c01d636 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -27,10 +27,10 @@
 </template>
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useAlertClasses } from './useAlertClasses'
+import { useAlertClasses } from './composables/useAlertClasses'
 import { onBeforeUnmount, ref, toRefs } from 'vue'
+import type { AlertType } from './types'
 
-export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
 
 const props = defineProps({
   type: {
diff --git a/src/components/Alert/useAlertClasses.ts b/src/components/Alert/composables/useAlertClasses.ts
similarity index 98%
rename from src/components/Alert/useAlertClasses.ts
rename to src/components/Alert/composables/useAlertClasses.ts
index d087acb..fc88992 100644
--- a/src/components/Alert/useAlertClasses.ts
+++ b/src/components/Alert/composables/useAlertClasses.ts
@@ -1,4 +1,4 @@
-import type { AlertType } from './Alert.vue'
+import type { AlertType } from '../types'
 import { computed } from 'vue'
 import type { Ref } from 'vue'
 import classNames from 'classnames'
diff --git a/src/components/Alert/types.d.ts b/src/components/Alert/types.d.ts
new file mode 100644
index 0000000..7b43a8e
--- /dev/null
+++ b/src/components/Alert/types.d.ts
@@ -0,0 +1 @@
+export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
\ No newline at end of file
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index bb85e4a..1e92c2d 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -31,15 +31,9 @@
 import { computed, toRefs } from 'vue'
 import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
-import { useButtonClasses } from './useButtonClasses'
-import { useButtonSpinner } from './useButtonSpinner'
-
-export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
-export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
-export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
-
-export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+import { useButtonClasses } from './composables/useButtonClasses'
+import { useButtonSpinner } from './composables/useButtonSpinner'
+import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
 
 const props = defineProps({
   color: {
diff --git a/src/components/Button/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts
similarity index 99%
rename from src/components/Button/useButtonClasses.ts
rename to src/components/Button/composables/useButtonClasses.ts
index 8fe417d..afefb62 100644
--- a/src/components/Button/useButtonClasses.ts
+++ b/src/components/Button/composables/useButtonClasses.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { computed, useSlots } from 'vue'
 import classNames from 'classnames'
-import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue'
+import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
 
 
 export type ButtonClassMap<T extends string> =  { hover: Record<T, string>, default: Record<T, string> }
diff --git a/src/components/Button/useButtonSpinner.ts b/src/components/Button/composables/useButtonSpinner.ts
similarity index 94%
rename from src/components/Button/useButtonSpinner.ts
rename to src/components/Button/composables/useButtonSpinner.ts
index 6726a80..f1fcc76 100644
--- a/src/components/Button/useButtonSpinner.ts
+++ b/src/components/Button/composables/useButtonSpinner.ts
@@ -1,5 +1,5 @@
-import type { ButtonGradient, ButtonSize, ButtonVariant } from './Button.vue'
-import type { SpinnerColor, SpinnerSize } from '../Spinner/Spinner.vue'
+import type { ButtonGradient, ButtonSize, ButtonVariant } from '../types'
+import type { SpinnerColor, SpinnerSize } from '../../Spinner/types'
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 
diff --git a/src/components/Button/types.d.ts b/src/components/Button/types.d.ts
new file mode 100644
index 0000000..701b089
--- /dev/null
+++ b/src/components/Button/types.d.ts
@@ -0,0 +1,5 @@
+export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
+export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
+export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
+export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
\ No newline at end of file
diff --git a/src/components/ButtonGroup/ButtonGroup.vue b/src/components/ButtonGroup/ButtonGroup.vue
index ba52507..f14a8d5 100644
--- a/src/components/ButtonGroup/ButtonGroup.vue
+++ b/src/components/ButtonGroup/ButtonGroup.vue
@@ -9,13 +9,13 @@
 
 @layer components {
   .btn-group > button {
-    @apply rounded-none
+    @apply rounded-none;
   }
   .btn-group > button:first-child {
-    @apply rounded-l-lg
+    @apply rounded-l-lg;
   }
   .btn-group > button:last-child {
-    @apply rounded-r-lg
+    @apply rounded-r-lg;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Spinner/Spinner.vue b/src/components/Spinner/Spinner.vue
index 94c4c65..d64f90f 100644
--- a/src/components/Spinner/Spinner.vue
+++ b/src/components/Spinner/Spinner.vue
@@ -6,11 +6,9 @@
 </template>
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useSpinnerClasses } from './useSpinnerClasses'
+import { useSpinnerClasses } from './composables/useSpinnerClasses'
 import { toRefs } from 'vue'
-
-export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
-export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
+import type { SpinnerColor, SpinnerSize } from './types'
 
 const props = defineProps({
   size: {
diff --git a/src/components/Spinner/useSpinnerClasses.ts b/src/components/Spinner/composables/useSpinnerClasses.ts
similarity index 100%
rename from src/components/Spinner/useSpinnerClasses.ts
rename to src/components/Spinner/composables/useSpinnerClasses.ts
diff --git a/src/components/Spinner/types.d.ts b/src/components/Spinner/types.d.ts
new file mode 100644
index 0000000..708413d
--- /dev/null
+++ b/src/components/Spinner/types.d.ts
@@ -0,0 +1,2 @@
+export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
+export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
\ No newline at end of file
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 651b59a..e28f924 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -23,12 +23,13 @@ import {
   TAB_ACTIVE_NAME_INJECTION_KEY,
   TAB_STYLE_INJECTION_KEY,
   TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY,
-} from './config'
-import { useTabsClasses } from './useTabsClasses'
+} from './injection/config'
+import { useTabsClasses } from './composables/useTabsClasses'
 import type { PropType } from 'vue'
 import { computed, provide, toRef, useSlots } from 'vue'
 import { flatten } from '../../utils/flatten'
 import TabPane from './components/TabPane/TabPane.vue'
+import type { TabsVariant } from './types'
 
 const props = defineProps({
   variant: {
@@ -82,6 +83,4 @@ provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)
 export default {
   inheritAttrs: false,
 }
-
-export type TabsVariant = 'default' | 'underline' | 'pills'
 </script>
diff --git a/src/components/Tabs/components/Tab/Tab.vue b/src/components/Tabs/components/Tab/Tab.vue
index b4849b4..b3739a0 100644
--- a/src/components/Tabs/components/Tab/Tab.vue
+++ b/src/components/Tabs/components/Tab/Tab.vue
@@ -14,7 +14,7 @@
 </template>
 <script lang="ts" setup>
 import { inject } from 'vue'
-import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../config'
+import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../injection/config'
 
 defineProps({
   name: {
diff --git a/src/components/Tabs/components/TabPane/TabPane.vue b/src/components/Tabs/components/TabPane/TabPane.vue
index f762cc5..4670fbd 100644
--- a/src/components/Tabs/components/TabPane/TabPane.vue
+++ b/src/components/Tabs/components/TabPane/TabPane.vue
@@ -7,9 +7,9 @@
 </template>
 <script lang="ts" setup>
 import { inject, toRefs } from 'vue'
-import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../config'
-import type { TabsVariant } from '../../Tabs.vue'
-import { useTabClasses } from './useTabClasses'
+import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../injection/config'
+import type { TabsVariant } from '../../types'
+import { useTabClasses } from './composables/useTabClasses'
 
 const props = defineProps({
   name: {
diff --git a/src/components/Tabs/components/TabPane/useTabClasses.ts b/src/components/Tabs/components/TabPane/composables/useTabClasses.ts
similarity index 100%
rename from src/components/Tabs/components/TabPane/useTabClasses.ts
rename to src/components/Tabs/components/TabPane/composables/useTabClasses.ts
diff --git a/src/components/Tabs/useTabsClasses.ts b/src/components/Tabs/composables/useTabsClasses.ts
similarity index 95%
rename from src/components/Tabs/useTabsClasses.ts
rename to src/components/Tabs/composables/useTabsClasses.ts
index 31d5530..0f2de44 100644
--- a/src/components/Tabs/useTabsClasses.ts
+++ b/src/components/Tabs/composables/useTabsClasses.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
-import type { TabsVariant } from './Tabs.vue'
+import type { TabsVariant } from '../types'
 
 export type UseTabsClassesProps = {
     variant: TabsVariant
diff --git a/src/components/Tabs/config.ts b/src/components/Tabs/injection/config.ts
similarity index 89%
rename from src/components/Tabs/config.ts
rename to src/components/Tabs/injection/config.ts
index c34c2fe..19c3781 100644
--- a/src/components/Tabs/config.ts
+++ b/src/components/Tabs/injection/config.ts
@@ -1,3 +1,5 @@
+// dependency injection config for tabs
+
 export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection'
 export const TAB_ACTIVE_NAME_INJECTION_KEY = 'flowbite-tab-active-name-injection'
 export const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection'
diff --git a/src/components/Tabs/types.d.ts b/src/components/Tabs/types.d.ts
new file mode 100644
index 0000000..913cde7
--- /dev/null
+++ b/src/components/Tabs/types.d.ts
@@ -0,0 +1 @@
+export type TabsVariant = 'default' | 'underline' | 'pills'
\ No newline at end of file
diff --git a/src/composables/useClasses.ts b/src/composables/useClasses.ts
new file mode 100644
index 0000000..5452d0a
--- /dev/null
+++ b/src/composables/useClasses.ts
@@ -0,0 +1,3 @@
+export function useClasses() {
+
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index d3c43a9..fa20f56 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src'),
+      '@': resolve(__dirname, './src'),
     },
   },
   build: {