diff --git a/cli/utils/templates.mjs b/cli/utils/templates.mjs
index 0de57453..d2b882b9 100644
--- a/cli/utils/templates.mjs
+++ b/cli/utils/templates.mjs
@@ -19,6 +19,7 @@ const playground = ({ name }) => {
 const component = ({ name }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
 
   return {
     filename: `src/runtime/components/${upperName}.vue`,
@@ -28,7 +29,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/${camelName}'
+import theme from '#build/ui/${kebabName}'
 
 const appConfig = _appConfig as AppConfig & { ui: { ${camelName}: Partial<typeof theme> } }
 
@@ -68,10 +69,10 @@ const ui = computed(() => tv({ extend: ${camelName}, slots: props.ui })())
 }
 
 const theme = ({ name }) => {
-  const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
 
   return {
-    filename: `src/theme/${camelName}.ts`,
+    filename: `src/theme/${kebabName}.ts`,
     contents: `
 export default (config: { colors: string[] }) => ({
   slots: {
diff --git a/package.json b/package.json
index d920c5b1..ae8dbf01 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "nuxt-icon": "^0.6.10",
     "ohash": "^1.1.3",
     "radix-vue": "^1.6.1",
+    "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "4.0.0-alpha.10"
   },
diff --git a/playground/pages/form-field.vue b/playground/pages/form-field.vue
index 47f87349..d9191208 100644
--- a/playground/pages/form-field.vue
+++ b/playground/pages/form-field.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import theme from '#build/ui/formField'
+import theme from '#build/ui/form-field'
 
 const sizes = Object.keys(theme.variants.size)
 const feedbacks = [
diff --git a/playground/pages/radio-group.vue b/playground/pages/radio-group.vue
index 4de1dac0..db21bb15 100644
--- a/playground/pages/radio-group.vue
+++ b/playground/pages/radio-group.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import theme from '#build/ui/checkbox'
+import theme from '#build/ui/radio-group'
 
 const sizes = Object.keys(theme.variants.size)
 
@@ -14,7 +14,6 @@ const options = [
   { value: '3', label: 'Option 3' }
 ]
 
-
 const optionsWithDescription = [
   { value: '1', label: 'Option 1', description: 'Description 1' },
   { value: '2', label: 'Option 2', description: 'Description 2' },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ebeef6f..1c9b3f2d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,6 +42,9 @@ importers:
       radix-vue:
         specifier: ^1.6.1
         version: 1.6.1(vue@3.4.21)
+      scule:
+        specifier: ^1.3.0
+        version: 1.3.0
       tailwind-variants:
         specifier: ^0.2.1
         version: 0.2.1(tailwindcss@4.0.0-alpha.10)
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 45abae51..eb84ec79 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/dropdownMenu'
+import theme from '#build/ui/dropdown-menu'
 import type { AvatarProps, IconProps, KbdProps, LinkProps, DropdownMenuContentSlots } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index 6d07ed55..aba94aa2 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -2,7 +2,7 @@
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/formField'
+import theme from '#build/ui/form-field'
 
 const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
 
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index fb09226a..c1fd791a 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { NavigationMenuRootProps, NavigationMenuRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/navigationMenu'
+import theme from '#build/ui/navigation-menu'
 import type { AvatarProps, BadgeProps, IconProps, LinkProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 43a92928..76131837 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { RadioGroupRootProps, RadioGroupRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/ui/radioGroup'
+import theme from '#build/ui/radio-group'
 
 const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
 
diff --git a/src/templates.ts b/src/templates.ts
index d6af044f..cbc04e82 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -1,3 +1,4 @@
+import { kebabCase } from 'scule'
 import { addTemplate, addTypeTemplate } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 import type { ModuleOptions } from './module'
@@ -41,7 +42,7 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
 
   for (const component in theme) {
     addTemplate({
-      filename: `ui/${component}.ts`,
+      filename: `ui/${kebabCase(component)}.ts`,
       write: true,
       getContents: async () => {
         const template = (theme as any)[component]
@@ -63,7 +64,7 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
   addTemplate({
     filename: 'ui/index.ts',
     write: true,
-    getContents: () => Object.keys(theme).map(component => `export { default as ${component} } from './${component}'`).join('\n')
+    getContents: () => Object.keys(theme).map(component => `export { default as ${component} } from './${kebabCase(component)}'`).join('\n')
   })
 
   // FIXME: `typeof colors[number]` should include all colors from the theme
diff --git a/src/theme/dropdownMenu.ts b/src/theme/dropdown-menu.ts
similarity index 100%
rename from src/theme/dropdownMenu.ts
rename to src/theme/dropdown-menu.ts
diff --git a/src/theme/formField.ts b/src/theme/form-field.ts
similarity index 100%
rename from src/theme/formField.ts
rename to src/theme/form-field.ts
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 470d47c9..4f5ff2e8 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -7,16 +7,16 @@ export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
-export { default as dropdownMenu } from './dropdownMenu'
+export { default as dropdownMenu } from './dropdown-menu'
 export { default as form } from './form'
-export { default as formField } from './formField'
+export { default as formField } from './form-field'
 export { default as input } from './input'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
-export { default as navigationMenu } from './navigationMenu'
+export { default as navigationMenu } from './navigation-menu'
 export { default as popover } from './popover'
-export { default as radioGroup } from './radioGroup'
+export { default as radioGroup } from './radio-group'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as switch } from './switch'
diff --git a/src/theme/navigationMenu.ts b/src/theme/navigation-menu.ts
similarity index 100%
rename from src/theme/navigationMenu.ts
rename to src/theme/navigation-menu.ts
diff --git a/src/theme/radioGroup.ts b/src/theme/radio-group.ts
similarity index 100%
rename from src/theme/radioGroup.ts
rename to src/theme/radio-group.ts