diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 07fa51b6..da229a96 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -150,7 +150,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   setup (props, { emit, attrs: $attrs }) {
-    const { ui, attrs } = useUI('ui.table', props.ui, config, { mergeWrapper: true })
+    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 })))
 
diff --git a/src/runtime/components/elements/Accordion.vue b/src/runtime/components/elements/Accordion.vue
index 26940c36..aaf8fcc0 100644
--- a/src/runtime/components/elements/Accordion.vue
+++ b/src/runtime/components/elements/Accordion.vue
@@ -94,7 +94,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs } = useUI('ui.accordion', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('accordion', props.ui, config, { mergeWrapper: true })
 
     const uiButton = computed<Partial<typeof configButton>>(() => configButton)
 
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index ba621aff..db9553d9 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -104,7 +104,7 @@ export default defineComponent({
   },
   emits: ['close'],
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.alert', props.ui, config)
+    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]
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index 6b525cbe..5fa62781 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -90,7 +90,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.avatar', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('avatar', props.ui, config)
 
     const url = computed(() => {
       if (typeof props.src === 'boolean') {
diff --git a/src/runtime/components/elements/AvatarGroup.ts b/src/runtime/components/elements/AvatarGroup.ts
index 09650b0b..2dbf43a0 100644
--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -33,7 +33,7 @@ export default defineComponent({
     }
   },
   setup (props, { slots }) {
-    const { ui, attrs } = useUI('ui.avatarGroup', props.ui, avatarGroupConfig, { mergeWrapper: true })
+    const { ui, attrs } = useUI('avatarGroup', props.ui, avatarGroupConfig, { mergeWrapper: true })
 
     const children = computed(() => getSlotsChildren(slots))
 
diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index 923c272c..07df9c05 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -55,7 +55,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.badge', props.ui, config)
+    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]
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 8c825bb8..c4fd7969 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -124,7 +124,7 @@ export default defineComponent({
     }
   },
   setup (props, { slots }) {
-    const { ui, attrs, attrsClass } = useUI('ui.button', props.ui, config)
+    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
diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index c769c7e5..7396b198 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -34,7 +34,7 @@ export default defineComponent({
     }
   },
   setup (props, { slots }) {
-    const { ui, attrs, attrsClass } = useUI('ui.buttonGroup', props.ui, buttonGroupConfig)
+    const { ui, attrs, attrsClass } = useUI('buttonGroup', props.ui, buttonGroupConfig)
 
     const children = computed(() => getSlotsChildren(slots))
 
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index 4f0013aa..f213a41b 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -107,7 +107,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs } = useUI('ui.dropdown', props.ui, config, { mergeWrapper: true })
+    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))
 
diff --git a/src/runtime/components/elements/Kbd.vue b/src/runtime/components/elements/Kbd.vue
index 499873b5..5991f12d 100644
--- a/src/runtime/components/elements/Kbd.vue
+++ b/src/runtime/components/elements/Kbd.vue
@@ -37,7 +37,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.kbd', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('kbd', props.ui, config)
 
     const kbdClass = computed(() => {
       return twMerge(twJoin(
diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue
index 1dc30b82..f6f13508 100644
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -101,7 +101,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.checkbox', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('checkbox', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, formGroup } = useFormGroup()
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
diff --git a/src/runtime/components/forms/FormGroup.vue b/src/runtime/components/forms/FormGroup.vue
index abc49f70..a121f5bf 100644
--- a/src/runtime/components/forms/FormGroup.vue
+++ b/src/runtime/components/forms/FormGroup.vue
@@ -77,7 +77,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs } = useUI('ui.formGroup', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('formGroup', props.ui, config, { mergeWrapper: true })
 
     const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 0398ad62..09f7a921 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -152,7 +152,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'blur'],
   setup (props, { emit, slots }) {
-    const { ui, attrs } = useUI('ui.input', props.ui, config, { mergeWrapper: true })
+    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)
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index e17a1dd8..c85af60a 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -90,7 +90,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.radio', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('radio', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, formGroup } = useFormGroup()
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
diff --git a/src/runtime/components/forms/Range.vue b/src/runtime/components/forms/Range.vue
index d6a879cf..3888e3b3 100644
--- a/src/runtime/components/forms/Range.vue
+++ b/src/runtime/components/forms/Range.vue
@@ -90,7 +90,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
-    const { ui, attrs, attrsClass } = useUI('ui.range', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('range', props.ui, config)
 
     const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 03a020b6..610d98dc 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -178,7 +178,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit, slots }) {
-    const { ui, attrs } = useUI('ui.select', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 8dac32b5..e01c9128 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -307,9 +307,9 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'open', 'close', 'change'],
   setup (props, { emit, slots }) {
-    const { ui, attrs } = useUI('ui.select', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
 
-    const { ui: uiMenu } = useUI('ui.selectMenu', props.uiMenu, configMenu)
+    const { ui: uiMenu } = useUI('selectMenu', props.uiMenu, configMenu)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
 
diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue
index 86e4c013..6dfa0369 100644
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -115,7 +115,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'blur'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.textarea', props.ui, config, { mergeWrapper: true })
+    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)
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 55693eb6..de4a5eb3 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -80,7 +80,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   setup (props, { emit }) {
-    const { ui, attrs, attrsClass } = useUI('ui.toggle', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('toggle', props.ui, config)
 
     const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
diff --git a/src/runtime/components/layout/Card.vue b/src/runtime/components/layout/Card.vue
index c839ba78..201fefe2 100644
--- a/src/runtime/components/layout/Card.vue
+++ b/src/runtime/components/layout/Card.vue
@@ -42,7 +42,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.card', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('card', props.ui, config)
 
     const cardClass = computed(() => {
       return twMerge(twJoin(
diff --git a/src/runtime/components/layout/Container.vue b/src/runtime/components/layout/Container.vue
index 1e752e2b..e99c4885 100644
--- a/src/runtime/components/layout/Container.vue
+++ b/src/runtime/components/layout/Container.vue
@@ -30,7 +30,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.container', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('container', props.ui, config)
 
     const containerClass = computed(() => {
       return twMerge(twJoin(
diff --git a/src/runtime/components/layout/Skeleton.vue b/src/runtime/components/layout/Skeleton.vue
index 9c8c4abb..e25538b3 100644
--- a/src/runtime/components/layout/Skeleton.vue
+++ b/src/runtime/components/layout/Skeleton.vue
@@ -24,7 +24,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.skeleton', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('skeleton', props.ui, config)
 
     const skeletonClass = computed(() => {
       return twMerge(twJoin(
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index b2d2debb..9d1dabb8 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -176,7 +176,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit, expose }) {
-    const { ui, attrs } = useUI('ui.commandPalette', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('commandPalette', props.ui, config, { mergeWrapper: true })
 
     const query = ref('')
     const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index a21bed18..ed02753c 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -113,7 +113,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.pagination', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('pagination', props.ui, config, { mergeWrapper: true })
 
     const currentPage = computed({
       get () {
diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index ed08a635..c3206c4e 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -95,7 +95,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.tabs', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('tabs', props.ui, config, { mergeWrapper: true })
 
     const listRef = ref<HTMLElement>()
     const itemRefs = ref<HTMLElement[]>([])
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 658bb6c8..3bed8748 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -70,7 +70,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs } = useUI('ui.verticalNavigation', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('verticalNavigation', props.ui, config, { mergeWrapper: true })
 
     return {
       // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/components/overlays/ContextMenu.vue b/src/runtime/components/overlays/ContextMenu.vue
index 2ce1877f..744e72fe 100644
--- a/src/runtime/components/overlays/ContextMenu.vue
+++ b/src/runtime/components/overlays/ContextMenu.vue
@@ -47,7 +47,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit }) {
-    const { ui, attrs, attrsClass } = useUI('ui.contextMenu', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('contextMenu', props.ui, config)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 2df6c4e0..b19652de 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -82,7 +82,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.modal', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('modal', props.ui, config, { mergeWrapper: true })
 
     const isOpen = computed({
       get () {
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index 49071d37..e18a4149 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -113,7 +113,7 @@ export default defineComponent({
   },
   emits: ['close'],
   setup (props, { emit }) {
-    const { ui, attrs, attrsClass } = useUI('ui.notification', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('notification', props.ui, config)
 
     let timer: any = null
     const remaining = ref(props.timeout)
diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index 9fdde1fa..68516cb0 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -45,7 +45,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs, attrsClass } = useUI('ui.notifications', props.ui, config)
+    const { ui, attrs, attrsClass } = useUI('notifications', props.ui, config)
 
     const toast = useToast()
     const notifications = useState<Notification[]>('notifications', () => [])
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 97128ee7..355f913a 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -75,7 +75,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs } = useUI('ui.popover', props.ui, config, { mergeWrapper: true })
+    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))
 
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 4390d9a6..a2fba651 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -68,7 +68,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('ui.slideover', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('slideover', props.ui, config, { mergeWrapper: true })
 
     const isOpen: WritableComputedRef<boolean> = computed({
       get () {
diff --git a/src/runtime/components/overlays/Tooltip.vue b/src/runtime/components/overlays/Tooltip.vue
index 90d5099f..8de5397a 100644
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/src/runtime/components/overlays/Tooltip.vue
@@ -74,7 +74,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const { ui, attrs } = useUI('ui.tooltip', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('tooltip', props.ui, config, { mergeWrapper: true })
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
diff --git a/src/runtime/composables/useUI.ts b/src/runtime/composables/useUI.ts
index 43ac1991..a09a8454 100644
--- a/src/runtime/composables/useUI.ts
+++ b/src/runtime/composables/useUI.ts
@@ -11,7 +11,7 @@ export const useUI = <T>(key, $ui: Partial<T & { strategy: Strategy }>, $config?
     $ui?.strategy || (appConfig.ui?.strategy as Strategy),
     mergeWrapper ? { wrapper: $attrs?.class } : {},
     $ui || {},
-    process.dev ? get(appConfig, key, {}) : {},
+    process.dev ? get(appConfig.ui, key, {}) : {},
     toValue($config || {})
   ))
   const attrs = computed(() => omit($attrs, ['class']))