From 34d2f57801d08d26262fdff4398ec3d3329b4bb0 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 20 Sep 2023 18:07:51 +0200
Subject: [PATCH] feat(module)!: use `tailwind-merge` for `app.config` & move
 config to components & type props (#692)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
---
 .github/workflows/ci-dev.yml                  |   6 +-
 .github/workflows/ci.yml                      |   6 +-
 .nuxtrc                                       |   3 +
 docs/.nuxtrc                                  |   1 +
 docs/components/Footer.vue                    |  12 +-
 docs/components/Header.vue                    |   2 +-
 .../VerticalNavigationExampleAvatarSlot.vue   |   6 +-
 docs/content/1.getting-started/3.theming.md   |  48 +++++--
 .../5.navigation/1.vertical-navigation.md     |   6 +-
 docs/nuxt.config.ts                           |   4 -
 docs/package.json                             |   2 +-
 package.json                                  |  13 +-
 pnpm-lock.yaml                                |  20 +--
 src/module.ts                                 |  39 +++---
 src/runtime/components/data/Table.vue         |  46 +++----
 src/runtime/components/elements/Accordion.vue |  38 +++---
 src/runtime/components/elements/Alert.vue     |  46 +++----
 src/runtime/components/elements/Avatar.vue    |  46 +++----
 .../components/elements/AvatarGroup.ts        |  35 +++--
 src/runtime/components/elements/Badge.vue     |  46 ++++---
 src/runtime/components/elements/Button.vue    |  47 ++++---
 .../components/elements/ButtonGroup.ts        |  42 +++---
 src/runtime/components/elements/Dropdown.vue  |  31 ++---
 src/runtime/components/elements/Kbd.vue       |  31 ++---
 src/runtime/components/forms/Checkbox.vue     |  33 ++---
 src/runtime/components/forms/FormGroup.vue    |  42 +++---
 src/runtime/components/forms/Input.vue        |  58 ++++-----
 src/runtime/components/forms/Radio.vue        |  33 ++---
 src/runtime/components/forms/Range.vue        |  43 ++++---
 src/runtime/components/forms/Select.vue       |  61 ++++-----
 src/runtime/components/forms/SelectMenu.vue   |  72 +++++------
 src/runtime/components/forms/Textarea.vue     |  62 +++++----
 src/runtime/components/forms/Toggle.vue       |  41 +++---
 src/runtime/components/layout/Card.vue        |  25 ++--
 src/runtime/components/layout/Container.vue   |  25 ++--
 src/runtime/components/layout/Skeleton.vue    |  25 ++--
 .../components/navigation/CommandPalette.vue  |  44 +++----
 .../navigation/CommandPaletteGroup.vue        |  12 +-
 .../components/navigation/Pagination.vue      |  46 +++----
 src/runtime/components/navigation/Tabs.vue    |  32 ++---
 .../navigation/VerticalNavigation.vue         |  32 ++---
 .../components/overlays/ContextMenu.vue       |  26 ++--
 src/runtime/components/overlays/Modal.vue     |  29 ++---
 .../components/overlays/Notification.vue      |  36 +++---
 .../components/overlays/Notifications.vue     |  27 ++--
 src/runtime/components/overlays/Popover.vue   |  30 ++---
 src/runtime/components/overlays/Slideover.vue |  29 ++---
 src/runtime/components/overlays/Tooltip.vue   |  30 ++---
 src/runtime/composables/useUI.ts              |  24 ++++
 src/runtime/types/avatar.d.ts                 |  14 +-
 src/runtime/types/button.d.ts                 |  13 +-
 src/runtime/types/form.d.ts                   |   2 +-
 src/runtime/types/index.d.ts                  |   1 +
 src/runtime/types/notification.d.ts           |   8 +-
 src/runtime/types/utils.d.ts                  |  11 ++
 src/runtime/{app.config.ts => ui.config.ts}   | 120 +++++++-----------
 src/runtime/utils/index.ts                    |  31 ++++-
 src/templates.ts                              |  21 +++
 tsconfig.json                                 |   3 +-
 59 files changed, 835 insertions(+), 882 deletions(-)
 create mode 100644 .nuxtrc
 create mode 100644 docs/.nuxtrc
 create mode 100644 src/runtime/composables/useUI.ts
 create mode 100644 src/runtime/types/utils.d.ts
 rename src/runtime/{app.config.ts => ui.config.ts} (96%)
 create mode 100644 src/templates.ts

diff --git a/.github/workflows/ci-dev.yml b/.github/workflows/ci-dev.yml
index d3884791..29f70cda 100644
--- a/.github/workflows/ci-dev.yml
+++ b/.github/workflows/ci-dev.yml
@@ -52,12 +52,12 @@ jobs:
       - name: Lint
         run: pnpm run lint
 
-      - name: Build
-        run: pnpm run build
-
       - name: Typecheck
         run: pnpm run typecheck
 
+      - name: Build
+        run: pnpm run build
+
       - name: Release Edge
         if: github.event_name == 'push'
         run: ./scripts/release-edge.sh
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a2724ddc..8c1cd78d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -52,12 +52,12 @@ jobs:
       - name: Lint
         run: pnpm run lint
 
-      - name: Build
-        run: pnpm run build
-
       - name: Typecheck
         run: pnpm run typecheck
 
+      - name: Build
+        run: pnpm run build
+
       - name: Version Check
         id: check
         uses: EndBug/version-check@v2
diff --git a/.nuxtrc b/.nuxtrc
new file mode 100644
index 00000000..87857b2a
--- /dev/null
+++ b/.nuxtrc
@@ -0,0 +1,3 @@
+imports.autoImport=false
+typescript.includeWorkspace=true
+typescript.strict=false
diff --git a/docs/.nuxtrc b/docs/.nuxtrc
new file mode 100644
index 00000000..109361b8
--- /dev/null
+++ b/docs/.nuxtrc
@@ -0,0 +1 @@
+imports.autoImport=true
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index 3a19b92d..d899d5df 100644
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -24,10 +24,14 @@
     </template>
 
     <template #right>
-      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="$elements.button.secondary" />
+      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($elements.button.secondary as any)" />
+      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($elements.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="($elements.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($elements.button.secondary as any)" />
     </template>
   </UFooter>
 </template>
+
+<script setup lang="ts">
+// force typescript
+</script>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index ed1369a5..708e816e 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -27,7 +27,7 @@
         icon="i-simple-icons-github"
         aria-label="GitHub"
         class="hidden lg:inline-flex"
-        v-bind="$elements.button.secondary"
+        v-bind="($elements.button.secondary as any)"
       />
     </template>
 
diff --git a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
index 32f4585e..02ded2cf 100644
--- a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
@@ -27,8 +27,6 @@ const links = [{
   to: 'https://github.com/smarroufin',
   target: '_blank'
 }]
-
-const { ui } = useAppConfig()
 </script>
 
 <template>
@@ -36,8 +34,8 @@ const { ui } = useAppConfig()
     <template #avatar="{ link }">
       <UAvatar
         v-if="link.avatar"
-        v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
-        :class="[ui.verticalNavigation.avatar.base]"
+        v-bind="link.avatar"
+        size="3xs"
         loading="lazy"
       />
       <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index e3266cd3..3fc1f39f 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -1,5 +1,7 @@
 ---
 description: 'Learn how to customize the look and feel of the components.'
+navigation:
+  badge: New
 ---
 
 ## Overview
@@ -79,7 +81,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
 
 ### `app.config.ts`
 
-Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
+Components are styled with Tailwind CSS but classes are all defined in the default [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) file. You can override those in your own `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -91,6 +93,25 @@ export default defineAppConfig({
 })
 ```
 
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
+
+You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`: :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    strategy: 'override',
+    button: {
+      color: {
+        white: {
+          solid: 'bg-white dark:bg-gray-900'
+        }
+      }
+    }
+  }
+})
+```
+
 ### `ui` prop
 
 Each component has a `ui` prop that allows you to customize everything specifically.
@@ -113,25 +134,36 @@ For example, the default preset of the `FormGroup` component looks like this:
 
 ```json
 {
-  ...
   "label": {
-    "base": "block font-medium text-gray-700 dark:text-gray-200",
-    ...
+    "base": "block font-medium text-gray-700 dark:text-gray-200"
   }
-  ...
 }
 ```
 
 To change the font of the `label`, you only need to write:
 
 ```vue
-<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }">
-  ...
-</UFormGroup>
+<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
 ```
 
 This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
 
+You can change this behaviour by setting `strategy` to `override` inside the `ui` prop: :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+```vue
+<UButton
+  to="https://github.com/nuxt/ui"
+  :ui="{
+    strategy: 'override',
+    color: {
+      white: {
+        solid: 'bg-white dark:bg-gray-900'
+      }
+    }
+  }"
+/>
+```
+
 ### `class` attribute
 
 You can also use the `class` attribute to add classes to the component.
diff --git a/docs/content/5.navigation/1.vertical-navigation.md b/docs/content/5.navigation/1.vertical-navigation.md
index 5a224629..ea5cecf6 100644
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/docs/content/5.navigation/1.vertical-navigation.md
@@ -125,8 +125,6 @@ const links = [{
   to: 'https://github.com/benjamincanac',
   target: '_blank'
 }, ...]
-
-const { ui } = useAppConfig()
 </script>
 
 <template>
@@ -134,8 +132,8 @@ const { ui } = useAppConfig()
     <template #avatar="{ link }">
       <UAvatar
         v-if="link.avatar"
-        v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
-        :class="[ui.verticalNavigation.avatar.base]"
+        v-bind="link.avatar"
+        size="3xs"
       />
       <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
     </template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 64c7d691..f79e5c29 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -76,10 +76,6 @@ export default defineNuxtConfig({
       exposed: false
     }
   },
-  typescript: {
-    strict: false,
-    includeWorkspace: true
-  },
   hooks: {
     // Related to https://github.com/nuxt/nuxt/pull/22558
     'components:extend': (components) => {
diff --git a/docs/package.json b/docs/package.json
index c4c6fb72..185fd8cd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
     "@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
     "@nuxt/devtools": "^0.8.3",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28246521.0e46d44",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
diff --git a/package.json b/package.json
index c8a82d9b..a9ee9c25 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
     "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "nuxi typecheck",
-    "prepare": "nuxi prepare docs",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
+    "prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare docs",
     "release": "release-it"
   },
   "dependencies": {
@@ -45,9 +45,10 @@
     "@vueuse/integrations": "^10.4.1",
     "@vueuse/math": "^10.4.1",
     "defu": "^6.1.2",
-    "ohash": "^1.1.3",
-    "scule": "^1.0.0",
     "fuse.js": "^6.6.2",
+    "ohash": "^1.1.3",
+    "pathe": "^1.1.1",
+    "scule": "^1.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3"
   },
@@ -61,9 +62,9 @@
     "release-it": "^16.1.5",
     "typescript": "^5.2.2",
     "unbuild": "^2.0.0",
+    "valibot": "^0.15.0",
     "vue-tsc": "^1.8.11",
     "yup": "^1.2.0",
-    "zod": "^3.22.2",
-    "valibot": "^0.15.0"
+    "zod": "^3.22.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f14f8d7b..7fa0418d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       ohash:
         specifier: ^1.1.3
         version: 1.1.3
+      pathe:
+        specifier: ^1.1.1
+        version: 1.1.1
       scule:
         specifier: ^1.0.0
         version: 1.0.0
@@ -120,7 +123,7 @@ importers:
         version: 1.1.12
       '@iconify-json/simple-icons':
         specifier: latest
-        version: 1.1.70
+        version: 1.1.71
       '@nuxt/content':
         specifier: npm:@nuxt/content-edge@2.8.2-28246255.cae34d7
         version: /@nuxt/content-edge@2.8.2-28246255.cae34d7(rollup@3.28.1)(vue@3.3.4)
@@ -131,8 +134,8 @@ importers:
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.49.0)
       '@nuxthq/elements':
-        specifier: npm:@nuxthq/elements-edge@0.0.1-28246521.0e46d44
-        version: /@nuxthq/elements-edge@0.0.1-28246521.0e46d44(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
+        specifier: npm:@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad
+        version: /@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@nuxthq/studio':
         specifier: ^0.14.1
         version: 0.14.1(rollup@3.28.1)
@@ -1061,8 +1064,8 @@ packages:
     dependencies:
       '@iconify/types': 2.0.0
 
-  /@iconify-json/simple-icons@1.1.70:
-    resolution: {integrity: sha512-YZoHn180s0PELhjlMMTMVG8FxQOfP3AIn7P6KNV8xONzt/GwqMkYQ92DNYZbvSyQ4NhRajm27YkaOeSwNusr7A==}
+  /@iconify-json/simple-icons@1.1.71:
+    resolution: {integrity: sha512-3WVgJTaWBUOvq4G99v3Qs46zqnOJGNVMMlKCw+p8/gfbVz9mEAiwiqfGr+mpraotuwvUuQoJMi4SyseO8qjYDQ==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
@@ -1748,8 +1751,8 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/elements-edge@0.0.1-28246521.0e46d44(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-8MU2WXawTcZFpaAOuz0WYDBR8fjblH6UTS9wlXz3qNRya15wOAH62a7VNfdy2xsE8Rlmv1DeuIVFZnIO24Rmbw==}
+  /@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-y7ujX/dr4CcmY1JilTjpU++IEN5+9NrdeQseC8+OvLE3rHE0/5d9KWusa+0y+o5z3NjM3mzupSYraBWoH8/qvQ==}
     dependencies:
       '@nuxt/ui': 2.8.1(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
       '@vueuse/core': 10.4.1(vue@3.3.4)
@@ -7050,6 +7053,7 @@ packages:
   /jiti@1.19.3:
     resolution: {integrity: sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==}
     hasBin: true
+    dev: true
 
   /jiti@1.20.0:
     resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
@@ -11191,7 +11195,7 @@ packages:
       fast-glob: 3.3.1
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.19.3
+      jiti: 1.20.0
       lilconfig: 2.1.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
diff --git a/src/module.ts b/src/module.ts
index 39e7ccf5..369eaa3b 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,12 +1,12 @@
-import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin, resolvePath } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
 import defaultColors from 'tailwindcss/colors.js'
 import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
-import appConfig from './runtime/app.config'
-
-type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string } }>
+import createTemplates from './templates'
+import * as config from './runtime/ui.config'
+import type { DeepPartial, Strategy } from './runtime/types/utils'
 
 const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
@@ -16,13 +16,21 @@ delete defaultColors.trueGray
 delete defaultColors.coolGray
 delete defaultColors.blueGray
 
+type UI = {
+  primary?: string
+  gray?: string
+  colors?: string[]
+  strategy?: Strategy
+} & DeepPartial<typeof config>
+
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    ui?: UI
+  }
+}
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    ui?: {
-      primary?: string
-      gray?: string
-      colors?: string[]
-    } & DeepPartial<typeof appConfig.ui>
+    ui?: UI
   }
 }
 
