diff --git a/docs/components/content/ComponentDefaults.vue b/docs/components/content/ComponentDefaults.vue
index 7cb7d86..5503690 100644
--- a/docs/components/content/ComponentDefaults.vue
+++ b/docs/components/content/ComponentDefaults.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { camelCase, upperFirst } from 'scule'
 import json5 from 'json5'
-import * as config from '#rayui/ui.config'
+import * as config from '#rayui/themes'
 
 const route = useRoute()
 
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 5517643..13ce63e 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { withoutTrailingSlash } from 'ufo'
-import { standard } from '#rayui/ui.config'
+import { standard } from '#rayui/themes'
 
 const route = useRoute()
 
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 8e19b23..fc4b146 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -3,7 +3,7 @@ import { twJoin, twMerge } from 'tailwind-merge'
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { getNonUndefinedValuesFromObject } from '../../utils'
 import { nuxtLinkProps } from '../../utils/link'
-import { button } from '../../ui.config'
+import { button } from '../../themes'
 import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
 import { useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/elements/Kbd.vue b/src/runtime/components/elements/Kbd.vue
index 389d21d..8ded871 100644
--- a/src/runtime/components/elements/Kbd.vue
+++ b/src/runtime/components/elements/Kbd.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { kbd } from '../../ui.config'
+import { kbd } from '../../themes'
 import type { DeepPartial, KbdSize, Strategy } from '../../types'
 import { useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/elements/Mark.vue b/src/runtime/components/elements/Mark.vue
index 64601e1..10a9e64 100644
--- a/src/runtime/components/elements/Mark.vue
+++ b/src/runtime/components/elements/Mark.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { mark } from '../../ui.config'
+import { mark } from '../../themes'
 import type { MarkColor, MarkPosition, MarkSize } from '../../types'
 import { useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 38561a9..9c5ca22 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -2,7 +2,7 @@
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
 import defu from 'defu'
-import { input } from '../../ui.config'
+import { input } from '../../themes'
 import type { DeepPartial, InputColor, InputModelModifiers, InputSize, InputType, InputVariant, Strategy } from '../../types/index'
 import { onMounted, ref, useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue
index 6ca5705..627f7c6 100644
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -2,7 +2,7 @@
 import { computed, defineComponent, onMounted, ref, toRef, watch, type PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import defu from 'defu'
-import { textarea } from '../../ui.config'
+import { textarea } from '../../themes'
 import type { DeepPartial, Strategy, TextareaColor, TextareaModelModifiers, TextareaSize, TextareaVariant } from '../../types'
 import { useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 5805618..5a2f763 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { toggle } from '../../ui.config'
+import { toggle } from '../../themes'
 import type { DeepPartial, Strategy, ToggleColor, ToggleSize } from '../../types'
 import { useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/overlays/Message.vue b/src/runtime/components/overlays/Message.vue
index 3d380e1..e116892 100644
--- a/src/runtime/components/overlays/Message.vue
+++ b/src/runtime/components/overlays/Message.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { ref, onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { message } from '../../ui.config'
+import { message } from '../../themes'
 import type { DeepPartial, Message, MessageColor, MessageType, Strategy } from '../../types/index'
 import { useMessage, useRayUI } from '#build/imports'
 
diff --git a/src/runtime/components/overlays/Messages.vue b/src/runtime/components/overlays/Messages.vue
index f525156..9cb093b 100644
--- a/src/runtime/components/overlays/Messages.vue
+++ b/src/runtime/components/overlays/Messages.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { messages } from '../../ui.config'
+import { messages } from '../../themes'
 import type { DeepPartial, Message, Strategy } from '../../types/index'
 import { useState } from '#imports'
 import { useRayUI } from '#build/imports'
diff --git a/src/runtime/composables/useMessage.ts b/src/runtime/composables/useMessage.ts
index 24ab242..9fa9ea8 100644
--- a/src/runtime/composables/useMessage.ts
+++ b/src/runtime/composables/useMessage.ts
@@ -1,4 +1,4 @@
-import type { Message, MessageType } from '../types/message'
+import type { Message } from '../types/message'
 import { useState } from '#imports'
 
 export const useMessage = () => {
diff --git a/src/runtime/ui.config/elements/button.ts b/src/runtime/themes/elements/button.ts
similarity index 100%
rename from src/runtime/ui.config/elements/button.ts
rename to src/runtime/themes/elements/button.ts
diff --git a/src/runtime/ui.config/elements/kbd.ts b/src/runtime/themes/elements/kbd.ts
similarity index 100%
rename from src/runtime/ui.config/elements/kbd.ts
rename to src/runtime/themes/elements/kbd.ts
diff --git a/src/runtime/ui.config/elements/mark.ts b/src/runtime/themes/elements/mark.ts
similarity index 100%
rename from src/runtime/ui.config/elements/mark.ts
rename to src/runtime/themes/elements/mark.ts
diff --git a/src/runtime/ui.config/forms/input.ts b/src/runtime/themes/forms/input.ts
similarity index 100%
rename from src/runtime/ui.config/forms/input.ts
rename to src/runtime/themes/forms/input.ts
diff --git a/src/runtime/ui.config/forms/textarea.ts b/src/runtime/themes/forms/textarea.ts
similarity index 100%
rename from src/runtime/ui.config/forms/textarea.ts
rename to src/runtime/themes/forms/textarea.ts
diff --git a/src/runtime/ui.config/forms/toggle.ts b/src/runtime/themes/forms/toggle.ts
similarity index 100%
rename from src/runtime/ui.config/forms/toggle.ts
rename to src/runtime/themes/forms/toggle.ts
diff --git a/src/runtime/ui.config/index.ts b/src/runtime/themes/index.ts
similarity index 100%
rename from src/runtime/ui.config/index.ts
rename to src/runtime/themes/index.ts
diff --git a/src/runtime/ui.config/overlays/message.ts b/src/runtime/themes/overlays/message.ts
similarity index 100%
rename from src/runtime/ui.config/overlays/message.ts
rename to src/runtime/themes/overlays/message.ts
diff --git a/src/runtime/ui.config/overlays/messages.ts b/src/runtime/themes/overlays/messages.ts
similarity index 100%
rename from src/runtime/ui.config/overlays/messages.ts
rename to src/runtime/themes/overlays/messages.ts
diff --git a/src/runtime/ui.config/standard.ts b/src/runtime/themes/standard.ts
similarity index 100%
rename from src/runtime/ui.config/standard.ts
rename to src/runtime/themes/standard.ts
diff --git a/src/runtime/types/button.d.ts b/src/runtime/types/button.d.ts
index 483448d..394144c 100644
--- a/src/runtime/types/button.d.ts
+++ b/src/runtime/types/button.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { button } from '../ui.config'
+import type { button } from '../themes'
 import type { ExtractDeepObject, NestedKeyOf, ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 
diff --git a/src/runtime/types/input.d.ts b/src/runtime/types/input.d.ts
index e120370..13ac3ff 100644
--- a/src/runtime/types/input.d.ts
+++ b/src/runtime/types/input.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { input } from '../ui.config'
+import type { input } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 
diff --git a/src/runtime/types/kbd.d.ts b/src/runtime/types/kbd.d.ts
index 5bab662..a6b8e91 100644
--- a/src/runtime/types/kbd.d.ts
+++ b/src/runtime/types/kbd.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { kbd } from '../ui.config'
+import type { kbd } from '../themes'
 import type { ExtractDeepKey } from './utils'
 
 export type KbdSize =
diff --git a/src/runtime/types/mark.d.ts b/src/runtime/types/mark.d.ts
index b4473ad..87badda 100644
--- a/src/runtime/types/mark.d.ts
+++ b/src/runtime/types/mark.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema'
-import type { mark } from '../ui.config'
+import type { mark } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 
diff --git a/src/runtime/types/message.d.ts b/src/runtime/types/message.d.ts
index 21c0bfd..24b2c78 100644
--- a/src/runtime/types/message.d.ts
+++ b/src/runtime/types/message.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { message } from '../ui.config'
+import type { message } from '../themes'
 import type colors from '#ray-colors'
 
 export type MessageType = keyof typeof message.type
diff --git a/src/runtime/types/textarea.d.ts b/src/runtime/types/textarea.d.ts
index 7124857..713ccaf 100644
--- a/src/runtime/types/textarea.d.ts
+++ b/src/runtime/types/textarea.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema'
-import type { textarea } from '../ui.config'
+import type { textarea } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 
diff --git a/src/runtime/types/toggle.d.ts b/src/runtime/types/toggle.d.ts
index 871a33a..85f10bb 100644
--- a/src/runtime/types/toggle.d.ts
+++ b/src/runtime/types/toggle.d.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema'
-import type { toggle } from '../ui.config'
+import type { toggle } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 
diff --git a/src/tailwind.ts b/src/tailwind.ts
index d733145..03fc828 100644
--- a/src/tailwind.ts
+++ b/src/tailwind.ts
@@ -49,7 +49,7 @@ export const installTailwind = (
               resolve(runtimePath, 'components/**/*.{vue,mjs,ts}'),
             )},
             ${JSON.stringify(
-              resolve(runtimePath, 'ui.config/**/*.{mjs,js,ts}'),
+              resolve(runtimePath, 'themes/**/*.{mjs,js,ts}'),
             )}
           ],
         },