diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 416bf4fb..08d541c1 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
 import type { LinkProps } from '#ui/components/Link.vue'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
 
 const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index c4e2e273..92b42846 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from '#ui/components/Link.vue'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
 
 const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
 
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index 8d0f3858..ec1ce056 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
 
 const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
 
diff --git a/src/runtime/components/Container.vue b/src/runtime/components/Container.vue
index edf2c2d1..8af85de3 100644
--- a/src/runtime/components/Container.vue
+++ b/src/runtime/components/Container.vue
@@ -1,7 +1,10 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/container'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
 
 const container = tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) })
 
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 9a3f8d63..3499edb8 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -1,8 +1,11 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps } from 'radix-vue'
-import appConfig from '#build/app.config'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
+import type { AppConfig } from '@nuxt/schema'
+
+const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
 
 const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
diff --git a/src/templates.ts b/src/templates.ts
index 23901be9..250273b5 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -66,31 +66,22 @@ export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
         [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
       }>
 
-      type AppConfigUI = {
-        primary: string
-        gray: string
-      } & typeof ui
+      const colors = ${JSON.stringify(options.colors)} as const;
 
-      type AppConfigInputUI = {
-        primary?: string
-        gray?: string
+      type UI = {
+        primary?: typeof colors[number]
+        gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
         [key: string]: any
       } & DeepPartial<typeof ui>
 
       declare module 'nuxt/schema' {
-        interface AppConfig {
-          ui: AppConfigUI
-        }
         interface AppConfigInput {
-          ui?: AppConfigInputUI
+          ui?: UI
         }
       }
       declare module '@nuxt/schema' {
-        interface AppConfig {
-          ui: AppConfigUI
-        }
         interface AppConfigInput {
-          ui?: AppConfigInputUI
+          ui?: UI
         }
       }
       export {}