@@ -64,12 +72,9 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.build.transpile.push(runtimeDir)
     nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue')
 
-    nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
+    nuxt.options.alias['#ui'] = runtimeDir
 
-    const appConfigFile = await resolvePath(resolve(runtimeDir, 'app.config'))
-    nuxt.hook('app:resolve', (app) => {
-      app.configs.push(appConfigFile)
-    })
+    nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
 
     nuxt.hook('tailwindcss:config', function (tailwindConfig) {
       const globalColors: any = {
@@ -117,10 +122,10 @@ export default defineNuxtModule<ModuleOptions>({
       const colors = excludeColors(globalColors)
 
       nuxt.options.appConfig.ui = {
-        ...nuxt.options.appConfig.ui,
         primary: 'green',
         gray: 'cool',
-        colors
+        colors,
+        strategy: 'merge'
       }
 
       tailwindConfig.safelist = tailwindConfig.safelist || []
@@ -130,6 +135,8 @@ export default defineNuxtModule<ModuleOptions>({
       tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
     })
 
+    createTemplates(nuxt)
+
     // Modules
 
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 6d1b5b56..da229a96 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs">
     <table :class="[ui.base, ui.divide]">
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
@@ -71,19 +71,17 @@ import { ref, computed, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
-import { twMerge } from 'tailwind-merge'
-import { omit, get } from '../../utils/lodash'
-import { defuTwMerge } from '../../utils'
 import UButton from '../elements/Button.vue'
 import UIcon from '../elements/Icon.vue'
 import UCheckbox from '../forms/Checkbox.vue'
-import type { Button } from '../../types/button'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, omit, get } from '../../utils'
+import type { Strategy, Button } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { table } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
 
 function defaultComparator<T> (a: T, z: T): boolean {
   return a === z
@@ -123,15 +121,15 @@ export default defineComponent({
     },
     sortButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.table.default.sortButton
+      default: () => config.default.sortButton as Button
     },
     sortAscIcon: {
       type: String,
-      default: () => appConfig.ui.table.default.sortAscIcon
+      default: () => config.default.sortAscIcon
     },
     sortDescIcon: {
       type: String,
-      default: () => appConfig.ui.table.default.sortDescIcon
+      default: () => config.default.sortDescIcon
     },
     loading: {
       type: Boolean,
@@ -139,25 +137,20 @@ export default defineComponent({
     },
     loadingState: {
       type: Object as PropType<{ icon: string, label: string }>,
-      default: () => appConfig.ui.table.default.loadingState
+      default: () => config.default.loadingState
     },
     emptyState: {
       type: Object as PropType<{ icon: string, label: string }>,
-      default: () => appConfig.ui.table.default.emptyState
+      default: () => config.default.emptyState
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.table>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
-  setup (props, { emit, attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.table>>(() => defuTwMerge({}, props.ui, appConfig.ui.table))
-
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+  setup (props, { emit, attrs: $attrs }) {
+    const { ui, attrs } = useUI('table', props.ui, config, { mergeWrapper: true })
 
     const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map((key) => ({ key, label: upperFirst(key), sortable: false })))
 
@@ -238,12 +231,12 @@ export default defineComponent({
     }
 
     function onSelect (row) {
-      if (!attrs.onSelect) {
+      if (!$attrs.onSelect) {
         return
       }
 
       // @ts-ignore
-      attrs.onSelect(row)
+      $attrs.onSelect(row)
     }
 
     function selectAllRows () {
@@ -254,7 +247,7 @@ export default defineComponent({
         }
 
         // @ts-ignore
-        attrs.onSelect ? attrs.onSelect(row) : selected.value.push(row)
+        $attrs.onSelect ? $attrs.onSelect(row) : selected.value.push(row)
       })
     }
 
@@ -271,10 +264,9 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      wrapperClass,
+      attrs,
       // eslint-disable-next-line vue/no-dupe-keys
       sort,
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/components/elements/Accordion.vue b/src/runtime/components/elements/Accordion.vue
index 76a7b05d..aaf8fcc0 100644
--- a/src/runtime/components/elements/Accordion.vue
+++ b/src/runtime/components/elements/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
       <HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
         <slot :item="item" :index="index" :open="open" :close="close">
@@ -43,17 +43,19 @@
 import { ref, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, omit } from '../../utils'
 import StateEmitter from '../../utils/StateEmitter'
-import type { AccordionItem } from '../../types/accordion'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import type { AccordionItem, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { accordion, button } from '#ui/ui.config'
+
+const config = mergeConfig<typeof accordion>(appConfig.ui.strategy, appConfig.ui.accordion, accordion)
+
+const configButton = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
 
 export default defineComponent({
   components: {
@@ -76,30 +78,25 @@ export default defineComponent({
     },
     openIcon: {
       type: String,
-      default: () => appConfig.ui.accordion.default.openIcon
+      default: () => config.default.openIcon
     },
     closeIcon: {
       type: String,
-      default: () => appConfig.ui.accordion.default.closeIcon
+      default: () => config.default.closeIcon
     },
     multiple: {
       type: Boolean,
       default: false
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.accordion>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
+  setup (props) {
+    const { ui, attrs } = useUI('accordion', props.ui, config, { mergeWrapper: true })
 
-    const ui = computed<Partial<typeof appConfig.ui.accordion>>(() => defuTwMerge({}, props.ui, appConfig.ui.accordion))
-
-    const uiButton = computed<Partial<typeof appConfig.ui.button>>(() => appConfig.ui.button)
-
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+    const uiButton = computed<Partial<typeof configButton>>(() => configButton)
 
     const buttonRefs = ref<Function[]>([])
 
@@ -139,11 +136,10 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       uiButton,
-      wrapperClass,
+      attrs,
       buttonRefs,
       closeOthers,
       omit,
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index ecd8812c..db9553d9 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -38,16 +38,15 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
-import type { Avatar } from '../../types/avatar'
-import type { Button } from '../../types/button'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import type { Avatar, Button, NestedKeyOf, Strategy } from '../../types'
+import { mergeConfig } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'
-import { omit } from '../../utils/lodash'
+import { alert } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof alert>(appConfig.ui.strategy, appConfig.ui.alert, alert)
 
 export default defineComponent({
   components: {
@@ -67,7 +66,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.alert.default.icon
+      default: () => config.default.icon
     },
     avatar: {
       type: Object as PropType<Avatar>,
@@ -75,40 +74,37 @@ export default defineComponent({
     },
     closeButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.alert.default.closeButton
+      default: () => config.default.closeButton as Button
     },
     actions: {
       type: Array as PropType<(Button & { click?: Function })[]>,
       default: () => []
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.alert.default.color,
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.alert.default.variant,
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.alert.variant),
-          ...Object.values(appConfig.ui.alert.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.alert>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['close'],
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.alert>>(() => defuTwMerge({}, props.ui, appConfig.ui.alert))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('alert', props.ui, config)
 
     const alertClass = computed(() => {
       const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -119,13 +115,13 @@ export default defineComponent({
         ui.value.shadow,
         ui.value.padding,
         variant?.replaceAll('{color}', props.color)
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       alertClass
     }
   }
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index 0f0de78a..5fa62781 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -24,13 +24,14 @@ import { defineComponent, ref, computed, watch } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
-import { omit } from '../../utils/lodash'
-// const appConfig = useAppConfig()
+import { avatar } from '#ui/ui.config'
+
+const config = mergeConfig<typeof avatar>(appConfig.ui.strategy, appConfig.ui.avatar, avatar)
 
 export default defineComponent({
   components: {
@@ -52,27 +53,27 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.avatar.default.icon
+      default: () => config.default.icon
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.avatar.default.size,
+      type: String as PropType<AvatarSize>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.avatar.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     chipColor: {
-      type: String,
-      default: () => appConfig.ui.avatar.default.chipColor,
+      type: String as PropType<AvatarChipColor>,
+      default: () => config.default.chipColor,
       validator (value: string) {
         return ['gray', ...appConfig.ui.colors].includes(value)
       }
     },
     chipPosition: {
-      type: String,
-      default: () => appConfig.ui.avatar.default.chipPosition,
+      type: String as PropType<AvatarChipPosition>,
+      default: () => config.default.chipPosition,
       validator (value: string) {
-        return Object.keys(appConfig.ui.avatar.chip.position).includes(value)
+        return Object.keys(config.chip.position).includes(value)
       }
     },
     chipText: {
@@ -84,15 +85,12 @@ export default defineComponent({
       default: ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.avatar>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.avatar>>(() => defuTwMerge({}, props.ui, appConfig.ui.avatar))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('avatar', props.ui, config)
 
     const url = computed(() => {
       if (typeof props.src === 'boolean') {
@@ -111,7 +109,7 @@ export default defineComponent({
         (error.value || !url.value) && ui.value.background,
         ui.value.rounded,
         ui.value.size[props.size]
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     const imgClass = computed(() => {
@@ -150,7 +148,9 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
       wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       imgClass,
diff --git a/src/runtime/components/elements/AvatarGroup.ts b/src/runtime/components/elements/AvatarGroup.ts
index d0bd1ebe..2dbf43a0 100644
--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -1,24 +1,26 @@
 import { h, cloneVNode, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge, getSlotsChildren } from '../../utils'
-import Avatar from './Avatar.vue'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import UAvatar from './Avatar.vue'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, getSlotsChildren } from '../../utils'
+import type { AvatarSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { avatar, avatarGroup } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const avatarConfig = mergeConfig<typeof avatar>(appConfig.ui.strategy, appConfig.ui.avatar, avatar)
+
+const avatarGroupConfig = mergeConfig<typeof avatarGroup>(appConfig.ui.strategy, appConfig.ui.avatarGroup, avatarGroup)
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
     size: {
-      type: String,
+      type: String as PropType<keyof typeof avatarConfig.size>,
       default: null,
       validator (value: string) {
-        return Object.keys(appConfig.ui.avatar.size).includes(value)
+        return Object.keys(avatarConfig.size).includes(value)
       }
     },
     max: {
@@ -26,15 +28,12 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.avatarGroup>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs, slots }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.avatarGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.avatarGroup))
+  setup (props, { slots }) {
+    const { ui, attrs } = useUI('avatarGroup', props.ui, avatarGroupConfig, { mergeWrapper: true })
 
     const children = computed(() => getSlotsChildren(slots))
 
@@ -55,8 +54,8 @@ export default defineComponent({
       }
 
       if (max.value !== undefined && index === max.value) {
-        return h(Avatar, {
-          size: props.size || appConfig.ui.avatar.default.size,
+        return h(UAvatar, {
+          size: props.size || (avatarConfig.default.size as AvatarSize),
           text: `+${children.value.length - max.value}`,
           class: twJoin(ui.value.ring, ui.value.margin)
         })
@@ -65,6 +64,6 @@ export default defineComponent({
       return null
     }).filter(Boolean).reverse())
 
-    return () => h('div', { class: twMerge(ui.value.wrapper, attrs.class as string), ...omit(attrs, ['class']) }, clones.value)
+    return () => h('div', { class: ui.value.wrapper, ...attrs.value }, clones.value)
   }
 })
diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index 26c71288..07df9c05 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -7,40 +7,41 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { NestedKeyOf, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { badge } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof badge>(appConfig.ui.strategy, appConfig.ui.badge, badge)
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
     size: {
-      type: String,
-      default: () => appConfig.ui.badge.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.badge.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.badge.default.color,
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.badge.default.variant,
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.badge.variant),
-          ...Object.values(appConfig.ui.badge.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
@@ -49,15 +50,12 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.badge>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.badge>>(() => defuTwMerge({}, props.ui, appConfig.ui.badge))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('badge', props.ui, config)
 
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -68,11 +66,11 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.size[props.size],
         variant?.replaceAll('{color}', props.color)
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
+      attrs,
       badgeClass
     }
   }
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 09ced47c..c4fd7969 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -19,17 +19,17 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { button } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
 
 export default defineComponent({
   components: {
@@ -63,26 +63,26 @@ export default defineComponent({
       default: true
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.button.default.size,
+      type: String as PropType<ButtonSize>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.button.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.button.default.color,
+      type: String as PropType<ButtonColor>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.button.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.button.default.variant,
+      type: String as PropType<ButtonVariant>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.button.variant),
-          ...Object.values(appConfig.ui.button.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
@@ -92,7 +92,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.button.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -119,15 +119,12 @@ export default defineComponent({
       default: false
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.button>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs, slots }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.button>>(() => defuTwMerge({}, props.ui, appConfig.ui.button))
+  setup (props, { slots }) {
+    const { ui, attrs, attrsClass } = useUI('button', props.ui, config)
 
     const isLeading = computed(() => {
       return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -151,7 +148,7 @@ export default defineComponent({
         props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
         variant?.replaceAll('{color}', props.color),
         props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     const leadingIconName = computed(() => {
@@ -187,7 +184,7 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
+      attrs,
       isLeading,
       isTrailing,
       isSquare,
diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index edf37860..7396b198 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -1,23 +1,24 @@
 import { h, cloneVNode, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge, getSlotsChildren } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, getSlotsChildren } from '../../utils'
+import type { ButtonSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { button, buttonGroup } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
+const buttonGroupConfig = mergeConfig<typeof buttonGroup>(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup)
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
     size: {
-      type: String,
+      type: String as PropType<ButtonSize>,
       default: null,
       validator (value: string) {
-        return Object.keys(appConfig.ui.button.size).includes(value)
+        return Object.keys(buttonConfig.size).includes(value)
       }
     },
     orientation: {
@@ -28,15 +29,12 @@ export default defineComponent({
       }
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.buttonGroup>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs, slots }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.buttonGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.buttonGroup))
+  setup (props, { slots }) {
+    const { ui, attrs, attrsClass } = useUI('buttonGroup', props.ui, buttonGroupConfig)
 
     const children = computed(() => getSlotsChildren(slots))
 
@@ -58,12 +56,6 @@ export default defineComponent({
     const clones = computed(() => children.value.map((node, index) => {
       const vProps: any = {}
 
-      if (props.orientation === 'vertical') {
-        ui.value.wrapper = 'flex flex-col -space-y-px'
-      } else {
-        ui.value.wrapper = 'inline-flex -space-x-px'
-      }
-
       if (props.size) {
         vProps.size = props.size
       }
@@ -83,6 +75,14 @@ export default defineComponent({
       return cloneVNode(node, vProps)
     }))
 
-    return () => h('div', { class: twMerge(twJoin(ui.value.wrapper, ui.value.rounded, ui.value.shadow), attrs.class as string), ...omit(attrs, ['class']) }, clones.value)
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper[props.orientation],
+        ui.value.rounded,
+        ui.value.shadow
+      ), attrsClass)
+    })
+
+    return () => h('div', { class: wrapperClass.value, ...attrs.value }, clones.value)
   }
 })
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index a5c22ee5..f213a41b 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <HMenu v-slot="{ open }" as="div" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HMenuButton
       ref="trigger"
       as="div"
@@ -49,22 +49,19 @@ import { defineComponent, ref, computed, onMounted } from 'vue'
 import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
 import { defu } from 'defu'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import ULink from '../elements/Link.vue'
+import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { defuTwMerge } from '../../utils'
-import type { DropdownItem } from '../../types/dropdown'
-import type { PopperOptions } from '../../types/popper'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig, omit } from '../../utils'
+import type { DropdownItem, PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { dropdown } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof dropdown>(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown)
 
 export default defineComponent({
   components: {
@@ -105,15 +102,12 @@ export default defineComponent({
       default: 0
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.dropdown>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.dropdown>>(() => defuTwMerge({}, props.ui, appConfig.ui.dropdown))
+  setup (props) {
+    const { ui, attrs } = useUI('dropdown', props.ui, config, { mergeWrapper: true })
 
     const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
 
@@ -143,8 +137,6 @@ export default defineComponent({
       return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     function onMouseOver () {
       if (props.mode !== 'hover' || !menuApi.value) {
         return
@@ -186,13 +178,12 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       trigger,
       container,
       containerStyle,
-      wrapperClass,
       onMouseOver,
       onMouseLeave,
       omit
diff --git a/src/runtime/components/elements/Kbd.vue b/src/runtime/components/elements/Kbd.vue
index a8946653..5991f12d 100644
--- a/src/runtime/components/elements/Kbd.vue
+++ b/src/runtime/components/elements/Kbd.vue
@@ -7,15 +7,15 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { kbd } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof kbd>(appConfig.ui.strategy, appConfig.ui.kbd, kbd)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -25,22 +25,19 @@ export default defineComponent({
       default: null
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.kbd.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.kbd.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.kbd>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.kbd>>(() => defuTwMerge({}, props.ui, appConfig.ui.kbd))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('kbd', props.ui, config)
 
     const kbdClass = computed(() => {
       return twMerge(twJoin(
@@ -51,13 +48,13 @@ export default defineComponent({
         ui.value.font,
         ui.value.background,
         ui.value.ring
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       kbdClass
     }
   }
diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue
index 865b9e05..f6f13508 100644
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
         :id="name"
@@ -32,16 +32,17 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { checkbox } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -83,8 +84,8 @@ export default defineComponent({
       default: false
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.checkbox.default.color,
+      type: String as PropType<typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
         return appConfig.ui.colors.includes(value)
       }
@@ -94,16 +95,13 @@ export default defineComponent({
       default: ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.checkbox>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'change'],
-  setup (props, { emit, attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.checkbox>>(() => defuTwMerge({}, props.ui, appConfig.ui.checkbox))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('checkbox', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, formGroup } = useFormGroup()
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
@@ -122,8 +120,6 @@ export default defineComponent({
       emitFormChange()
     }
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -136,11 +132,10 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       toggle,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass,
       onChange
diff --git a/src/runtime/components/forms/FormGroup.vue b/src/runtime/components/forms/FormGroup.vue
index 465fbcda..a121f5bf 100644
--- a/src/runtime/components/forms/FormGroup.vue
+++ b/src/runtime/components/forms/FormGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs">
     <div v-if="label" :class="[ui.label.wrapper, size]">
       <label :for="labelFor" :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</label>
       <span v-if="hint" :class="[ui.hint]">{{ hint }}</span>
@@ -20,18 +20,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, inject } from 'vue'
-import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
-import type { FormError, InjectedFormGroupValue } from '../../types/form'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { computed, defineComponent, provide, inject, ref } from 'vue'
+import type { Ref, PropType } from 'vue'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { FormError, InjectedFormGroupValue, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { formGroup } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
 
 let increment = 0
 
@@ -43,10 +41,10 @@ export default defineComponent({
       default: null
     },
     size: {
-      type: String,
+      type: String as PropType<keyof typeof config.size>,
       default: null,
       validator (value: string) {
-        return Object.keys(appConfig.ui.formGroup.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     label: {
@@ -74,17 +72,12 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.formGroup>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.formGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.formGroup))
-
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+  setup (props) {
+    const { ui, attrs } = useUI('formGroup', props.ui, config, { mergeWrapper: true })
 
     const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
@@ -94,7 +87,7 @@ export default defineComponent({
         : formErrors?.value?.find((error) => error.path === props.name)?.message
     })
 
-    const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])
+    const size = computed(() => ui.value.size[props.size ?? config.default.size])
     const labelFor = ref(`${props.name || 'lf'}-${increment = increment < 1000000 ? increment + 1 : 0}`)
 
     provide<InjectedFormGroupValue>('form-group', {
@@ -105,11 +98,10 @@ export default defineComponent({
     })
 
     return {
-      labelFor,
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      wrapperClass,
+      attrs,
+      labelFor,
       // eslint-disable-next-line vue/no-dupe-keys
       size,
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 33213322..09f7a921 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <input
-      :id="labelFor"
+      :id="id"
       ref="input"
       :name="name"
       :value="modelValue"
@@ -34,17 +34,18 @@
 <script lang="ts">
 import { ref, computed, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { NestedKeyOf, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { input } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
 
 export default defineComponent({
   components: {
@@ -90,7 +91,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.input.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -117,26 +118,26 @@ export default defineComponent({
       default: true
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.input.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.input.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.input.default.color,
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.input.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.input.default.variant,
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.input.variant),
-          ...Object.values(appConfig.ui.input.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
@@ -145,21 +146,18 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.input>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'blur'],
-  setup (props, { emit, attrs, slots }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.input>>(() => defuTwMerge({}, props.ui, appConfig.ui.input))
+  setup (props, { emit, slots }) {
+    const { ui, attrs } = useUI('input', props.ui, config, { mergeWrapper: true })
 
     const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
     const size = computed(() => formGroup?.size?.value ?? props.size)
-    const labelFor = formGroup?.labelFor
+    const id = formGroup?.labelFor
 
     const input = ref<HTMLInputElement | null>(null)
 
@@ -185,8 +183,6 @@ export default defineComponent({
       }, 100)
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -261,14 +257,14 @@ export default defineComponent({
     })
 
     return {
-      labelFor,
-      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      id,
       input,
       isLeading,
       isTrailing,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass,
       leadingIconName,
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 7dd966ab..c85af60a 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
         :id="`${name}-${value}`"
@@ -29,16 +29,17 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { radio } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -72,8 +73,8 @@ export default defineComponent({
       default: false
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.radio.default.color,
+      type: String as PropType<typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
         return appConfig.ui.colors.includes(value)
       }
@@ -83,16 +84,13 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.radio>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
-  setup (props, { emit, attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.radio>>(() => defuTwMerge({}, props.ui, appConfig.ui.radio))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('radio', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, formGroup } = useFormGroup()
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
@@ -109,8 +107,6 @@ export default defineComponent({
       }
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -122,11 +118,10 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       pick,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass
     }
diff --git a/src/runtime/components/forms/Range.vue b/src/runtime/components/forms/Range.vue
index c5815778..3888e3b3 100644
--- a/src/runtime/components/forms/Range.vue
+++ b/src/runtime/components/forms/Range.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="wrapperClass">
     <input
-      :id="labelFor"
+      :id="id"
       ref="input"
       v-model.number="value"
       :name="name"
@@ -22,14 +22,17 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { range } from '#ui/ui.config'
+import colors from '#ui-colors'
+
+const config = mergeConfig<typeof range>(appConfig.ui.strategy, appConfig.ui.range, range)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -63,15 +66,15 @@ export default defineComponent({
       default: 1
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.range.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.range.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.range.default.color,
+      type: String as PropType<typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
         return appConfig.ui.colors.includes(value)
       }
@@ -81,21 +84,18 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.range>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'change'],
-  setup (props, { emit, attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.range>>(() => defuTwMerge({}, props.ui, appConfig.ui.range))
+  setup (props, { emit }) {
+    const { ui, attrs, attrsClass } = useUI('range', props.ui, config)
 
     const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
     const size = computed(() => formGroup?.size?.value ?? props.size)
-    const labelFor = formGroup?.labelFor
+    const id = formGroup?.labelFor
 
     const value = computed({
       get () {
@@ -115,7 +115,7 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.wrapper,
         ui.value.size[size.value]
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     const inputClass = computed(() => {
@@ -167,10 +167,11 @@ export default defineComponent({
     })
 
     return {
-      labelFor,
-      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      id,
       value,
       wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index aa09ae31..610d98dc 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <select
-      :id="labelFor"
+      :id="id"
       :name="name"
       :value="modelValue"
       :required="required"
@@ -56,17 +56,18 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
-import { get, omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig, get } from '../../utils'
+import type { NestedKeyOf, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { select } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
 
 export default defineComponent({
   components: {
@@ -104,7 +105,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.input.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -112,7 +113,7 @@ export default defineComponent({
     },
     trailingIcon: {
       type: String,
-      default: () => appConfig.ui.select.default.trailingIcon
+      default: () => config.default.trailingIcon
     },
     trailing: {
       type: Boolean,
@@ -135,26 +136,26 @@ export default defineComponent({
       default: () => []
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.select.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.select.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.select.default.color,
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.select.default.variant,
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.select.variant),
-          ...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
@@ -171,22 +172,18 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.select>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'change'],
-  setup (props, { emit, attrs, slots }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
+  setup (props, { emit, slots }) {
+    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
     const size = computed(() => formGroup?.size?.value ?? props.size)
-    const labelFor = formGroup?.labelFor
-
+    const id = formGroup?.labelFor
 
     const onInput = (event: InputEvent) => {
       emit('update:modelValue', (event.target as HTMLInputElement).value)
@@ -249,8 +246,6 @@ export default defineComponent({
       return foundOption[props.valueAttribute]
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -324,15 +319,15 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      labelFor,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      id,
       normalizedOptionsWithPlaceholder,
       normalizedValue,
       isLeading,
       isTrailing,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       selectClass,
       leadingIconName,
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index a1f243f2..e01c9128 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -8,7 +8,7 @@
     :multiple="multiple"
     :disabled="disabled || loading"
     as="div"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     @update:model-value="onUpdate"
   >
     <input
@@ -28,7 +28,7 @@
       class="inline-flex w-full"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :id="labelFor" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
+        <button :id="id" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
             <slot name="leading" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -131,20 +131,22 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import type { PopperOptions } from '../../types/popper'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { PopperOptions, NestedKeyOf, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { select, selectMenu } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
+
+const configMenu = mergeConfig<typeof selectMenu>(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu)
 
 export default defineComponent({
   components: {
@@ -192,7 +194,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.input.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -200,7 +202,7 @@ export default defineComponent({
     },
     trailingIcon: {
       type: String,
-      default: () => appConfig.ui.select.default.trailingIcon
+      default: () => config.default.trailingIcon
     },
     trailing: {
       type: Boolean,
@@ -216,7 +218,7 @@ export default defineComponent({
     },
     selectedIcon: {
       type: String,
-      default: () => appConfig.ui.selectMenu.default.selectedIcon
+      default: () => configMenu.default.selectedIcon
     },
     disabled: {
       type: Boolean,
@@ -251,26 +253,26 @@ export default defineComponent({
       default: true
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.select.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.select.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.select.default.color,
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.select.default.variant,
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.select.variant),
-          ...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
@@ -295,21 +297,19 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.select>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     },
     uiMenu: {
-      type: Object as PropType<Partial<typeof appConfig.ui.selectMenu>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'open', 'close', 'change'],
-  setup (props, { emit, attrs, slots }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
+  setup (props, { emit, slots }) {
+    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
 
-    const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
-    const uiMenu = computed<Partial<typeof appConfig.ui.selectMenu>>(() => defuTwMerge({}, props.uiMenu, appConfig.ui.selectMenu))
+    const { ui: uiMenu } = useUI('selectMenu', props.uiMenu, configMenu)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
 
@@ -317,13 +317,11 @@ export default defineComponent({
     const { emitFormBlur, emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
     const size = computed(() => formGroup?.size?.value ?? props.size)
-    const labelFor = formGroup?.labelFor
+    const id = formGroup?.labelFor
 
     const query = ref('')
     const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -442,15 +440,17 @@ export default defineComponent({
     }
 
     return {
-      labelFor,
-      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       // eslint-disable-next-line vue/no-dupe-keys
       uiMenu,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      id,
       trigger,
       container,
       isLeading,
       isTrailing,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       selectClass,
       leadingIconName,
diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue
index 80f54a01..6dfa0369 100644
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <textarea
-      :id="labelFor"
+      :id="id"
       ref="textarea"
       :value="modelValue"
       :name="name"
@@ -21,16 +21,17 @@
 <script lang="ts">
 import { ref, computed, watch, onMounted, nextTick, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { NestedKeyOf, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { textarea } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof textarea>(appConfig.ui.strategy, appConfig.ui.textarea, textarea)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -80,26 +81,26 @@ export default defineComponent({
       default: true
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.textarea.default.size,
+      type: String as PropType<keyof typeof config.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.textarea.size).includes(value)
+        return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.textarea.default.color,
+      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.textarea.color)].includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String,
-      default: () => appConfig.ui.textarea.default.variant,
+      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      default: () => config.default.variant,
       validator (value: string) {
         return [
-          ...Object.keys(appConfig.ui.textarea.variant),
-          ...Object.values(appConfig.ui.textarea.color).flatMap(value => Object.keys(value))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap(value => Object.keys(value))
         ].includes(value)
       }
     },
@@ -108,23 +109,20 @@ export default defineComponent({
       default: null
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.textarea>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'blur'],
-  setup (props, { emit, attrs }) {
-    const textarea = ref<HTMLTextAreaElement | null>(null)
-
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.textarea>>(() => defuTwMerge({}, props.ui, appConfig.ui.textarea))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('textarea', props.ui, config, { mergeWrapper: true })
 
     const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
     const size = computed(() => formGroup?.size?.value ?? props.size)
-    const labelFor = formGroup?.labelFor
+    const id = formGroup?.labelFor
+
+    const textarea = ref<HTMLTextAreaElement | null>(null)
 
     const autoFocus = () => {
       if (props.autofocus) {
@@ -183,8 +181,6 @@ export default defineComponent({
       }, 100)
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const textareaClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -200,10 +196,12 @@ export default defineComponent({
     })
 
     return {
-      labelFor,
-      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      id,
       textarea,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       textareaClass,
       onInput,
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 0d6ef32f..de4a5eb3 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
   <HSwitch
-    :id="labelFor"
+    :id="id"
     v-model="active"
     :name="name"
     :disabled="disabled"
@@ -22,17 +22,18 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch } from '@headlessui/vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
-import { defuTwMerge } from '../../utils'
+import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { toggle } from '#ui/ui.config'
+import colors from '#ui-colors'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof toggle>(appConfig.ui.strategy, appConfig.ui.toggle, toggle)
 
 export default defineComponent({
   components: {
@@ -59,34 +60,31 @@ export default defineComponent({
     },
     onIcon: {
       type: String,
-      default: () => appConfig.ui.toggle.default.onIcon
+      default: () => config.default.onIcon
     },
     offIcon: {
       type: String,
-      default: () => appConfig.ui.toggle.default.offIcon
+      default: () => config.default.offIcon
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.toggle.default.color,
+      type: String as PropType<typeof colors[number]>,
+      default: () => config.default.color,
       validator (value: string) {
         return appConfig.ui.colors.includes(value)
       }
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.toggle>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
-  setup (props, { emit, attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.toggle>>(() => defuTwMerge({}, props.ui, appConfig.ui.toggle))
+  setup (props, { emit }) {
+    const { ui, attrs, attrsClass } = useUI('toggle', props.ui, config)
 
     const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const labelFor = formGroup?.labelFor
+    const id = formGroup?.labelFor
 
     const active = computed({
       get () {
@@ -104,7 +102,7 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.ring.replaceAll('{color}', color.value),
         (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     const onIconClass = computed(() => {
@@ -120,10 +118,11 @@ export default defineComponent({
     })
 
     return {
-      labelFor,
-      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      id,
       active,
       switchClass,
       onIconClass,
diff --git a/src/runtime/components/layout/Card.vue b/src/runtime/components/layout/Card.vue
index 419fd574..201fefe2 100644
--- a/src/runtime/components/layout/Card.vue
+++ b/src/runtime/components/layout/Card.vue
@@ -19,15 +19,15 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { card } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof card>(appConfig.ui.strategy, appConfig.ui.card, card)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -37,15 +37,12 @@ export default defineComponent({
       default: 'div'
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.card>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.card>>(() => defuTwMerge({}, props.ui, appConfig.ui.card))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('card', props.ui, config)
 
     const cardClass = computed(() => {
       return twMerge(twJoin(
@@ -55,13 +52,13 @@ export default defineComponent({
         ui.value.ring,
         ui.value.shadow,
         ui.value.background
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       cardClass
     }
   }
diff --git a/src/runtime/components/layout/Container.vue b/src/runtime/components/layout/Container.vue
index ad794187..e99c4885 100644
--- a/src/runtime/components/layout/Container.vue
+++ b/src/runtime/components/layout/Container.vue
@@ -7,15 +7,15 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { container } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof container>(appConfig.ui.strategy, appConfig.ui.container, container)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -25,28 +25,25 @@ export default defineComponent({
       default: 'div'
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.container>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.container>>(() => defuTwMerge({}, props.ui, appConfig.ui.container))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('container', props.ui, config)
 
     const containerClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
         ui.value.padding,
         ui.value.constrained
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       containerClass
     }
   }
diff --git a/src/runtime/components/layout/Skeleton.vue b/src/runtime/components/layout/Skeleton.vue
index b18e3f06..e25538b3 100644
--- a/src/runtime/components/layout/Skeleton.vue
+++ b/src/runtime/components/layout/Skeleton.vue
@@ -5,42 +5,39 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { skeleton } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof skeleton>(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton)
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.skeleton>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.skeleton>>(() => defuTwMerge({}, props.ui, appConfig.ui.skeleton))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('skeleton', props.ui, config)
 
     const skeletonClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
         ui.value.background,
         ui.value.rounded
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       skeletonClass
     }
   }
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index bf9905de..9d1dabb8 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -4,7 +4,7 @@
     :model-value="modelValue"
     :multiple="multiple"
     :nullable="nullable"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     v-bind="attrs"
     as="div"
     @update:model-value="onSelect"
@@ -67,22 +67,20 @@ import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
-import { twMerge, twJoin } from 'tailwind-merge'
-import { omit } from '../../utils/lodash'
-import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { Group, Command } from '../../types/command-palette'
+import { twJoin } from 'tailwind-merge'
+import { defu } from 'defu'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
-import type { Button } from '../../types/button'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Group, Command, Button, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { commandPalette } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof commandPalette>(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette)
 
 export default defineComponent({
   components: {
@@ -125,23 +123,23 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.icon
+      default: () => config.default.icon
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     selectedIcon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.selectedIcon
+      default: () => config.default.selectedIcon
     },
     closeButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.commandPalette.default.closeButton
+      default: () => config.default.closeButton as Button
     },
     emptyState: {
       type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
-      default: () => appConfig.ui.commandPalette.default.emptyState
+      default: () => config.default.emptyState
     },
     placeholder: {
       type: String,
@@ -172,16 +170,13 @@ export default defineComponent({
       default: () => ({})
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { emit, attrs, expose }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defuTwMerge({}, props.ui, appConfig.ui.commandPalette))
+  setup (props, { emit, expose }) {
+    const { ui, attrs } = useUI('commandPalette', props.ui, config, { mergeWrapper: true })
 
     const query = ref('')
     const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
@@ -284,8 +279,6 @@ export default defineComponent({
       }, 0)
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const iconName = computed(() => {
       if ((props.loading || isLoading.value) && props.loadingIcon) {
         return props.loadingIcon
@@ -343,14 +336,13 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       // eslint-disable-next-line vue/no-dupe-keys
       groups,
       comboboxInput,
       query,
-      wrapperClass,
       iconName,
       iconClass,
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index b6fc6775..d1d15fd5 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -76,12 +76,8 @@ import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
-import type { Group } from '../../types/command-palette'
-// TODO: Remove
-// @ts-expect-error
-import appConfig from '#build/app.config'
-
-// const appConfig = useAppConfig()
+import type { Group } from '../../types'
+import { commandPalette } from '#ui/ui.config'
 
 export default defineComponent({
   components: {
@@ -112,8 +108,8 @@ export default defineComponent({
       required: true
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
-      default: () => ({})
+      type: Object as PropType<typeof commandPalette>,
+      required: true
     }
   },
   setup (props) {
diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index f0747fbc..ed02753c 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs">
     <slot name="prev" :on-click="onClickPrev">
       <UButton
         v-if="prevButton"
@@ -42,17 +42,17 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import UButton from '../elements/Button.vue'
-import { defuTwMerge } from '../../utils'
-import type { Button } from '../../types/button'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Button, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { pagination, button } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof pagination>(appConfig.ui.strategy, appConfig.ui.pagination, pagination)
+
+const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
 
 export default defineComponent({
   components: {
@@ -80,43 +80,40 @@ export default defineComponent({
       }
     },
     size: {
-      type: String,
-      default: () => appConfig.ui.pagination.default.size,
+      type: String as PropType<keyof typeof buttonConfig.size>,
+      default: () => config.default.size,
       validator (value: string) {
-        return Object.keys(appConfig.ui.button.size).includes(value)
+        return Object.keys(buttonConfig.size).includes(value)
       }
     },
     activeButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.pagination.default.activeButton
+      default: () => config.default.activeButton as Button
     },
     inactiveButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.pagination.default.inactiveButton
+      default: () => config.default.inactiveButton as Button
     },
     prevButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.pagination.default.prevButton
+      default: () => config.default.prevButton as Button
     },
     nextButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.pagination.default.nextButton
+      default: () => config.default.nextButton as Button
     },
     divider: {
       type: String,
       default: '…'
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.pagination>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
-  setup (props, { attrs, emit }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.pagination>>(() => defuTwMerge({}, props.ui, appConfig.ui.pagination))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('pagination', props.ui, config, { mergeWrapper: true })
 
     const currentPage = computed({
       get () {
@@ -182,8 +179,6 @@ export default defineComponent({
     const canGoPrev = computed(() => currentPage.value > 1)
     const canGoNext = computed(() => currentPage.value < pages.value.length)
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     function onClickPage (page: number | string) {
       if (typeof page === 'string') {
         return
@@ -209,15 +204,14 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       currentPage,
       pages,
       displayedPages,
       canGoPrev,
       canGoNext,
-      wrapperClass,
       onClickPrev,
       onClickNext,
       onClickPage
diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index 9de4321e..c3206c4e 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -3,7 +3,7 @@
     :vertical="orientation === 'vertical'"
     :selected-index="selectedIndex"
     as="div"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     v-bind="attrs"
     @change="onChange"
   >
@@ -48,20 +48,18 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, watch, onMounted, defineComponent } from 'vue'
+import { ref, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import type { TabItem } from '../../types/tabs'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { TabItem, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { tabs } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs, tabs)
 
 export default defineComponent({
   components: {
@@ -91,16 +89,13 @@ export default defineComponent({
       default: () => []
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.tabs>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'change'],
-  setup (props, { attrs, emit }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defuTwMerge({}, props.ui, appConfig.ui.tabs))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('tabs', props.ui, config, { mergeWrapper: true })
 
     const listRef = ref<HTMLElement>()
     const itemRefs = ref<HTMLElement[]>([])
@@ -108,8 +103,6 @@ export default defineComponent({
 
     const selectedIndex = ref(props.modelValue || props.defaultIndex)
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     // Methods
 
     function calcMarkerSize (index: number) {
@@ -149,14 +142,13 @@ export default defineComponent({
     onMounted(() => calcMarkerSize(selectedIndex.value))
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       listRef,
       itemRefs,
       markerRef,
       selectedIndex,
-      wrapperClass,
       onChange
     }
   }
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 3d49a75b..3bed8748 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav :class="wrapperClass" v-bind="attrs">
+  <nav :class="ui.wrapper" v-bind="attrs">
     <ULink
       v-for="(link, index) of links"
       v-slot="{ isActive }"
@@ -38,21 +38,19 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import ULink from '../elements/Link.vue'
-import { defuTwMerge } from '../../utils'
-import type { VerticalNavigationLink } from '../../types/vertical-navigation'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, omit } from '../../utils'
+import type { VerticalNavigationLink, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { verticalNavigation } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof verticalNavigation>(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation)
 
 export default defineComponent({
   components: {
@@ -67,23 +65,17 @@ export default defineComponent({
       default: () => []
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.verticalNavigation>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.verticalNavigation>>(() => defuTwMerge({}, props.ui, appConfig.ui.verticalNavigation))
-
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+  setup (props) {
+    const { ui, attrs } = useUI('verticalNavigation', props.ui, config, { mergeWrapper: true })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      wrapperClass,
+      attrs,
       omit
     }
   }
diff --git a/src/runtime/components/overlays/ContextMenu.vue b/src/runtime/components/overlays/ContextMenu.vue
index 4f6b7dab..744e72fe 100644
--- a/src/runtime/components/overlays/ContextMenu.vue
+++ b/src/runtime/components/overlays/ContextMenu.vue
@@ -14,17 +14,16 @@ import type { PropType, Ref } from 'vue'
 import { defu } from 'defu'
 import { onClickOutside } from '@vueuse/core'
 import type { VirtualElement } from '@popperjs/core'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
+import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { defuTwMerge } from '../../utils'
-import type { PopperOptions } from '../../types/popper'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { contextMenu } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof contextMenu>(appConfig.ui.strategy, appConfig.ui.contextMenu, contextMenu)
 
 export default defineComponent({
   inheritAttrs: false,
@@ -42,16 +41,13 @@ export default defineComponent({
       default: () => ({})
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.contextMenu>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { attrs, emit }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.contextMenu>>(() => defuTwMerge({}, props.ui, appConfig.ui.contextMenu))
+  setup (props, { emit }) {
+    const { ui, attrs, attrsClass } = useUI('contextMenu', props.ui, config)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
@@ -72,7 +68,7 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.container,
         ui.value.width
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     onClickOutside(container, () => {
@@ -80,9 +76,9 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
       wrapperClass,
       container
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 0c874cb6..b19652de 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="wrapperClass" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -32,16 +32,15 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { modal } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof modal>(appConfig.ui.strategy, appConfig.ui.modal, modal)
 
 export default defineComponent({
   components: {
@@ -77,16 +76,13 @@ export default defineComponent({
       default: false
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.modal>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { attrs, emit }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.modal>>(() => defuTwMerge({}, props.ui, appConfig.ui.modal))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('modal', props.ui, config, { mergeWrapper: true })
 
     const isOpen = computed({
       get () {
@@ -97,8 +93,6 @@ export default defineComponent({
       }
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {}
@@ -116,11 +110,10 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
-      wrapperClass,
       transitionClass,
       close
     }
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index da7dbb2b..e18a4149 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -41,22 +41,19 @@
 <script lang="ts">
 import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
+import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
-import type { NotificationAction } from '../../types/notification'
-import type { Avatar } from '../../types/avatar'
-import type { Button } from '../../types/button'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { notification } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof notification>(appConfig.ui.strategy, appConfig.ui.notification, notification)
 
 export default defineComponent({
   components: {
@@ -80,7 +77,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.notification.default.icon
+      default: () => config.default.icon
     },
     avatar: {
       type: Object as PropType<Avatar>,
@@ -88,7 +85,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object as PropType<Button>,
-      default: () => appConfig.ui.notification.default.closeButton
+      default: () => config.default.closeButton as Button
     },
     timeout: {
       type: Number,
@@ -103,23 +100,20 @@ export default defineComponent({
       default: null
     },
     color: {
-      type: String,
-      default: () => appConfig.ui.notification.default.color,
+      type: String as PropType<NotificationColor>,
+      default: () => config.default.color,
       validator (value: string) {
         return ['gray', ...appConfig.ui.colors].includes(value)
       }
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.notification>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['close'],
-  setup (props, { attrs, emit }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.notification>>(() => defuTwMerge({}, props.ui, appConfig.ui.notification))
+  setup (props, { emit }) {
+    const { ui, attrs, attrsClass } = useUI('notification', props.ui, config)
 
     let timer: any = null
     const remaining = ref(props.timeout)
@@ -130,7 +124,7 @@ export default defineComponent({
         ui.value.background,
         ui.value.rounded,
         ui.value.shadow
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     const progressClass = computed(() => {
@@ -210,9 +204,9 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       wrapperClass,
       progressClass,
       progressStyle,
diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index 50e43bf1..68516cb0 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -20,18 +20,18 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UNotification from './Notification.vue'
+import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
-import { defuTwMerge } from '../../utils'
-import type { Notification } from '../../types/notification'
-import { useState, useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { Notification, Strategy } from '../../types'
+import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { notifications } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof notifications>(appConfig.ui.strategy, appConfig.ui.notifications, notifications)
 
 export default defineComponent({
   components: {
@@ -40,15 +40,12 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.notifications>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defuTwMerge({}, props.ui, appConfig.ui.notifications))
+  setup (props) {
+    const { ui, attrs, attrsClass } = useUI('notifications', props.ui, config)
 
     const toast = useToast()
     const notifications = useState<Notification[]>('notifications', () => [])
@@ -58,13 +55,13 @@ export default defineComponent({
         ui.value.wrapper,
         ui.value.position,
         ui.value.width
-      ), attrs.class as string)
+      ), attrsClass)
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       toast,
       notifications,
       wrapperClass
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index cedaf098..355f913a 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -29,18 +29,16 @@
 import { computed, ref, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
+import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { defuTwMerge } from '../../utils'
-import type { PopperOptions } from '../../types/popper'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { popover } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof popover>(appConfig.ui.strategy, appConfig.ui.popover, popover)
 
 export default defineComponent({
   components: {
@@ -72,15 +70,12 @@ export default defineComponent({
       default: () => ({})
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.popover>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defuTwMerge({}, props.ui, appConfig.ui.popover))
+  setup (props) {
+    const { ui, attrs } = useUI('popover', props.ui, config, { mergeWrapper: true })
 
     const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
 
@@ -108,8 +103,6 @@ export default defineComponent({
       return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     function onMouseOver () {
       if (props.mode !== 'hover' || !popoverApi.value) {
         return
@@ -151,14 +144,13 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       popover,
       trigger,
       container,
       containerStyle,
-      wrapperClass,
       onMouseOver,
       onMouseLeave
     }
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 06772b3f..a2fba651 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -18,15 +18,14 @@
 import { computed, defineComponent } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
-import { defuTwMerge } from '../../utils'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { slideover } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof slideover>(appConfig.ui.strategy, appConfig.ui.slideover, slideover)
 
 export default defineComponent({
   components: {
@@ -63,16 +62,13 @@ export default defineComponent({
       default: false
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { attrs, emit }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.slideover>>(() => defuTwMerge({}, props.ui, appConfig.ui.slideover))
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('slideover', props.ui, config, { mergeWrapper: true })
 
     const isOpen: WritableComputedRef<boolean> = computed({
       get () {
@@ -83,8 +79,6 @@ export default defineComponent({
       }
     })
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {}
@@ -105,11 +99,10 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
-      wrapperClass,
       transitionClass,
       close
     }
diff --git a/src/runtime/components/overlays/Tooltip.vue b/src/runtime/components/overlays/Tooltip.vue
index 01ff38af..8de5397a 100644
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/src/runtime/components/overlays/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="trigger" :class="wrapperClass" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
+  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
       Hover
     </slot>
@@ -27,18 +27,16 @@
 import { computed, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { omit } from '../../utils/lodash'
-import { twMerge } from 'tailwind-merge'
 import UKbd from '../elements/Kbd.vue'
+import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { defuTwMerge } from '../../utils'
-import type { PopperOptions } from '../../types/popper'
-import { useAppConfig } from '#imports'
-// TODO: Remove
+import { mergeConfig } from '../../utils'
+import type { PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
+import { tooltip } from '#ui/ui.config'
 
-// const appConfig = useAppConfig()
+const config = mergeConfig<typeof tooltip>(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip)
 
 export default defineComponent({
   components: {
@@ -71,15 +69,12 @@ export default defineComponent({
       default: () => ({})
     },
     ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.tooltip>>,
-      default: () => ({})
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
     }
   },
-  setup (props, { attrs }) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.tooltip>>(() => defuTwMerge({}, props.ui, appConfig.ui.tooltip))
+  setup (props) {
+    const { ui, attrs } = useUI('tooltip', props.ui, config, { mergeWrapper: true })
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
@@ -90,8 +85,6 @@ export default defineComponent({
     let openTimeout: NodeJS.Timeout | null = null
     let closeTimeout: NodeJS.Timeout | null = null
 
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
-
     // Methods
 
     function onMouseOver () {
@@ -127,13 +120,12 @@ export default defineComponent({
     }
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       trigger,
       container,
       open,
-      wrapperClass,
       onMouseOver,
       onMouseLeave
     }
diff --git a/src/runtime/composables/useUI.ts b/src/runtime/composables/useUI.ts
new file mode 100644
index 00000000..08e28c55
--- /dev/null
+++ b/src/runtime/composables/useUI.ts
@@ -0,0 +1,24 @@
+import { computed, toValue, useAttrs } from 'vue'
+import { useAppConfig } from '#imports'
+import { mergeConfig, omit } from '../utils'
+import { Strategy } from '../types'
+
+export const useUI = <T>(key, $ui: Partial<T & { strategy: Strategy }>, $config?: T, { mergeWrapper = false }: { mergeWrapper?: boolean } = {}) => {
+  const $attrs = useAttrs()
+  const appConfig = useAppConfig()
+
+  const ui = computed(() => mergeConfig<T>(
+    $ui?.strategy || (appConfig.ui?.strategy as Strategy),
+    mergeWrapper ? { wrapper: $attrs?.class } : {},
+    $ui || {},
+    process.dev ? (appConfig.ui[key] || {}) : {},
+    toValue($config || {})
+  ))
+  const attrs = computed(() => omit($attrs, ['class']))
+
+  return {
+    ui,
+    attrs,
+    attrsClass: mergeWrapper ? undefined : $attrs?.class as string
+  }
+}
diff --git a/src/runtime/types/avatar.d.ts b/src/runtime/types/avatar.d.ts
index 5baed741..a0c9d9ed 100644
--- a/src/runtime/types/avatar.d.ts
+++ b/src/runtime/types/avatar.d.ts
@@ -1,9 +1,15 @@
+import { avatar } from '../ui.config'
+import colors from '#ui-colors'
+
+export type AvatarSize = keyof typeof avatar.size
+export type AvatarChipColor = 'gray' | typeof colors[number]
+export type AvatarChipPosition = keyof typeof avatar.chip.position
+
 export interface Avatar {
   src?: string | boolean
   alt?: string
   text?: string
-  size?: string
-  chipColor?: string
-  chipVariant?: string
-  chipPosition?: string
+  size?: AvatarSize
+  chipColor?: AvatarChipColor
+  chipPosition?: AvatarChipPosition
 }
diff --git a/src/runtime/types/button.d.ts b/src/runtime/types/button.d.ts
index 80a0a8b4..65ac2f67 100644
--- a/src/runtime/types/button.d.ts
+++ b/src/runtime/types/button.d.ts
@@ -1,4 +1,11 @@
 import type { Link } from './link'
+import { button } from '../ui.config'
+import type { NestedKeyOf } from '.'
+import colors from '#ui-colors'
+
+export type ButtonSize = keyof typeof button.size
+export type ButtonColor = keyof typeof button.color | typeof colors[number]
+export type ButtonVariant = keyof typeof button.variant | NestedKeyOf<typeof button.color>
 
 export interface Button extends Link {
   type?: string
@@ -7,9 +14,9 @@ export interface Button extends Link {
   loading?: boolean
   disabled?: boolean
   padded?: boolean
-  size?: string
-  color?: string
-  variant?: string
+  size?: ButtonSize
+  color?: ButtonColor
+  variant?: ButtonVariant
   icon?: string
   loadingIcon?: string
   leadingIcon?: string
diff --git a/src/runtime/types/form.d.ts b/src/runtime/types/form.d.ts
index 195a25d9..aaf69975 100644
--- a/src/runtime/types/form.d.ts
+++ b/src/runtime/types/form.d.ts
@@ -4,7 +4,7 @@ export interface FormError {
 }
 
 export interface Form<T> {
-  validate(path?: string, opts: { silent?: boolean } = { silent: false }): Promise<T>
+  validate(path?: string, opts: { silent?: boolean }): Promise<T>
   clear(path?: string): void
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 584cbd07..000af042 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -10,3 +10,4 @@ export * from './notification'
 export * from './popper'
 export * from './tabs'
 export * from './vertical-navigation'
+export * from './utils'
diff --git a/src/runtime/types/notification.d.ts b/src/runtime/types/notification.d.ts
index 53f8306c..08cbdf95 100644
--- a/src/runtime/types/notification.d.ts
+++ b/src/runtime/types/notification.d.ts
@@ -1,6 +1,8 @@
 import type { Avatar } from './avatar'
 import type { Button } from './button'
-import appConfig from '#build/app.config'
+import colors from '#ui-colors'
+
+export type NotificationColor = 'gray' | typeof colors[number]
 
 export interface NotificationAction extends Button {
   click?: Function
@@ -17,6 +19,6 @@ export interface Notification {
   actions?: NotificationAction[]
   click?: Function
   callback?: Function
-  color?: string
-  ui?: Partial<typeof appConfig.ui.notification>
+  color?: NotificationColor
+  ui?: any
 }
diff --git a/src/runtime/types/utils.d.ts b/src/runtime/types/utils.d.ts
new file mode 100644
index 00000000..7d899325
--- /dev/null
+++ b/src/runtime/types/utils.d.ts
@@ -0,0 +1,11 @@
+export type Strategy = 'merge' | 'override';
+
+export type NestedKeyOf<ObjectType extends object> = {
+  [Key in keyof ObjectType]: ObjectType[Key] extends object
+  ? NestedKeyOf<ObjectType[Key]>
+  : Key;
+}[keyof ObjectType];
+
+export type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string };
+}>;
diff --git a/src/runtime/app.config.ts b/src/runtime/ui.config.ts
similarity index 96%
rename from src/runtime/app.config.ts
rename to src/runtime/ui.config.ts
index d7ee1147..57d11a23 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/ui.config.ts
@@ -1,6 +1,6 @@
 // Data
 
-const table = {
+export const table = {
   wrapper: 'relative overflow-x-auto',
   base: 'min-w-full table-fixed',
   divide: 'divide-y divide-gray-300 dark:divide-gray-700',
@@ -62,7 +62,7 @@ const table = {
 
 // Elements
 
-const avatar = {
+export const avatar = {
   wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
   background: 'bg-gray-100 dark:bg-gray-800',
   rounded: 'rounded-full',
@@ -122,13 +122,13 @@ const avatar = {
   }
 }
 
-const avatarGroup = {
-  wrapper: 'flex flex-row-reverse justify-end',
+export const avatarGroup = {
+  wrapper: 'inline-flex flex-row-reverse justify-end',
   ring: 'ring-2 ring-white dark:ring-gray-900',
   margin: '-me-1.5 first:me-0'
 }
 
-const badge = {
+export const badge = {
   base: 'inline-flex items-center',
   rounded: 'rounded-md',
   font: 'font-medium',
@@ -162,7 +162,7 @@ const badge = {
   }
 }
 
-const button = {
+export const button = {
   base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
   font: 'font-medium',
   rounded: 'rounded-md',
@@ -239,13 +239,16 @@ const button = {
   }
 }
 
-const buttonGroup = {
-  wrapper: 'inline-flex -space-x-px',
+export const buttonGroup = {
+  wrapper: {
+    horizontal: 'inline-flex -space-x-px',
+    vertical: 'inline-flex flex-col -space-y-px'
+  },
   rounded: 'rounded-md',
   shadow: 'shadow-sm'
 }
 
-const dropdown = {
+export const dropdown = {
   wrapper: 'relative inline-flex text-left rtl:text-right',
   container: 'z-20',
   width: 'w-48',
@@ -291,7 +294,7 @@ const dropdown = {
   }
 }
 
-const accordion = {
+export const accordion = {
   wrapper: 'w-full flex flex-col',
   item: {
     base: '',
@@ -312,7 +315,7 @@ const accordion = {
   }
 }
 
-const alert = {
+export const alert = {
   wrapper: 'w-full relative overflow-hidden',
   title: 'text-sm font-medium',
   description: 'mt-1 text-sm leading-4 opacity-90',
@@ -350,7 +353,7 @@ const alert = {
   }
 }
 
-const kbd = {
+export const kbd = {
   base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
   padding: 'px-1',
   size: {
@@ -369,7 +372,7 @@ const kbd = {
 
 // Forms
 
-const input = {
+export const input = {
   wrapper: 'relative',
   base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
   rounded: 'rounded-md',
@@ -474,7 +477,7 @@ const input = {
   }
 }
 
-const formGroup = {
+export const formGroup = {
   wrapper: '',
   label: {
     wrapper: 'flex content-center items-center justify-between',
@@ -494,10 +497,13 @@ const formGroup = {
   description: 'text-gray-500 dark:text-gray-400',
   hint: 'text-gray-500 dark:text-gray-400',
   help: 'mt-2 text-gray-500 dark:text-gray-400',
-  error: 'mt-2 text-red-500 dark:text-red-400'
+  error: 'mt-2 text-red-500 dark:text-red-400',
+  default: {
+    size: 'sm'
+  }
 }
 
-const textarea = {
+export const textarea = {
   ...input,
   default: {
     size: 'sm',
@@ -506,7 +512,7 @@ const textarea = {
   }
 }
 
-const select = {
+export const select = {
   ...input,
   placeholder: 'text-gray-900 dark:text-white',
   default: {
@@ -518,7 +524,7 @@ const select = {
   }
 }
 
-const selectMenu = {
+export const selectMenu = {
   container: 'z-20',
   width: 'w-full',
   height: 'max-h-60',
@@ -573,7 +579,7 @@ const selectMenu = {
   }
 }
 
-const radio = {
+export const radio = {
   wrapper: 'relative flex items-start',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
   color: 'text-{color}-500 dark:text-{color}-400',
@@ -588,7 +594,7 @@ const radio = {
   }
 }
 
-const checkbox = {
+export const checkbox = {
   wrapper: 'relative flex items-start',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
   rounded: 'rounded',
@@ -604,7 +610,7 @@ const checkbox = {
   }
 }
 
-const toggle = {
+export const toggle = {
   base: 'relative inline-flex h-5 w-9 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
   rounded: 'rounded-full',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
@@ -629,7 +635,7 @@ const toggle = {
   }
 }
 
-const range = {
+export const range = {
   wrapper: 'relative w-full flex items-center',
   base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
   rounded: 'rounded-lg',
@@ -679,7 +685,7 @@ const range = {
 
 // Layout
 
-const card = {
+export const card = {
   base: 'overflow-hidden',
   background: 'bg-white dark:bg-gray-900',
   divide: 'divide-y divide-gray-200 dark:divide-gray-800',
@@ -703,13 +709,13 @@ const card = {
   }
 }
 
-const container = {
+export const container = {
   base: 'mx-auto',
   padding: 'px-4 sm:px-6 lg:px-8',
   constrained: 'max-w-7xl'
 }
 
-const skeleton = {
+export const skeleton = {
   base: 'animate-pulse',
   background: 'bg-gray-100 dark:bg-gray-800',
   rounded: 'rounded-md'
@@ -717,7 +723,7 @@ const skeleton = {
 
 // Navigation
 
-const verticalNavigation = {
+export const verticalNavigation = {
   wrapper: 'relative',
   base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
   ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
@@ -745,7 +751,7 @@ const verticalNavigation = {
   }
 }
 
-const commandPalette = {
+export const commandPalette = {
   wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
   container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
   input: {
@@ -789,7 +795,7 @@ const commandPalette = {
       },
       avatar: {
         base: 'flex-shrink-0',
-        size: '3xs'
+        size: '3xs' as const
       },
       chip: {
         base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
@@ -813,7 +819,7 @@ const commandPalette = {
   }
 }
 
-const pagination = {
+export const pagination = {
   wrapper: 'flex items-center -space-x-px',
   base: '',
   rounded: 'first:rounded-s-md last:rounded-e-md',
@@ -838,7 +844,7 @@ const pagination = {
   }
 }
 
-const tabs = {
+export const tabs = {
   wrapper: 'relative space-y-2',
   container: 'relative w-full',
   base: 'focus:outline-none',
@@ -874,7 +880,7 @@ const tabs = {
 
 // Overlays
 
-const modal = {
+export const modal = {
   wrapper: 'relative z-50',
   inner: 'fixed inset-0 overflow-y-auto',
   container: 'flex min-h-full items-end sm:items-center justify-center text-center',
@@ -911,7 +917,7 @@ const modal = {
   }
 }
 
-const slideover = {
+export const slideover = {
   wrapper: 'fixed inset-0 flex z-50',
   overlay: {
     base: 'fixed inset-0 transition-opacity',
@@ -940,7 +946,7 @@ const slideover = {
   }
 }
 
-const tooltip = {
+export const tooltip = {
   wrapper: 'relative inline-flex',
   container: 'z-20',
   width: 'max-w-xs',
@@ -965,7 +971,7 @@ const tooltip = {
   }
 }
 
-const popover = {
+export const popover = {
   wrapper: 'relative',
   container: 'z-20',
   width: '',
@@ -988,7 +994,7 @@ const popover = {
   }
 }
 
-const contextMenu = {
+export const contextMenu = {
   wrapper: 'relative',
   container: 'z-20',
   width: '',
@@ -1012,7 +1018,7 @@ const contextMenu = {
   }
 }
 
-const notification = {
+export const notification = {
   wrapper: 'w-full pointer-events-auto',
   container: 'relative overflow-hidden',
   title: 'text-sm font-medium text-gray-900 dark:text-white',
@@ -1028,7 +1034,7 @@ const notification = {
   },
   avatar: {
     base: 'flex-shrink-0 self-center',
-    size: 'md'
+    size: 'md' as const
   },
   progress: {
     base: 'absolute bottom-0 end-0 start-0 h-1',
@@ -1059,47 +1065,9 @@ const notification = {
   }
 }
 
-const notifications = {
+export const notifications = {
   wrapper: 'fixed flex flex-col justify-end z-[55]',
   position: 'bottom-0 end-0',
   width: 'w-full sm:w-96',
   container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
 }
-
-export default {
-  ui: {
-    table,
-    avatar,
-    avatarGroup,
-    badge,
-    button,
-    buttonGroup,
-    dropdown,
-    kbd,
-    accordion,
-    alert,
-    input,
-    formGroup,
-    textarea,
-    select,
-    selectMenu,
-    checkbox,
-    radio,
-    toggle,
-    range,
-    card,
-    container,
-    skeleton,
-    verticalNavigation,
-    commandPalette,
-    pagination,
-    tabs,
-    modal,
-    slideover,
-    popover,
-    tooltip,
-    contextMenu,
-    notification,
-    notifications
-  }
-}
diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
index c3c7f2c4..9e3e0d07 100644
--- a/src/runtime/utils/index.ts
+++ b/src/runtime/utils/index.ts
@@ -1,15 +1,30 @@
-import { createDefu } from 'defu'
-import { twMerge } from 'tailwind-merge'
+import { defu, createDefu } from 'defu'
+import { extendTailwindMerge } from 'tailwind-merge'
+import type { Strategy } from '../types'
 
-export const defuTwMerge = createDefu((obj, key, value) => {
-  if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
+const customTwMerge = extendTailwindMerge({
+  classGroups: {
+    icons: [(classPart: string) => /^i-/.test(classPart)]
+  }
+})
+
+const defuTwMerge = createDefu((obj, key, value, namespace) => {
+  if (namespace !== 'default' && typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
     // @ts-ignore
-    obj[key] = twMerge(obj[key], value)
+    obj[key] = customTwMerge(obj[key], value)
     return true
   }
 })
 
-export const hexToRgb = (hex: string) => {
+export function mergeConfig<T> (strategy: Strategy, ...configs): T {
+  if (strategy === 'override') {
+    return defu({}, ...configs) as T
+  }
+
+  return defuTwMerge({}, ...configs) as T
+}
+
+export function hexToRgb (hex: string) {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
   hex = hex.replace(shorthandRegex, function (_, r, g, b) {
@@ -22,7 +37,7 @@ export const hexToRgb = (hex: string) => {
     : null
 }
 
-export const getSlotsChildren = (slots: any) => {
+export function getSlotsChildren (slots: any) {
   let children = slots.default?.()
   if (children.length) {
     children = children.flatMap(c => {
@@ -40,3 +55,5 @@ export const getSlotsChildren = (slots: any) => {
   }
   return children
 }
+
+export * from './lodash'
diff --git a/src/templates.ts b/src/templates.ts
new file mode 100644
index 00000000..e0714dc8
--- /dev/null
+++ b/src/templates.ts
@@ -0,0 +1,21 @@
+import { dirname } from 'pathe'
+import { useNuxt, addTemplate } from '@nuxt/kit'
+
+export default function createTemplates (nuxt = useNuxt()) {
+  const template = addTemplate({
+    filename: 'ui.colors.mjs',
+    getContents: () => `export default ${JSON.stringify(nuxt.options.appConfig.ui.colors)};`,
+    write: true
+  })
+  const typesTemplate = addTemplate({
+    filename: 'ui.colors.d.ts',
+    getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
+    write: true
+  })
+
+  nuxt.options.alias['#ui-colors'] = dirname(template.dst)
+
+  nuxt.hook('prepare:types', (opts) => {
+    opts.references.push({ path: typesTemplate.dst })
+  })
+}
diff --git a/tsconfig.json b/tsconfig.json
index 5546ac7f..bc898141 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,4 @@
 {
-  "extends": "./docs/.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": ["docs"]
 }