diff --git a/.github/contributing/component-structure.md b/.github/contributing/component-structure.md
index e5451d235c..2d6dab71a3 100644
--- a/.github/contributing/component-structure.md
+++ b/.github/contributing/component-structure.md
@@ -50,25 +50,27 @@ export interface ComponentNameSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-// 7. Props with withDefaults for runtime defaults
-const props = withDefaults(defineProps<ComponentNameProps>(), {
-  as: 'div'
-})
+// 7. Raw props (use withDefaults only when you actually need a runtime default)
+const _props = defineProps<ComponentNameProps>()
 const slots = defineSlots<ComponentNameSlots>()
 
-// 8. App config
-const appConfig = useAppConfig() as ComponentName['AppConfig']
+// 8. Theme-aware proxy: resolves explicit > <UTheme :props> > withDefaults
+//    > app.config.ui.<name>.defaultVariants. The `ui` prop is deep-merged
+//    automatically, so reach for `props.ui?.<slot>` in the template.
+//    `theme.defaultVariants` is NOT in this chain — it only feeds `tv()`
+//    class resolution.
+const props = useComponentProps('componentName', _props)
 
-// 9. Theme-aware ui prop - merges Theme context with component ui prop
-const uiProp = useComponentUI('componentName', props)
+// 9. App config
+const appConfig = useAppConfig() as ComponentName['AppConfig']
 
 // 10. Computed UI - always computed for reactivity
-const ui = computed(() => tv({ 
-  extend: tv(theme), 
-  ...(appConfig.ui?.componentName || {}) 
+const ui = computed(() => tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.componentName || {})
 })({
   color: props.color,
   size: props.size
@@ -76,8 +78,8 @@ const ui = computed(() => tv({
 </script>
 
 <template>
-  <!-- 11. data-slot on all elements, use uiProp instead of props.ui -->
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <!-- 11. data-slot on every element, always read props as `props.x` -->
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :ui="ui" />
   </Primitive>
 </template>
@@ -113,34 +115,40 @@ export interface CollapsibleSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<CollapsibleProps>(), {
+const _props = withDefaults(defineProps<CollapsibleProps>(), {
   unmountOnHide: true
 })
 const emits = defineEmits<CollapsibleEmits>()
 const slots = defineSlots<CollapsibleSlots>()
 
+// Theme-aware proxy. `props` deep-merges `ui` and resolves <UTheme :props> defaults.
+const props = useComponentProps('collapsible', _props)
+
 const appConfig = useAppConfig() as Collapsible['AppConfig']
-const uiProp = useComponentUI('collapsible', props)
 
-// Forward only Reka UI props
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
+// Pick from `props` (the proxy) so theme-supplied values flow through.
+// Use the local `useForwardProps` — reka-ui's `useForwardProps` /
+// `useForwardPropsEmits` filter root props by `vm.vnode.props ∪ withDefaults`
+// and would strip <UTheme :props> values.
+const rootProps = useForwardProps(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })())
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>
@@ -187,12 +195,32 @@ import { useFieldGroup } from '../composables/useFieldGroup'
 
 defineOptions({ inheritAttrs: false })
 
-const { 
-  id, name, size, color, highlight, disabled, 
-  ariaAttrs, emitFormBlur, emitFormInput, emitFormChange 
-} = useFormField<InputProps>(props, { deferInputValidation: true })
-
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
+// Pass raw `_props` (not the proxy) so the wrapping `<UFormField>` /
+// `<UFieldGroup>` keep precedence over `<UTheme :props>` / `withDefaults` /
+// `app.config` defaults. Their internal fallback is `props?.x ?? injected.x`,
+// so handing them the proxy would leak theme defaults into "explicit prop"
+// and silently override the wrapper.
+const {
+  id, name, size: formFieldSize, color, highlight, disabled,
+  ariaAttrs, emitFormBlur, emitFormInput, emitFormChange
+} = useFormField<InputProps>(_props, { deferInputValidation: true })
+
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(_props)
+
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
+
+// In `tv()` calls, fall back to `props.X` (the proxy) so `<UTheme :props>`
+// applies when there is no wrapping FormField/FieldGroup. Without `?? props.X`,
+// theme size/color/highlight is silently dropped on bare inputs.
+//
+// Final precedence: explicit > closer-context (form/group) > <UTheme :props>
+//                   > withDefaults > app.config > tv defaults
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })({
+  color: color.value ?? props.color,
+  size: inputSize.value ?? props.size,
+  highlight: highlight.value ?? props.highlight,
+  variant: props.variant
+}))
 </script>
 
 <template>
@@ -208,6 +236,8 @@ const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
 </template>
 ```
 
+The same `?? props.X` pattern applies to `useAvatarGroup` (`size`) and any other context composable whose contract is `props?.x ?? injected.x`. The composable itself stays untouched — the fallback lives at the `tv()` call site so the wrapper-vs-theme precedence is explicit and reviewable.
+
 ## Components with Icons
 
 ```vue
@@ -235,43 +265,35 @@ defineExpose({
 </script>
 ```
 
-## Resolving Variants in Template Logic
+## Theme Defaults
 
-`tv()`'s `defaultVariants` only apply when computing CSS classes — they do **not** affect runtime checks (e.g. `<component :is>`, `v-if`, computed conditionals). When a variant drives template logic, use `useResolvedVariants` to mirror `tv()`'s resolution: **prop > `app.config.ts` `defaultVariants` > fallback**.
+`useComponentProps` is the primary integration with `<UTheme>`. The proxy resolves the priority chain **explicit prop > nearest `<UTheme :props>` > `withDefaults` > `app.config.ui.<name>.defaultVariants`** for every prop — including ones driving template logic that `tv().defaultVariants` can't reach (`<component :is>`, `v-if`, computed conditionals). `theme.defaultVariants` is intentionally NOT in the proxy chain — it only feeds `tv()` class resolution. If a prop value is consumed in template logic, it must come from one of the proxy-resolved sources (typically `withDefaults`):
 
 ```vue
-<script setup lang="ts">
-import { useResolvedVariants } from '../composables/useResolvedVariants'
-
-const { variant } = useResolvedVariants('radioGroup', props, theme, ['variant'])
-
-// Use variant.value in template logic and pass it to tv()
-</script>
-
 <template>
-  <component :is="variant === 'list' ? 'div' : Label" />
+  <component :is="props.variant === 'list' ? 'div' : Label" />
 </template>
 ```
 
-For nested prop paths (e.g. `props.content?.position`), use the `overrides` parameter:
-
-```ts
-const { position } = useResolvedVariants('select', props, theme, ['position'], {
-  position: () => props.content?.position
-})
-```
+Notes:
+- The proxy passes through to `_props` for explicitly set props, so `withDefaults` fallbacks stay lower priority than `<UTheme>` overrides.
+- The `ui` prop is deep-merged (slot classes layered on top of theme overrides). All other props are explicit-wins.
+- **Always read props as `props.x` in templates and `<script setup>`.** Bare prop names (`{{ label }}`, `v-if="arrow"`) resolve to `_props` and bypass the proxy, so `<UTheme :props>` defaults won't apply. The `nuxt-ui/no-bare-prop-refs` ESLint rule autofixes this.
+- Pass the **raw** `_props` (not the proxy) to context composables — `useFormField`, `useFieldGroup`, `useAvatarGroup`. Their internal fallback is `props?.x ?? injected.x`, so the wrapping `<UFormField>` / `<UFieldGroup>` / `<UAvatarGroup>` should beat `<UTheme :props>` / `withDefaults` / `app.config` defaults (closer context wins). **Then always fall back to the proxy in `tv()` calls** — `size: formSize.value ?? props.size`, `color: color.value ?? props.color`, `highlight: highlight.value ?? props.highlight`. Without `?? props.X`, `<UTheme :props>` is silently dropped when no closer context wraps the component. Final chain: `explicit > closer-context > UTheme > withDefaults > app.config > tv defaults`. `useComponentIcons` has no injection chain, so pass the proxy `props` directly.
+- Reka primitives' `useForwardProps` / `useForwardPropsEmits` filter root props by `vm.vnode.props ∪ withDefaults` and would strip theme-supplied values. Import `useForwardProps` from `composables/useForwardProps.ts` instead — same `(source, emits?)` signature, proxy-aware.
 
 ## Key Patterns
 
 | Pattern | Usage |
 |---------|-------|
+| `useComponentProps(name, _props)` | Theme-aware proxy — default for new components |
+| `useForwardProps(source, emits?)` (local) | Forward Reka UI props/emits without filtering theme defaults |
 | `withDefaults` | Runtime default values |
 | `defineOptions({ inheritAttrs: false })` | When spreading `$attrs` to inner element |
-| `reactivePick` + `useForwardPropsEmits` | Forward Reka UI props/emits |
+| `reactivePick` | Pick keys off `props` (the proxy) before forwarding |
 | `createReusableTemplate` | Complex template reuse (Table, Modal) |
 | `useTemplateRef` | Template refs (Vue 3.5+) |
 | `toRef(() => props.x)` | Reactive prop access |
-| `useResolvedVariants` | Resolve variants for template logic (when variant drives `<component :is>`, `v-if`, etc.) |
 
 ## Export Types
 
@@ -280,3 +302,16 @@ Add to `src/runtime/types/index.ts`:
 ```ts
 export * from '../components/ComponentName.vue'
 ```
+
+## Register in `ThemeDefaults`
+
+The `ThemeDefaults` interface in `src/runtime/composables/useComponentProps.ts` powers autocomplete inside `<UTheme :props="{ componentName: { … } }">`. The CLI scaffolder (`nuxt-ui make component`) auto-inserts the entry; only do this manually if you skipped the CLI:
+
+```ts
+export interface ThemeDefaults {
+  // ... existing entries
+  componentName?: Partial<ComponentTypes.ComponentNameProps>
+}
+```
+
+The key is the component name in camelCase (matches the `#build/ui` registry). The value is `Partial<XProps>`. This is a flat literal interface (not a mapped type) because Volar only surfaces inner-prop autocomplete for interface members, not mapped-type members, in template inline objects.
diff --git a/AGENTS.md b/AGENTS.md
index 2b3d1338b4..14ac064a8d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -90,11 +90,11 @@ Load these based on your task. **Do not load all files at once** — only load w
 | Props defaults | Use `withDefaults()` for runtime, JSDoc `@defaultValue` for docs |
 | Template slots | Add `data-slot="name"` attributes on all elements |
 | Computed ui | Always use `computed(() => tv(...))` for reactive theming |
-| Theme support | Use `useComponentUI(name, props)` to merge Theme context with component `ui` prop |
+| Theme defaults | Wrap raw props with `useComponentProps(name, _props)` to resolve the priority chain (explicit prop > `<UTheme :props>` > `withDefaults` > `app.config.ui.<name>.defaultVariants`). The proxy deep-merges `ui` automatically — read `props.ui?.<slot>` in templates. `theme.defaultVariants` is **not** read by the proxy — it only feeds `tv()` class resolution. Pass the **raw** `_props` (not the proxy) to `useFormField` / `useFieldGroup` / `useAvatarGroup` so their injection precedence (closer context wins) stays correct. |
+| Form/group fallback | When consuming `size` / `color` / `highlight` from `useFormField`, `useFieldGroup`, or `useAvatarGroup`, always fall back to the proxy in `tv()` calls: `size: size.value ?? props.size`, `color: color.value ?? props.color`, `highlight: highlight.value ?? props.highlight`. This gives the full precedence `explicit > group/formField > <UTheme :props> > undefined`. Without the `?? props.X` fallback, `<UTheme :props>` is silently dropped when the closer context (FormField/FieldGroup/AvatarGroup) is absent. |
 | Semantic colors | Use `text-default`, `bg-elevated`, etc. - never Tailwind palette |
-| Reka UI props | Use `reactivePick` + `useForwardPropsEmits` to forward props |
+| Reka UI props | Use `reactivePick` + `useForwardProps(source, emits?)` from `composables/useForwardProps` to forward props (proxy-aware; reka-ui's `useForwardProps` / `useForwardPropsEmits` filter out `<UTheme :props>` defaults) |
 | Form components | Use `useFormField` and `useFieldGroup` composables |
-| Variant in template logic | Use `useResolvedVariants(name, props, theme, ['variant'])` when variant values are consumed in template logic (`<component :is>`, `v-if`, computed) — `tv()` `defaultVariants` only affect classes, not runtime checks |
 
 ## Component Creation Workflow
 
@@ -107,12 +107,13 @@ Progress:
 - [ ] 2. Implement component in src/runtime/components/
 - [ ] 3. Create theme in src/theme/
 - [ ] 4. Export types from src/runtime/types/index.ts
-- [ ] 5. Write tests in test/components/
-- [ ] 6. Create docs in docs/content/docs/2.components/
-- [ ] 7. Add playground page
-- [ ] 8. Run pnpm run lint
-- [ ] 9. Run pnpm run typecheck
-- [ ] 10. Run pnpm run test
+- [ ] 5. Register in ThemeDefaults interface (src/runtime/composables/useComponentProps.ts)
+- [ ] 6. Write tests in test/components/
+- [ ] 7. Create docs in docs/content/docs/2.components/
+- [ ] 8. Add playground page
+- [ ] 9. Run pnpm run lint
+- [ ] 10. Run pnpm run typecheck
+- [ ] 11. Run pnpm run test
 ```
 
 ### PR Review Checklist
diff --git a/cli/commands/make/component.mjs b/cli/commands/make/component.mjs
index cebe3e455e..1e4c1f69a5 100644
--- a/cli/commands/make/component.mjs
+++ b/cli/commands/make/component.mjs
@@ -3,7 +3,7 @@ import { resolve } from 'pathe'
 import { defineCommand } from 'citty'
 import { consola } from 'consola'
 import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
-import { appendFile, sortFile } from '../../utils.mjs'
+import { appendFile, appendThemeDefault, sortFile } from '../../utils.mjs'
 import templates from '../../templates.mjs'
 
 export default defineCommand({
@@ -75,8 +75,12 @@ export default defineCommand({
 
     if (!args.prose) {
       const typesPath = resolve(path, 'src/runtime/types/index.ts')
-      await appendFile(typesPath, `export * from '../components/${args.content ? 'content/' : ''}${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
+      const pascal = splitByCase(name).map(p => upperFirst(p)).join('')
+      await appendFile(typesPath, `export * from '../components/${args.content ? 'content/' : ''}${pascal}.vue'`)
       await sortFile(typesPath)
+
+      const useComponentPropsPath = resolve(path, 'src/runtime/composables/useComponentProps.ts')
+      await appendThemeDefault(useComponentPropsPath, camelCase(name), `${pascal}Props`)
     }
   }
 })
diff --git a/cli/templates.mjs b/cli/templates.mjs
index 31d092aa85..e52d115db0 100644
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -20,18 +20,28 @@ const component = ({ name, primitive, prose, content }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
   const kebabName = kebabCase(name)
+  const nested = prose || content
+  const dirPrefix = prose ? 'prose/' : (content ? 'content/' : '')
+  const importPrefix = nested ? '../..' : '..'
+  const componentKey = prose ? `prose.${camelName}` : camelName
+  const componentConfigArgs = prose
+    ? `typeof theme, AppConfig, '${camelName}', 'ui.prose'`
+    : `typeof theme, AppConfig, '${camelName}'`
+  const appConfigLookup = prose
+    ? `appConfig.ui?.prose?.${camelName}`
+    : `appConfig.ui?.${camelName}`
 
   return {
-    filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
+    filename: `src/runtime/components/${dirPrefix}${upperName}.vue`,
     contents: primitive
       ? `
 <script lang="ts">
 import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/tv'
+import theme from '#build/ui/${dirPrefix}${kebabName}'
+import type { ComponentConfig } from '${importPrefix}/types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
+type ${upperName} = ComponentConfig<${componentConfigArgs}>
 
 export interface ${upperName}Props {
   /**
@@ -52,18 +62,22 @@ export interface ${upperName}Slots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
+import { useComponentProps } from '${importPrefix}/composables/useComponentProps'
+import { tv } from '${importPrefix}/utils/tv'
 
-const props = defineProps<${upperName}Props>()
+const _props = defineProps<${upperName}Props>()
 defineSlots<${upperName}Slots>()
 
+const props = useComponentProps('${componentKey}', _props)
+
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
@@ -71,42 +85,54 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
       : `
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
+import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/tv'
+import theme from '#build/ui/${dirPrefix}${kebabName}'
+import type { ComponentConfig } from '${importPrefix}/types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
+type ${upperName} = ComponentConfig<${componentConfigArgs}>
 
-export interface ${upperName}Props extends Pick<${upperName}RootProps> {
+// TODO: narrow with \`Pick<${upperName}RootProps, '...' | '...'>\` to expose only the props you need.
+export interface ${upperName}Props extends ${upperName}RootProps {
   class?: any
   ui?: ${upperName}['slots']
 }
 
 export interface ${upperName}Emits extends ${upperName}RootEmits {}
 
-export interface ${upperName}Slots {}
+export interface ${upperName}Slots {
+  default?(props?: {}): VNode[]
+}
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
+import { ${upperName}Root } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
+import { useComponentProps } from '${importPrefix}/composables/useComponentProps'
+import { useForwardProps } from '${importPrefix}/composables/useForwardProps'
+import { tv } from '${importPrefix}/utils/tv'
 
-const props = defineProps<${upperName}Props>()
+const _props = defineProps<${upperName}Props>()
 const emits = defineEmits<${upperName}Emits>()
-const slots = defineSlots<${upperName}Slots>()
+defineSlots<${upperName}Slots>()
+
+const props = useComponentProps('${componentKey}', _props)
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props), emits)
+// TODO: list the same keys as in \`${upperName}Props\` Pick.
+const rootProps = useForwardProps(reactivePick(props, 'as'), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" />
+  <${upperName}Root v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+  </${upperName}Root>
 </template>
 `
   }
diff --git a/cli/utils.mjs b/cli/utils.mjs
index 788a4fead7..5704ceed65 100644
--- a/cli/utils.mjs
+++ b/cli/utils.mjs
@@ -16,6 +16,25 @@ export async function appendFile(path, contents) {
   }
 }
 
+/**
+ * Insert a `key?: Partial<ComponentTypes.XProps>` entry into the `ThemeDefaults`
+ * interface in `src/runtime/composables/useComponentProps.ts`, keeping entries
+ * sorted alphabetically and avoiding duplicates.
+ */
+export async function appendThemeDefault(path, key, propsType) {
+  const file = await fsp.readFile(path, 'utf-8')
+  const entry = `  ${key}?: Partial<ComponentTypes.${propsType}>`
+
+  const match = file.match(/(export interface ThemeDefaults \{\n)([\s\S]*?)(\n\})/)
+  if (!match) return
+
+  const [, header, body, footer] = match
+  if (body.split('\n').includes(entry)) return
+
+  const sorted = [...body.split('\n'), entry].sort().join('\n')
+  await fsp.writeFile(path, file.replace(match[0], header + sorted + footer))
+}
+
 export function normalizeLocale(locale) {
   if (!locale) {
     return ''
diff --git a/docs/app/components/content/examples/theme/ThemePropsExample.vue b/docs/app/components/content/examples/theme/ThemePropsExample.vue
new file mode 100644
index 0000000000..30e8856bed
--- /dev/null
+++ b/docs/app/components/content/examples/theme/ThemePropsExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <UTheme
+    :props="{
+      button: { color: 'neutral', variant: 'subtle', size: 'lg' },
+      tooltip: { delayDuration: 0, arrow: true }
+    }"
+  >
+    <div class="flex items-center gap-2">
+      <UTooltip text="Inherits delayDuration from theme">
+        <UButton label="Hover me" />
+      </UTooltip>
+      <UButton label="With icon" icon="i-lucide-rocket" />
+      <UButton label="Square" icon="i-lucide-star" square />
+    </div>
+  </UTheme>
+</template>
diff --git a/docs/content/docs/2.components/theme.md b/docs/content/docs/2.components/theme.md
index 54f4e54080..ba3194afe8 100644
--- a/docs/content/docs/2.components/theme.md
+++ b/docs/content/docs/2.components/theme.md
@@ -9,7 +9,7 @@ links:
 
 ## Usage
 
-The Theme component allows you to override the theme of all child components without modifying each one individually. It uses Vue's `provide` / `inject` mechanism under the hood, so the overrides apply at any depth.
+The Theme component allows you to override default **props** and **slot classes** of all child components without modifying each one individually. It uses Vue's `provide` / `inject` mechanism under the hood, so the overrides apply at any depth.
 
 Use the `ui` prop to pass an object where keys are component names (camelCase) and values are their slot class overrides:
 
@@ -35,9 +35,23 @@ For app-level theme configuration, we recommend using the `vite.config.ts` file
 :::
 ::
 
+### Props
+
+Use the `props` prop to override the **default value of any prop** on descendant components — not just slot classes. Each key maps to a partial of that component's props, fully typed against its `Props` interface:
+
+::component-example
+---
+name: 'theme-props-example'
+---
+::
+
+::tip
+Explicit props on a component (e.g. `<UButton color="primary" />`) always win over `<UTheme :props>`. Theme defaults only apply when the prop wasn't passed explicitly.
+::
+
 ### Multiple
 
-You can theme multiple component types at once by passing different keys in the `ui` prop.
+You can theme multiple component types at once by passing different keys in the `ui` or `props` prop.
 
 ::component-example
 ---
@@ -47,7 +61,7 @@ name: 'theme-multiple-example'
 
 ### Nested
 
-Theme components can be nested. When nested, the innermost Theme's overrides take precedence for the components it wraps.
+Theme components can be nested. When nested, the innermost Theme's overrides take precedence for the components it wraps. Keys that aren't overridden by the inner Theme (whether on the same component or on different ones) are inherited from the outer Theme, so you can configure global defaults near the root and only override what you need locally.
 
 ::component-example
 ---
@@ -57,7 +71,7 @@ name: 'theme-nested-example'
 
 ### Priority
 
-The `ui` prop on individual components always takes priority over the Theme component. This lets you override specific instances while still benefiting from the shared theme.
+Explicitly setting any prop (including `ui`) on an individual component always takes priority over the Theme component. This lets you override specific instances while still benefiting from the shared theme.
 
 ::component-example
 ---
@@ -91,6 +105,10 @@ name: 'theme-form-example'
 ---
 ::
 
+::tip
+`<UFormField>`, `<UFieldGroup>` and `<UAvatarGroup>` keep precedence over `<UTheme :props>` for `size`, `color` and `highlight`, so the closer wrapper always wins. Validation errors also force the `error` color over any theme value.
+::
+
 ### With prose components
 
 You can theme prose (typography) components by nesting them under the `prose` key. This is useful when rendering Markdown content with a tighter or custom typographic scale.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7844e44083..75502f4adf 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,144 @@
 import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
 
+/**
+ * Flag bare prop references in templates of components that use
+ * `useComponentProps`. Bare refs auto-resolve to the raw `defineProps` result
+ * via Vue's compiler-generated `__props.X`, bypassing the proxy that resolves
+ * `<UTheme :props>` and `app.config` defaults.
+ *
+ * Auto-fixes by rewriting `arrow` → `props.arrow`.
+ *
+ * In `<script setup>`, every free identifier in a template expression resolves
+ * to either (a) a setup-scope binding or (b) `__props.X`. So if an identifier
+ * isn't a known setup binding, slot-scoped variable, or JS global, it must be
+ * a prop access — and therefore needs the `props.` prefix to flow through the
+ * proxy. This catches inherited props (extended/picked from imported types)
+ * that no static interface walk would find.
+ */
+const KNOWN_GLOBALS = new Set([
+  'undefined', 'null', 'true', 'false', 'NaN', 'Infinity',
+  'console', 'window', 'document', 'navigator', 'location', 'history',
+  'Math', 'JSON', 'Object', 'Array', 'String', 'Number', 'Boolean',
+  'Date', 'RegExp', 'Promise', 'Symbol', 'Error', 'Map', 'Set',
+  'WeakMap', 'WeakSet', 'Proxy', 'Reflect',
+  'parseInt', 'parseFloat', 'isNaN', 'isFinite', 'encodeURIComponent', 'decodeURIComponent'
+])
+const noBarePropRefs = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Require `props.X` access in templates of components using `useComponentProps`'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      bareRef: 'Bare prop reference `{{ name }}` bypasses the `useComponentProps` proxy. Use `{{ propsVar }}.{{ name }}` so `<UTheme :props>` defaults flow through.'
+    }
+  },
+  create(context) {
+    const parserServices = context.sourceCode?.parserServices ?? context.parserServices
+    if (!parserServices?.defineTemplateBodyVisitor) {
+      return {}
+    }
+
+    let usesComponentProps = false
+    let propsVar = 'props'
+    let rawPropsVar = '_props'
+    const setupBindings = new Set()
+
+    function collectIdsFromPattern(pattern) {
+      if (!pattern) return
+      if (pattern.type === 'Identifier') {
+        setupBindings.add(pattern.name)
+      } else if (pattern.type === 'ObjectPattern') {
+        for (const prop of pattern.properties) {
+          if (prop.type === 'Property') collectIdsFromPattern(prop.value)
+          else if (prop.type === 'RestElement') collectIdsFromPattern(prop.argument)
+        }
+      } else if (pattern.type === 'ArrayPattern') {
+        for (const el of pattern.elements) {
+          if (el) collectIdsFromPattern(el)
+        }
+      } else if (pattern.type === 'AssignmentPattern') {
+        collectIdsFromPattern(pattern.left)
+      } else if (pattern.type === 'RestElement') {
+        collectIdsFromPattern(pattern.argument)
+      }
+    }
+
+    return parserServices.defineTemplateBodyVisitor(
+      {
+        VExpressionContainer(node) {
+          if (!usesComponentProps) return
+          const refs = node.references ?? []
+          for (const ref of refs) {
+            if (ref.variable) continue
+            const id = ref.id
+            const name = id.name
+            if (!name) continue
+            if (name === propsVar || name === rawPropsVar) continue
+            if (setupBindings.has(name)) continue
+            if (KNOWN_GLOBALS.has(name)) continue
+            if (name.startsWith('$') || name.startsWith('_')) continue
+            // Skip PascalCase identifiers — they're TypeScript type references
+            // inside `as TypeName` casts, generic params (`T`), or `keyof X`,
+            // not runtime prop reads. Vue components / props are camelCase by
+            // convention; type names are PascalCase.
+            if (/^[A-Z]/.test(name)) continue
+            context.report({
+              node: id,
+              messageId: 'bareRef',
+              data: { name, propsVar },
+              fix(fixer) {
+                // Handle object literal shorthand: `{ to, target }` should
+                // become `{ to: props.to, target: props.target }`, not the
+                // syntactically-broken `{ props.to, props.target }`.
+                const parent = id.parent
+                if (
+                  parent
+                  && parent.type === 'Property'
+                  && parent.shorthand
+                  && parent.key === id
+                ) {
+                  return fixer.replaceText(parent, `${name}: ${propsVar}.${name}`)
+                }
+                return fixer.replaceText(id, `${propsVar}.${name}`)
+              }
+            })
+          }
+        }
+      },
+      {
+        'Program > VariableDeclaration > VariableDeclarator'(node) {
+          collectIdsFromPattern(node.id)
+        },
+        'Program > FunctionDeclaration'(node) {
+          if (node.id?.type === 'Identifier') setupBindings.add(node.id.name)
+        },
+        'Program > ClassDeclaration'(node) {
+          if (node.id?.type === 'Identifier') setupBindings.add(node.id.name)
+        },
+        ImportDeclaration(node) {
+          for (const spec of node.specifiers) {
+            if (spec.local?.type === 'Identifier') setupBindings.add(spec.local.name)
+          }
+        },
+        'CallExpression[callee.name="useComponentProps"]'(node) {
+          usesComponentProps = true
+          const decl = node.parent?.type === 'VariableDeclarator' ? node.parent : null
+          if (decl?.id?.type === 'Identifier') {
+            propsVar = decl.id.name
+          }
+          const rawArg = node.arguments[1]
+          if (rawArg?.type === 'Identifier') {
+            rawPropsVar = rawArg.name
+          }
+        }
+      }
+    )
+  }
+}
+
 export default createConfigForNuxt({
   features: {
     tooling: true,
@@ -16,4 +155,16 @@ export default createConfigForNuxt({
   '@typescript-eslint/ban-types': 'off',
   '@typescript-eslint/no-empty-object-type': 'off',
   '@typescript-eslint/no-explicit-any': 'off'
+}).append({
+  files: ['src/runtime/components/**/*.vue'],
+  plugins: {
+    'nuxt-ui': {
+      rules: {
+        'no-bare-prop-refs': noBarePropRefs
+      }
+    }
+  },
+  rules: {
+    'nuxt-ui/no-bare-prop-refs': 'error'
+  }
 })
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index e427a0ee72..b5e7a27165 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -83,6 +83,7 @@ const components = [
   'table',
   'tabs',
   'textarea',
+  'theme',
   'timeline',
   'toast',
   'tooltip',
diff --git a/playgrounds/nuxt/app/pages/components/form-field.vue b/playgrounds/nuxt/app/pages/components/form-field.vue
index 87730d6505..067bfa4442 100644
--- a/playgrounds/nuxt/app/pages/components/form-field.vue
+++ b/playgrounds/nuxt/app/pages/components/form-field.vue
@@ -6,7 +6,7 @@ const orientations = Object.keys(theme.variants.orientation)
 
 const attrs = reactive({
   size: [theme.defaultVariants.size],
-  orientation: [theme.defaultVariants.orientation]
+  orientation: ['vertical' as const]
 })
 
 const feedbacks = [
diff --git a/playgrounds/nuxt/app/pages/components/theme.vue b/playgrounds/nuxt/app/pages/components/theme.vue
new file mode 100644
index 0000000000..5efc1edf2e
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/theme.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import theme from '#build/ui/button'
+
+const colors = Object.keys(theme.variants.color)
+const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size)
+
+const color = ref<keyof typeof theme.variants.color>('warning')
+const variant = ref<keyof typeof theme.variants.variant>('soft')
+const size = ref<keyof typeof theme.variants.size>('lg')
+
+const checkbox = ref<boolean>(false)
+const radio = ref<string>('1')
+const select = ref<string>('')
+const input = ref<string>('')
+const radioItems = ['1', '2', '3']
+const selectItems = ['Apple', 'Banana', 'Cherry']
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="color" :items="colors" />
+    <USelect v-model="variant" :items="variants" />
+    <USelect v-model="size" :items="sizes" />
+  </Navbar>
+
+  <div class="flex flex-col gap-8">
+    <!-- Per-component prop defaults via :props -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        <code>:props={{ `{ button: { color: '${color}', variant: '${variant}', size: '${size}' } }` }}</code>
+      </p>
+
+      <UTheme :props="{ button: { color, variant, size } }">
+        <div class="flex items-center gap-2">
+          <UButton label="Themed" />
+          <UButton label="Themed with icon" icon="i-lucide-rocket" />
+          <UButton label="Themed square" icon="i-lucide-star" square />
+        </div>
+      </UTheme>
+    </div>
+
+    <!-- Explicit prop overrides theme -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        Explicit props win over <code>:props</code>
+      </p>
+
+      <UTheme :props="{ button: { color, variant, size } }">
+        <div class="flex items-center gap-2">
+          <UButton label="Theme only" />
+          <UButton label="color=primary" color="primary" />
+          <UButton label="variant=solid" variant="solid" />
+          <UButton label="size=xs" size="xs" />
+        </div>
+      </UTheme>
+    </div>
+
+    <!-- :ui (slot classes) + :props (prop defaults) together -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        <code>:ui</code> slot classes + <code>:props</code> prop defaults together
+      </p>
+
+      <UTheme
+        :props="{ button: { color, variant } }"
+        :ui="{ button: { base: 'font-bold rounded-full' } }"
+      >
+        <div class="flex items-center gap-2">
+          <UButton label="Styled + themed" />
+          <UButton label="With icon" icon="i-lucide-zap" />
+        </div>
+      </UTheme>
+    </div>
+
+    <!-- Nested UTheme: inner overrides bleed in, other components inherit from outer -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        Nested <code>&lt;UTheme&gt;</code>: outer sets tooltip globally, inner only overrides button — both compose
+      </p>
+
+      <UTheme :props="{ button: { color, variant, size }, tooltip: { delayDuration: 0, arrow: true } }">
+        <div class="flex items-center gap-2">
+          <UTooltip text="Outer tooltip (instant + arrow)">
+            <UButton label="Outer" />
+          </UTooltip>
+          <UTheme :props="{ button: { color: 'success' } }">
+            <UTooltip text="Inner tooltip still inherits delay + arrow">
+              <UButton label="color=success (inner)" />
+            </UTooltip>
+          </UTheme>
+          <UTooltip text="Outer tooltip again">
+            <UButton label="Outer again" />
+          </UTooltip>
+        </div>
+      </UTheme>
+    </div>
+
+    <!-- :props on form components (with and without UFormField wrapping) -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        <code>:props</code> flows into every form component (with or without <code>&lt;UFormField&gt;</code>)
+      </p>
+
+      <UTheme :props="{ input: { size, color }, pinInput: { size, color }, checkbox: { size, color }, switch: { size, color }, radioGroup: { color, orientation: 'horizontal' }, select: { color, variant: 'subtle' } }">
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-4">
+            <UInput v-model="input" placeholder="Bare input" />
+            <UPinInput :length="3" />
+            <UCheckbox v-model="checkbox" label="Bare checkbox" />
+            <USwitch label="Bare switch" />
+          </div>
+          <div class="flex items-center gap-6">
+            <URadioGroup v-model="radio" :items="radioItems" />
+            <USelect v-model="select" :items="selectItems" placeholder="Themed select" />
+          </div>
+        </div>
+      </UTheme>
+    </div>
+
+    <!-- Closer context wins: UFormField/FieldGroup beats :props; error beats both -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        Closer context wins: <code>&lt;UFormField size="xl"&gt;</code> beats <code>:props</code>; validation error forces <code>error</code> color
+      </p>
+
+      <UTheme :props="{ input: { size, color } }">
+        <div class="flex flex-col gap-3">
+          <UFormField label="Bare (theme size applies)">
+            <UInput v-model="input" placeholder="theme size" />
+          </UFormField>
+          <UFormField label="FormField size=xl wins" size="xl">
+            <UInput v-model="input" placeholder="formfield size" />
+          </UFormField>
+          <UFormField label="With error: error color wins" error="Required">
+            <UInput v-model="input" placeholder="error color" />
+          </UFormField>
+        </div>
+      </UTheme>
+    </div>
+
+    <!-- Baseline: bare components must keep Reka primitives' own defaults -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-muted">
+        Without <code>&lt;UTheme&gt;</code> (baseline) — bare Tooltip uses Reka's default delay and has no arrow; bare Checkbox matches unstyled defaults
+      </p>
+
+      <div class="flex items-center gap-4">
+        <UButton label="Default" />
+        <UButton label="Default with icon" icon="i-lucide-rocket" />
+        <UTooltip text="Default delay, no arrow">
+          <UButton label="Hover (baseline)" variant="outline" />
+        </UTooltip>
+        <UCheckbox label="Bare checkbox" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 13244d7c31..5a7867ed69 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -78,15 +78,16 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
 
 <script setup lang="ts" generic="T extends AccordionItem">
 import { computed } from 'vue'
-import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<AccordionProps<T>>(), {
+const _props = withDefaults(defineProps<AccordionProps<T>>(), {
   type: 'single',
   collapsible: true,
   unmountOnHide: true,
@@ -96,18 +97,20 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
 const emits = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
 
+const props = useComponentProps<AccordionProps<T>>('accordion', _props)
+
 const appConfig = useAppConfig() as Accordion['AppConfig']
-const uiProp = useComponentUI('accordion', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'unmountOnHide'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'unmountOnHide'), emits)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })({
   disabled: props.disabled
 }))
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="props.type" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -115,27 +118,27 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
       :value="get(item, props.valueKey as string) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [uiProp?.header, item.ui?.header] })">
-        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item?.ui?.leadingIcon] })" />
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
+          <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [uiProp?.trailingIcon, item.ui?.trailingIcon] })" />
+            <UIcon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content] })">
+      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open" :ui="ui">
-          <div data-slot="body" :class="ui.body({ class: [uiProp?.body, item.ui?.body] })">
+          <div data-slot="body" :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
             <slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index 2dd4b1d452..42ad65ed48 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -74,23 +74,25 @@ export interface AlertSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<AlertProps>(), {
+const _props = withDefaults(defineProps<AlertProps>(), {
   orientation: 'vertical'
 })
 const emits = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
+const props = useComponentProps('alert', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Alert['AppConfig']
-const uiProp = useComponentUI('alert', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })({
   color: props.color,
   variant: props.variant,
@@ -100,48 +102,48 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="((uiProp?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+      <UAvatar v-if="props.avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
-          {{ title }}
+          {{ props.title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+      <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
-          {{ description }}
+          {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
-          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+          <UButton v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="(orientation === 'horizontal' && (actions?.length || !!slots.actions)) || close" data-slot="actions" :class="ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
+    <div v-if="(props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)) || props.close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)">
         <slot name="actions">
-          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+          <UButton v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </template>
 
       <slot name="close" :ui="ui">
         <UButton
-          v-if="close"
-          :icon="closeIcon || appConfig.ui.icons.close"
+          v-if="props.close"
+          :icon="props.closeIcon || appConfig.ui.icons.close"
           color="neutral"
           variant="link"
           :aria-label="t('alert.close')"
-          v-bind="(typeof close === 'object' ? close : {})"
+          v-bind="(typeof props.close === 'object' ? props.close : {})"
           data-slot="close"
-          :class="ui.close({ class: uiProp?.close })"
+          :class="ui.close({ class: props.ui?.close })"
           @click="emits('update:open', false)"
         />
       </slot>
diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index 4ebe139710..5013cb34d9 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -108,7 +108,7 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
 import { reactive, ref, computed, useTemplateRef } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { omit, pick } from '../utils'
 import { tv } from '../utils/tv'
@@ -124,7 +124,7 @@ import UPinInput from './PinInput.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<AuthFormProps<T, F>>(), {
+const _props = withDefaults(defineProps<AuthFormProps<T, F>>(), {
   separator: 'or'
 })
 
@@ -135,7 +135,7 @@ type TypedAuthFormField = AuthFormField & {
   defaultValue?: FormStateType[keyof FormStateType]
 }
 
-const state = reactive<FormStateType>((props.fields as TypedAuthFormField[] || []).reduce<FormStateType>((acc, field) => {
+const state = reactive<FormStateType>((_props.fields as TypedAuthFormField[] || []).reduce<FormStateType>((acc, field) => {
   if (field.name) {
     acc[field.name] = field.defaultValue
   }
@@ -145,9 +145,10 @@ const state = reactive<FormStateType>((props.fields as TypedAuthFormField[] || [
 defineEmits<AuthFormEmits<typeof state>>()
 const slots = defineSlots<AuthFormSlots<typeof state, F>>()
 
+const props = useComponentProps<AuthFormProps<T, F>>('authForm', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as AuthForm['AppConfig']
-const uiProp = useComponentUI('authForm', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.authForm || {}) })())
@@ -190,34 +191,34 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="(icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="(props.icon || !!slots.leading) || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
-        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+            <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
-      <div v-if="providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: uiProp?.providers })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+      <div v-if="props.providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: props.ui?.providers })">
         <slot name="providers">
           <UButton
-            v-for="(provider, index) in providers"
+            v-for="(provider, index) in props.providers"
             :key="index"
             block
             color="neutral"
@@ -229,29 +230,29 @@ defineExpose({
 
       <slot name="separator">
         <USeparator
-          v-if="providers?.length && fields?.length"
-          v-bind="typeof separator === 'object' ? separator : { label: separator }"
+          v-if="props.providers?.length && props.fields?.length"
+          v-bind="typeof props.separator === 'object' ? props.separator : { label: props.separator }"
           data-slot="separator"
-          :class="ui.separator({ class: uiProp?.separator })"
+          :class="ui.separator({ class: props.ui?.separator })"
         />
       </slot>
 
       <UForm
-        v-if="fields?.length"
+        v-if="props.fields?.length"
         ref="formRef"
         :state="state"
-        :schema="schema"
-        :validate="validate"
-        :validate-on="validateOn"
-        :disabled="disabled"
-        :loading-auto="loadingAuto"
+        :schema="props.schema"
+        :validate="props.validate"
+        :validate-on="props.validateOn"
+        :disabled="props.disabled"
+        :loading-auto="props.loadingAuto"
         data-slot="form"
-        :class="ui.form({ class: uiProp?.form })"
+        :class="ui.form({ class: props.ui?.form })"
         v-bind="$attrs"
-        @submit="onSubmit"
+        @submit="props.onSubmit"
       >
         <UFormField
-          v-for="field in fields"
+          v-for="field in props.fields"
           :key="field.name"
           v-bind="pickFieldProps(field)"
         >
@@ -260,14 +261,14 @@ defineExpose({
               v-if="field.type === 'checkbox'"
               v-model="state[field.name]"
               data-slot="checkbox"
-              :class="ui.checkbox({ class: uiProp?.checkbox })"
+              :class="ui.checkbox({ class: props.ui?.checkbox })"
               v-bind="(omitFieldProps(field))"
             />
             <USelectMenu
               v-else-if="field.type === 'select'"
               v-model="state[field.name]"
               data-slot="select"
-              :class="ui.select({ class: uiProp?.select })"
+              :class="ui.select({ class: props.ui?.select })"
               v-bind="(omitFieldProps(field) as AuthFormSelectField)"
             />
             <UPinInput
@@ -275,7 +276,7 @@ defineExpose({
               :id="field.name"
               v-model="state[field.name]"
               data-slot="otp"
-              :class="ui.otp({ class: uiProp?.otp })"
+              :class="ui.otp({ class: props.ui?.otp })"
               v-bind="(Object.assign({}, omitFieldProps(field), typeof (field as AuthFormOtpField).otp === 'object' ? (field as AuthFormOtpField).otp : {}) as any)"
               otp
             />
@@ -284,7 +285,7 @@ defineExpose({
               ref="passwordRef"
               v-model="state[field.name]"
               data-slot="password"
-              :class="ui.password({ class: uiProp?.password })"
+              :class="ui.password({ class: props.ui?.password })"
               v-bind="(omitFieldProps(field) as AuthFormInputField<'password'>)"
               :type="passwordVisibility ? 'text' : 'password'"
             >
@@ -305,7 +306,7 @@ defineExpose({
               v-else
               v-model="state[field.name]"
               data-slot="input"
-              :class="ui.input({ class: uiProp?.input })"
+              :class="ui.input({ class: props.ui?.input })"
               v-bind="(omitFieldProps(field) as AuthFormInputField)"
             />
           </slot>
@@ -329,20 +330,20 @@ defineExpose({
 
         <slot v-if="!!slots.validation" name="validation" />
 
-        <slot name="submit" :loading="loading">
+        <slot name="submit" :loading="props.loading">
           <UButton
             type="submit"
             :label="t('authForm.submit')"
             block
-            :loading="loading"
-            :loading-auto="loadingAuto"
-            v-bind="submit"
+            :loading="props.loading"
+            :loading-auto="props.loadingAuto"
+            v-bind="props.submit"
           />
         </slot>
       </UForm>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 60a6aa0f73..ea427d942b 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -42,7 +42,7 @@ import { Primitive, Slot } from 'reka-ui'
 import { defu } from 'defu'
 import { useAppConfig } from '#imports'
 import ImageComponent from '#build/ui-image-component'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
@@ -50,8 +50,11 @@ import UChip from './Chip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<AvatarProps>()
+const _props = defineProps<AvatarProps>()
 
+const props = useComponentProps('avatar', _props)
+
+// eslint-disable-next-line vue/no-dupe-keys
 const as = computed(() => {
   if (typeof props.as === 'string' || typeof props.as?.render === 'function') {
     return { root: props.as }
@@ -63,15 +66,15 @@ const as = computed(() => {
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
 const appConfig = useAppConfig() as Avatar['AppConfig']
-const uiProp = useComponentUI('avatar', props)
-const { size } = useAvatarGroup(props)
+
+const { size } = useAvatarGroup(_props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })({
-  size: size.value
+  size: size.value ?? props.size
 }))
 
-const rootClass = computed(() => ui.value.root({ class: [uiProp.value?.root, props.class] }))
+const rootClass = computed(() => ui.value.root({ class: [props.ui?.root, props.class] }))
 
 const sizePx = computed(() => {
   const sizeClass = rootClass.value.split(' ').find(c => /^size-\d+$/.test(c))
@@ -107,21 +110,21 @@ function onError() {
   >
     <component
       :is="as.img || ImageComponent"
-      v-if="src && !error"
-      :src="src"
-      :alt="alt"
+      v-if="props.src && !error"
+      :src="props.src"
+      :alt="props.alt"
       :width="sizePx"
       :height="sizePx"
       v-bind="$attrs"
       data-slot="image"
-      :class="ui.image({ class: uiProp?.image })"
+      :class="ui.image({ class: props.ui?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-        <span v-else data-slot="fallback" :class="ui.fallback({ class: uiProp?.fallback })">{{ fallback || '&nbsp;' }}</span>
+        <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <span v-else data-slot="fallback" :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
       </slot>
     </Slot>
   </component>
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index b11e0845b9..de73a31594 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -33,21 +33,24 @@ export interface AvatarGroupSlots {
 import { computed, provide } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
 import { tv } from '../utils/tv'
 import UAvatar from './Avatar.vue'
 
-const props = defineProps<AvatarGroupProps>()
+const _props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()
 
+const props = useComponentProps('avatarGroup', _props)
+
 const appConfig = useAppConfig() as AvatarGroup['AppConfig']
-const uiProp = useComponentUI('avatarGroup', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })({
   size: props.size
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
 
 const children = computed(() => {
@@ -96,8 +99,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="ui.base({ class: uiProp?.base })" />
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="ui.base({ class: uiProp?.base })" />
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" data-slot="base" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 85a9a33957..3232f59f99 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -46,45 +46,47 @@ import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 
-const props = withDefaults(defineProps<BadgeProps>(), {
+const _props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
 const slots = defineSlots<BadgeSlots>()
 
+const props = useComponentProps('badge', _props)
+
 const appConfig = useAppConfig() as Badge['AppConfig']
-const uiProp = useComponentUI('badge', props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<BadgeProps>(props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<BadgeProps>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })({
   color: props.color,
   variant: props.variant,
-  size: fieldGroupSize.value || props.size,
+  size: fieldGroupSize.value ?? props.size,
   square: props.square || (!slots.default && !props.label),
   fieldGroup: orientation.value
 }))
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <slot name="leading" :ui="ui">
-      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-      <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot :ui="ui">
-      <span v-if="label !== undefined && label !== null" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-        {{ label }}
+      <span v-if="props.label !== undefined && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        {{ props.label }}
       </span>
     </slot>
 
     <slot name="trailing" :ui="ui">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>
diff --git a/src/runtime/components/Banner.vue b/src/runtime/components/Banner.vue
index d2fe4ae9c3..182e21b24b 100644
--- a/src/runtime/components/Banner.vue
+++ b/src/runtime/components/Banner.vue
@@ -68,7 +68,7 @@ export interface BannerEmits {
 import { computed, ref, onMounted, useId } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useHead, useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import ULink from './Link.vue'
@@ -78,20 +78,23 @@ import UButton from './Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<BannerProps>()
+const _props = defineProps<BannerProps>()
 const slots = defineSlots<BannerSlots>()
 const emits = defineEmits<BannerEmits>()
 
+const props = useComponentProps('banner', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Banner['AppConfig']
-const uiProp = useComponentUI('banner', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.banner || {}) })({
   color: props.color,
   to: !!props.to
 }))
 
 const instanceId = useId()
+// eslint-disable-next-line vue/no-dupe-keys
 const id = computed(() => {
   const rawId = props.id || instanceId
   // Sanitize to only allow safe characters for CSS custom properties and selectors
@@ -146,16 +149,16 @@ function onClose() {
 <template>
   <Primitive
     v-show="isVisible"
-    :as="as"
+    :as="props.as"
     class="banner"
     :data-banner-id="id"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <ULink
-      v-if="to"
-      :aria-label="title"
-      v-bind="{ to, target, ...$attrs }"
+      v-if="props.to"
+      :aria-label="props.title"
+      v-bind="{ to: props.to, target: props.target, ...$attrs }"
       class="focus:outline-none"
       tabindex="-1"
       raw
@@ -163,39 +166,39 @@ function onClose() {
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div data-slot="left" :class="ui.left({ class: uiProp?.left })" />
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })" />
 
-      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot name="leading" :ui="ui">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+          <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+        <div v-if="props.actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
-            <UButton v-for="(action, index) in actions" :key="index" color="neutral" size="xs" v-bind="action" />
+            <UButton v-for="(action, index) in props.actions" :key="index" color="neutral" size="xs" v-bind="action" />
           </slot>
         </div>
       </div>
 
-      <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="close" :ui="ui">
           <UButton
-            v-if="close"
-            :icon="closeIcon || appConfig.ui.icons.close"
+            v-if="props.close"
+            :icon="props.closeIcon || appConfig.ui.icons.close"
             size="md"
             color="neutral"
             variant="ghost"
             :aria-label="t('banner.close')"
-            v-bind="(typeof close === 'object' ? close : {})"
+            v-bind="(typeof props.close === 'object' ? props.close : {})"
             data-slot="close"
-            :class="ui.close({ class: uiProp?.close })"
+            :class="ui.close({ class: props.ui?.close })"
             @click="onClose"
           />
         </slot>
diff --git a/src/runtime/components/BlogPost.vue b/src/runtime/components/BlogPost.vue
index 529c1c58c2..57268c340c 100644
--- a/src/runtime/components/BlogPost.vue
+++ b/src/runtime/components/BlogPost.vue
@@ -61,7 +61,7 @@ import { computed } from 'vue'
 import { Primitive, useDateFormatter } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import ImageComponent from '#build/ui-image-component'
 import { getSlotChildrenText } from '../utils'
 import { tv } from '../utils/tv'
@@ -73,17 +73,19 @@ import UUser from './User.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<BlogPostProps>(), {
+const _props = withDefaults(defineProps<BlogPostProps>(), {
   as: 'article',
   orientation: 'vertical'
 })
 const slots = defineSlots<BlogPostSlots>()
 
+const props = useComponentProps('blogPost', _props)
+
 const { locale } = useLocale()
 const appConfig = useAppConfig() as BlogPost['AppConfig']
-const uiProp = useComponentUI('blogPost', props)
 const formatter = useDateFormatter(locale.value.code)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.blogPost || {}) })({
   orientation: props.orientation,
   variant: props.variant,
@@ -91,6 +93,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.blogPost ||
   to: !!props.to || !!props.onClick
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const date = computed(() => {
   if (!props.date) {
     return
@@ -120,23 +123,23 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
-    <div v-if="image || !!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+    <div v-if="props.image || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :ui="ui">
         <component
           :is="ImageComponent"
-          v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+          v-bind="typeof props.image === 'string' ? { src: props.image, alt: props.title } : { alt: props.title, ...props.image }"
           data-slot="image"
-          :class="ui.image({ class: uiProp?.image, to: !!to })"
+          :class="ui.image({ class: props.ui?.image, to: !!props.to })"
         />
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <ULink
-        v-if="to"
+        v-if="props.to"
         :aria-label="ariaLabel"
-        v-bind="{ to, target, ...$attrs }"
+        v-bind="{ to: props.to, target: props.target, ...$attrs }"
         class="focus:outline-none peer"
         raw
       >
@@ -144,61 +147,61 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot name="body">
-        <div v-if="(date || !!slots.date) || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: uiProp?.meta })">
+        <div v-if="(date || !!slots.date) || (props.badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">
           <slot name="badge">
             <UBadge
-              v-if="badge"
+              v-if="props.badge"
               color="neutral"
               variant="subtle"
-              v-bind="typeof badge === 'string' ? { label: badge } : badge"
+              v-bind="typeof props.badge === 'string' ? { label: props.badge } : props.badge"
               data-slot="badge"
-              :class="ui.badge({ class: uiProp?.badge })"
+              :class="ui.badge({ class: props.ui?.badge })"
             />
           </slot>
 
-          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: uiProp?.date })">
+          <time v-if="date || !!slots.date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date })">
             <slot name="date">
               {{ date }}
             </slot>
           </time>
         </div>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
 
-        <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: uiProp?.authors })">
+        <div v-if="props.authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
           <slot name="authors" :ui="ui">
-            <template v-if="authors?.length">
-              <UAvatarGroup v-if="authors.length > 1">
+            <template v-if="props.authors?.length">
+              <UAvatarGroup v-if="props.authors.length > 1">
                 <ULink
-                  v-for="(author, index) in authors"
+                  v-for="(author, index) in props.authors"
                   :key="index"
                   :to="author.to"
                   :target="author.target"
                   data-slot="avatar"
-                  :class="ui.avatar({ class: uiProp?.avatar, to: !!author.to })"
+                  :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
                   raw
                 >
                   <UAvatar v-bind="author.avatar" />
                 </ULink>
               </UAvatarGroup>
-              <UUser v-else v-bind="authors[0]" />
+              <UUser v-else v-bind="props.authors[0]" />
             </template>
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/BlogPosts.vue b/src/runtime/components/BlogPosts.vue
index b246214c45..726a8787ec 100644
--- a/src/runtime/components/BlogPosts.vue
+++ b/src/runtime/components/BlogPosts.vue
@@ -43,30 +43,31 @@ import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import UBlogPost from './BlogPost.vue'
 
-const props = withDefaults(defineProps<BlogPostsProps>(), {
+const _props = withDefaults(defineProps<BlogPostsProps>(), {
   orientation: 'horizontal'
 })
 const slots = defineSlots<BlogPostsSlots<T>>()
 
+const props = useComponentProps<BlogPostsProps>('blogPosts', _props)
+
 const getProxySlots = () => omit(slots, ['default'])
 
 const appConfig = useAppConfig() as BlogPosts['AppConfig']
-const uiProp = useComponentUI('blogPosts', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.blogPosts || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui({ orientation: props.orientation, class: [props.ui?.base, props.class] })">
     <slot>
       <UBlogPost
-        v-for="(post, index) in posts"
+        v-for="(post, index) in props.posts"
         :key="index"
-        :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
+        :orientation="props.orientation === 'vertical' ? 'horizontal' : 'vertical'"
         v-bind="post"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index ba1dbb3cfa..a0ebe1ad04 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -62,7 +62,7 @@ export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
@@ -72,16 +72,18 @@ import UAvatar from './Avatar.vue'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
 
-const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+const _props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
   as: 'nav',
   labelKey: 'label'
 })
 const slots = defineSlots<BreadcrumbSlots<T>>()
 
+const props = useComponentProps<BreadcrumbProps<T>>('breadcrumb', _props)
+
 const { dir } = useLocale()
 const appConfig = useAppConfig() as Breadcrumb['AppConfig']
-const uiProp = useComponentUI('breadcrumb', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -89,33 +91,33 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ol data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <template v-for="(item, index) in items" :key="index">
-        <li data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item] })">
+  <Primitive :as="props.as" aria-label="breadcrumb" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ol data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in props.items" :key="index">
+        <li data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && (index === items!.length - 1) ? 'page' : undefined" data-slot="link" :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], active: item.active ?? (index === items!.length - 1), disabled: !!item.disabled, to: !!item.to })">
-              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" :ui="ui">
-                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" :ui="ui">
-                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? (index === items!.length - 1) })" />
-                  <UAvatar v-else-if="item.avatar" :size="((uiProp?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? (index === items!.length - 1) })" />
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="(item.active ?? active) && (index === props.items!.length - 1) ? 'page' : undefined" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? (index === props.items!.length - 1), disabled: !!item.disabled, to: !!item.to })">
+              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === props.items!.length - 1)" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === props.items!.length - 1)" :index="index" :ui="ui">
+                  <UIcon v-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? (index === props.items!.length - 1) })" />
+                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? (index === props.items!.length - 1) })" />
                 </slot>
 
-                <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })">
-                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DynamicSlots<T, 'label'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index">
+                <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DynamicSlots<T, 'label'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === props.items!.length - 1)" :index="index">
                     {{ get(item, props.labelKey as string) }}
                   </slot>
                 </span>
 
-                <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DynamicSlots<T, 'trailing'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === items!.length - 1)" :index="index" />
+                <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DynamicSlots<T, 'trailing'>)" :item="(item as Extract<T, { slot: string; }>)" :active="item.active ?? (index === props.items!.length - 1)" :index="index" />
               </slot>
             </ULinkBase>
           </ULink>
         </li>
 
-        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })">
+        <li v-if="index < props.items!.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
           <slot name="separator" :ui="ui">
-            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [uiProp?.separatorIcon, item.ui?.separatorIcon] })" />
+            <UIcon :name="separatorIcon" data-slot="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
           </slot>
         </li>
       </template>
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index c1aad4c31b..371c742926 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -45,9 +45,9 @@ export interface ButtonSlots {
 <script setup lang="ts">
 import { computed, ref, inject } from 'vue'
 import { defu } from 'defu'
-import { useForwardProps } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { formLoadingInjectionKey } from '../composables/useFormField'
@@ -59,12 +59,13 @@ import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 
-const props = defineProps<ButtonProps>()
+const _props = defineProps<ButtonProps>()
 const slots = defineSlots<ButtonSlots>()
 
+const props = useComponentProps('button', _props)
+
 const appConfig = useAppConfig() as Button['AppConfig']
-const uiProp = useComponentUI('button', props)
-const { orientation, size: buttonSize } = useFieldGroup<ButtonProps>(props)
+const { orientation, size: buttonSize } = useFieldGroup<ButtonProps>(_props)
 
 const linkProps = useForwardProps(pickLinkProps(props))
 
@@ -89,6 +90,7 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
   computed(() => ({ ...props, loading: isLoading.value }))
 )
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -106,7 +108,7 @@ const ui = computed(() => tv({
 })({
   color: props.color,
   variant: props.variant,
-  size: buttonSize.value,
+  size: buttonSize.value ?? props.size,
   loading: isLoading.value,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
@@ -119,8 +121,8 @@ const ui = computed(() => tv({
 <template>
   <ULink
     v-slot="{ active, ...slotProps }"
-    :type="type"
-    :disabled="disabled || isLoading"
+    :type="props.type"
+    :disabled="props.disabled || isLoading"
     v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     custom
   >
@@ -128,26 +130,26 @@ const ui = computed(() => tv({
       v-bind="slotProps"
       data-slot="base"
       :class="ui.base({
-        class: [uiProp?.base, props.class],
+        class: [props.ui?.base, props.class],
         active,
-        ...(active && activeVariant ? { variant: activeVariant } : {}),
-        ...(active && activeColor ? { color: activeColor } : {})
+        ...(active && props.activeVariant ? { variant: props.activeVariant } : {}),
+        ...(active && props.activeColor ? { color: props.activeColor } : {})
       })"
       @click="onClickWrapper"
     >
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon, active })" />
-        <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar, active })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
+        <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
 
       <slot :ui="ui">
-        <span v-if="label !== undefined && label !== null" data-slot="label" :class="ui.label({ class: uiProp?.label, active })">
-          {{ label }}
+        <span v-if="props.label !== undefined && props.label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label, active })">
+          {{ props.label }}
         </span>
       </slot>
 
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon, active })" />
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
       </slot>
     </ULinkBase>
   </ULink>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 19bc43fd84..7a8b9d62e2 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -114,34 +114,42 @@ export interface CalendarSlots {
 
 <script setup lang="ts" generic="R extends boolean, M extends boolean">
 import { computed } from 'vue'
-import { useForwardPropsEmits } from 'reka-ui'
+import { } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { Calendar as SingleCalendar, RangeCalendar } from 'reka-ui/namespaced'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+const _props = withDefaults(defineProps<CalendarProps<R, M>>(), {
   fixedWeeks: true,
   monthControls: true,
   yearControls: true
 })
 const emits = defineEmits<CalendarEmits<R, M>>()
+
 defineSlots<CalendarSlots>()
 
+const props = useComponentProps<CalendarProps<R, M>>('calendar', _props)
+
 const { dir, t, locale } = useLocale()
 const appConfig = useAppConfig() as Calendar['AppConfig']
-const uiProp = useComponentUI('calendar', props)
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
+const rootProps = useForwardProps(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
+// eslint-disable-next-line vue/no-dupe-keys
 const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+// eslint-disable-next-line vue/no-dupe-keys
 const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
+// eslint-disable-next-line vue/no-dupe-keys
 const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })({
   color: props.color,
   size: props.size,
@@ -164,19 +172,19 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
   <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="rootProps"
-    :model-value="(modelValue as DateValue | DateValue[])"
-    :default-value="(defaultValue as DateValue)"
+    :model-value="(props.modelValue as DateValue | DateValue[])"
+    :default-value="(props.defaultValue as DateValue)"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <Calendar.Header data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: uiProp?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -188,20 +196,20 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
         <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
-        :class="ui.grid({ class: uiProp?.grid })"
+        :class="ui.grid({ class: props.ui?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
-              :class="ui.headCell({ class: uiProp?.headCell })"
+              :class="ui.headCell({ class: props.ui?.headCell })"
             >
               <slot name="week-day" :day="day">
                 {{ day }}
@@ -209,18 +217,18 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: uiProp?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: props.ui?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
-            :class="ui.gridRow({ class: uiProp?.gridRow })"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
             <td
-              v-if="weekNumbers && weekDates[0]"
+              v-if="props.weekNumbers && weekDates[0]"
               role="gridcell"
               data-slot="cellWeek"
-              :class="ui.cellWeek({ class: uiProp?.cellWeek })"
+              :class="ui.cellWeek({ class: props.ui?.cellWeek })"
             >
               {{ getWeekNumber(weekDates[0], locale.code) }}
             </td>
@@ -229,13 +237,13 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
-              :class="ui.cell({ class: uiProp?.cell })"
+              :class="ui.cell({ class: props.ui?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
-                :class="ui.cellTrigger({ class: uiProp?.cellTrigger })"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}
diff --git a/src/runtime/components/Card.vue b/src/runtime/components/Card.vue
index 5260570861..a30227b1cf 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -35,43 +35,45 @@ export interface CardSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = defineProps<CardProps>()
+const _props = defineProps<CardProps>()
 const slots = defineSlots<CardSlots>()
 
+const props = useComponentProps('card', _props)
+
 const appConfig = useAppConfig() as Card['AppConfig']
-const uiProp = useComponentUI('card', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })({
   variant: props.variant
 }))
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 9b69ff569a..24b96b7d15 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -117,15 +117,16 @@ export interface CarouselEmits {
 <script setup lang="ts" generic="T extends CarouselItem">
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import useEmblaCarousel from 'embla-carousel-vue'
-import { Primitive, useForwardProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<CarouselProps<T>>(), {
+const _props = withDefaults(defineProps<CarouselProps<T>>(), {
   orientation: 'horizontal',
   arrows: false,
   dots: false,
@@ -154,16 +155,20 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
   fade: false,
   wheelGestures: false
 })
+
 defineSlots<CarouselSlots<T>>()
 const emits = defineEmits<CarouselEmits>()
 
+const props = useComponentProps<CarouselProps<T>>('carousel', _props)
+
 const { dir, t } = useLocale()
 const appConfig = useAppConfig() as Carousel['AppConfig']
-const uiProp = useComponentUI('carousel', props)
 
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft))
+// eslint-disable-next-line vue/no-dupe-keys
 const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight))
 
 const stopAutoplayOnInteraction = computed(() => {
@@ -171,7 +176,7 @@ const stopAutoplayOnInteraction = computed(() => {
     return true
   }
 
-  return props.autoplay.stopOnInteraction ?? true
+  return props.autoplay?.stopOnInteraction ?? true
 })
 
 const stopAutoScrollOnInteraction = computed(() => {
@@ -179,9 +184,10 @@ const stopAutoScrollOnInteraction = computed(() => {
     return true
   }
 
-  return props.autoScroll.stopOnInteraction ?? true
+  return props.autoScroll?.stopOnInteraction ?? true
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })({
   orientation: props.orientation
 }))
@@ -343,40 +349,40 @@ defineExpose({
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     role="region"
     aria-roledescription="carousel"
-    :data-orientation="orientation"
+    :data-orientation="props.orientation"
     tabindex="0"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"
   >
-    <div ref="emblaRef" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-      <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+    <div ref="emblaRef" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
         <div
-          v-for="(item, index) in items"
+          v-for="(item, index) in props.items"
           :key="index"
-          v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
+          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
           data-slot="item"
-          :class="ui.item({ class: [uiProp?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
+          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
         </div>
       </div>
     </div>
 
-    <div v-if="arrows || dots" data-slot="controls" :class="ui.controls({ class: uiProp?.controls })">
-      <div v-if="arrows" data-slot="arrows" :class="ui.arrows({ class: uiProp?.arrows })">
+    <div v-if="props.arrows || props.dots" data-slot="controls" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="props.arrows" data-slot="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
-          v-bind="typeof prev === 'object' ? prev : undefined"
+          v-bind="typeof props.prev === 'object' ? props.prev : undefined"
           data-slot="prev"
-          :class="ui.prev({ class: uiProp?.prev })"
+          :class="ui.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
         />
         <UButton
@@ -385,14 +391,14 @@ defineExpose({
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
-          v-bind="typeof next === 'object' ? next : undefined"
+          v-bind="typeof props.next === 'object' ? props.next : undefined"
           data-slot="next"
-          :class="ui.next({ class: uiProp?.next })"
+          :class="ui.next({ class: props.ui?.next })"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: uiProp?.dots })">
+      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" data-slot="dots" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
             type="button"
@@ -400,7 +406,7 @@ defineExpose({
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :aria-selected="selectedIndex === index"
             data-slot="dot"
-            :class="ui.dot({ class: uiProp?.dot, active: selectedIndex === index })"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : undefined"
             @click="scrollTo(index)"
           />
diff --git a/src/runtime/components/ChangelogVersion.vue b/src/runtime/components/ChangelogVersion.vue
index 0697828664..d167c92eb8 100644
--- a/src/runtime/components/ChangelogVersion.vue
+++ b/src/runtime/components/ChangelogVersion.vue
@@ -61,7 +61,7 @@ import { Primitive, useDateFormatter } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import ImageComponent from '#build/ui-image-component'
 import { getSlotChildrenText } from '../utils'
 import { tv } from '../utils/tv'
@@ -71,15 +71,16 @@ import UUser from './User.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ChangelogVersionProps>(), {
+const _props = withDefaults(defineProps<ChangelogVersionProps>(), {
   as: 'article',
   indicator: true
 })
 const slots = defineSlots<ChangelogVersionSlots>()
 
+const props = useComponentProps('changelogVersion', _props)
+
 const { locale } = useLocale()
 const appConfig = useAppConfig() as ChangelogVersion['AppConfig']
-const uiProp = useComponentUI('changelogVersion', props)
 const formatter = useDateFormatter(locale.value.code)
 
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate()
@@ -92,10 +93,12 @@ const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate<{ hidden?
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.changelogVersion || {}) })({
   to: !!props.to || !!props.onClick
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const date = computed(() => {
   if (!props.date) {
     return
@@ -127,9 +130,9 @@ const ariaLabel = computed(() => {
 <template>
   <DefineLinkTemplate>
     <ULink
-      v-if="to"
+      v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
+      v-bind="{ to: props.to, target: props.target, ...$attrs }"
       class="focus:outline-none peer"
       raw
     >
@@ -138,64 +141,64 @@ const ariaLabel = computed(() => {
   </DefineLinkTemplate>
 
   <DefineDateTemplate v-slot="{ hidden }">
-    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: uiProp?.date, hidden })">
+    <time v-if="date" :datetime="datetime" data-slot="date" :class="ui.date({ class: props.ui?.date, hidden })">
       <slot name="date">
         {{ date }}
       </slot>
     </time>
   </DefineDateTemplate>
 
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
-    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />
 
-        <div data-slot="dot" :class="ui.dot({ class: uiProp?.dot })">
-          <div data-slot="dotInner" :class="ui.dotInner({ class: uiProp?.dotInner })" />
+        <div data-slot="dot" :class="ui.dot({ class: props.ui?.dot })">
+          <div data-slot="dotInner" :class="ui.dotInner({ class: props.ui?.dotInner })" />
         </div>
       </slot>
     </div>
 
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (date || !!slots.date) || (props.badge || !!slots.badge) || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.image || !!slots.image)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
         <slot name="header">
-          <div v-if="(date || !!slots.date) || (badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: uiProp?.meta, badge: (!!badge || !!slots.badge) || !props.indicator })">
+          <div v-if="(date || !!slots.date) || (props.badge || !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta, badge: (!!props.badge || !!slots.badge) || !props.indicator })">
             <slot name="badge" :ui="ui">
               <UBadge
-                v-if="badge"
+                v-if="props.badge"
                 color="neutral"
                 variant="solid"
-                v-bind="typeof badge === 'string' ? { label: badge } : badge"
+                v-bind="typeof props.badge === 'string' ? { label: props.badge } : props.badge"
                 data-slot="badge"
-                :class="ui.badge({ class: uiProp?.badge })"
+                :class="ui.badge({ class: props.ui?.badge })"
               />
             </slot>
 
             <ReuseDateTemplate :hidden="!!props.indicator" />
           </div>
 
-          <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+          <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <ReuseLinkTemplate />
 
             <slot name="title">
-              {{ title }}
+              {{ props.title }}
             </slot>
           </h2>
 
-          <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+          <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
             <slot name="description">
-              {{ description }}
+              {{ props.description }}
             </slot>
           </div>
 
-          <div v-if="image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: uiProp?.imageWrapper })">
+          <div v-if="props.image || !!slots.image" data-slot="imageWrapper" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
             <slot name="image" :ui="ui">
               <component
                 :is="ImageComponent"
-                v-if="image"
-                v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+                v-if="props.image"
+                v-bind="typeof props.image === 'string' ? { src: props.image, alt: props.title } : { alt: props.title, ...props.image }"
                 data-slot="image"
-                :class="ui.image({ class: uiProp?.image, to: !!to })"
+                :class="ui.image({ class: props.ui?.image, to: !!props.to })"
               />
             </slot>
 
@@ -206,12 +209,12 @@ const ariaLabel = computed(() => {
 
       <slot name="body" />
 
-      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, body: !!slots.body })">
+      <div v-if="!!slots.footer || (props.authors?.length || !!slots.authors) || !!slots.actions" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
         <slot name="footer">
-          <div v-if="authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: uiProp?.authors })">
+          <div v-if="props.authors?.length || !!slots.authors" data-slot="authors" :class="ui.authors({ class: props.ui?.authors })">
             <slot name="authors">
               <UUser
-                v-for="(author, index) in authors"
+                v-for="(author, index) in props.authors"
                 :key="index"
                 v-bind="author"
               />
diff --git a/src/runtime/components/ChangelogVersions.vue b/src/runtime/components/ChangelogVersions.vue
index 25bc2edcde..60eec7a74d 100644
--- a/src/runtime/components/ChangelogVersions.vue
+++ b/src/runtime/components/ChangelogVersions.vue
@@ -54,21 +54,22 @@ import { Primitive } from 'reka-ui'
 import { Motion, useScroll, useSpring, useTransform } from 'motion-v'
 import { defu } from 'defu'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UChangelogVersion from './ChangelogVersion.vue'
 
-const props = withDefaults(defineProps<ChangelogVersionsProps<T>>(), {
+const _props = withDefaults(defineProps<ChangelogVersionsProps<T>>(), {
   indicator: true,
   indicatorMotion: true
 })
 const slots = defineSlots<ChangelogVersionsSlots<T>>()
 
+const props = useComponentProps<ChangelogVersionsProps<T>>('changelogVersions', _props)
+
 const getProxySlots = () => omit(slots, ['default', 'indicator'])
 
 const appConfig = useAppConfig() as ChangelogVersions['AppConfig']
-const uiProp = useComponentUI('changelogVersions', props)
 
 const springOptions = computed(() => defu(typeof props.indicatorMotion === 'object' ? props.indicatorMotion : {}, { damping: 30, restDelta: 0.001 }))
 const scrollOptions = computed(() => typeof props.indicator === 'object' ? props.indicator : {})
@@ -82,17 +83,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.changelogVer
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator">
-        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: uiProp?.beam })" :style="{ height }" />
+        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
       </slot>
     </div>
 
-    <div v-if="versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: uiProp?.container })">
+    <div v-if="props.versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <slot>
         <UChangelogVersion
-          v-for="(version, index) in versions"
+          v-for="(version, index) in props.versions"
           :key="index"
           :indicator="!!props.indicator"
           v-bind="(version as ChangelogVersionProps)"
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 39c82519e1..397d2d6596 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -60,7 +60,7 @@ export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIData
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
@@ -68,19 +68,21 @@ import UTooltip from './Tooltip.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<ChatMessageProps<TMetadata, TDataParts, TTools>>(), {
+const _props = withDefaults(defineProps<ChatMessageProps<TMetadata, TDataParts, TTools>>(), {
   as: 'article'
 })
 const slots = defineSlots<ChatMessageSlots<TMetadata, TDataParts, TTools>>()
 
+const props = useComponentProps<ChatMessageProps<TMetadata, TDataParts, TTools>>('chatMessage', _props)
+
 const appConfig = useAppConfig() as ChatMessage['AppConfig']
-const uiProp = useComponentUI('chatMessage', props)
 
 const fileParts = computed(() => props.parts?.filter((part): part is FileUIPart => part.type === 'file') ?? [])
 const textParts = computed(() => props.parts?.filter((part): part is TextUIPart => part.type === 'text') ?? [])
 
 const messageProps = computed(() => omit(props, ['as', 'icon', 'avatar', 'variant', 'side', 'actions', 'compact', 'class', 'ui', 'content']))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage || {}) })({
   variant: props.variant,
   side: props.side,
@@ -91,35 +93,35 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: uiProp?.files })">
+  <Primitive :as="props.as" :data-role="props.role" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: props.ui?.files })">
       <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
     </div>
 
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
-        <slot name="leading" v-bind="{ ...messageProps, avatar, ui }">
-          <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-          <UAvatar v-else-if="avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="props.icon || props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" v-bind="{ ...messageProps, avatar: props.avatar, ui }">
+          <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
       </div>
 
-      <div v-if="content || textParts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
-        <slot name="content" v-bind="{ ...messageProps, content }">
-          <template v-if="content">
-            {{ content }}
+      <div v-if="props.content || textParts.length || !!slots.content" data-slot="content" :class="ui.content({ class: props.ui?.content })">
+        <slot name="content" v-bind="{ ...messageProps, content: props.content }">
+          <template v-if="props.content">
+            {{ props.content }}
           </template>
           <template v-else>
-            <template v-for="(part, index) in textParts" :key="`${id}-${part.type}-${index}`">
+            <template v-for="(part, index) in textParts" :key="`${props.id}-${part.type}-${index}`">
               {{ part.text }}
             </template>
           </template>
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
-        <slot name="actions" v-bind="{ ...messageProps, actions }">
-          <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
+      <div v-if="props.actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+        <slot name="actions" v-bind="{ ...messageProps, actions: props.actions }">
+          <UTooltip v-for="(action, index) in props.actions" :key="index" :text="action.label">
             <UButton
               size="sm"
               color="neutral"
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index b1c7374f6d..b5c812195c 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -87,13 +87,13 @@ import { Presence } from 'reka-ui'
 import { defu } from 'defu'
 import { useElementBounding, useEventListener, useMutationObserver, watchThrottled } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UChatMessage from './ChatMessage.vue'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<ChatMessagesProps<T>>(), {
+const _props = withDefaults(defineProps<ChatMessagesProps<T>>(), {
   autoScroll: true,
   shouldAutoScroll: false,
   shouldScrollToBottom: true,
@@ -101,6 +101,8 @@ const props = withDefaults(defineProps<ChatMessagesProps<T>>(), {
 })
 const slots = defineSlots<ChatMessagesSlots<T>>()
 
+const props = useComponentProps<ChatMessagesProps<T>>('chatMessages', _props)
+
 const getProxySlots = () => omit(slots, ['default', 'indicator', 'viewport'])
 
 const showIndicator = computed(() => {
@@ -112,11 +114,11 @@ const showIndicator = computed(() => {
 })
 
 const appConfig = useAppConfig() as ChatMessages['AppConfig']
-const uiProp = useComponentUI('chatMessages', props)
 
 const userProps = toRef(() => defu(props.user, { side: 'right' as const, variant: 'soft' as const }))
 const assistantProps = toRef(() => defu(props.assistant, { side: 'left' as const, variant: 'naked' as const }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessages || {}) })({
   compact: props.compact
 }))
@@ -311,18 +313,18 @@ onMounted(() => {
 <template>
   <div
     ref="el"
-    :data-status="status"
+    :data-status="props.status"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
-      <template v-for="message in messages" :key="message.id">
+      <template v-for="message in props.messages" :key="message.id">
         <UChatMessage
           v-if="message.parts?.length"
           v-bind="{ ...(message.role === 'user' ? userProps : assistantProps), ...message }"
           :ref="el => registerMessageRef(message.id, el as ComponentPublicInstance)"
-          :compact="compact"
+          :compact="props.compact"
         >
           <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
             <slot :name="name" v-bind="{ ...(slotData as any), message }" />
@@ -336,11 +338,11 @@ onMounted(() => {
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: undefined, parts: [] }"
-      :compact="compact"
+      :compact="props.compact"
     >
       <template #content>
         <slot name="indicator" :ui="ui">
-          <div data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
+          <div data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
             <span />
@@ -350,16 +352,16 @@ onMounted(() => {
     </UChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
         <slot name="viewport" :ui="ui" :on-click="onAutoScrollClick">
           <UButton
-            v-if="autoScroll"
-            :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
+            v-if="props.autoScroll"
+            :icon="props.autoScrollIcon || appConfig.ui.icons.arrowDown"
             color="neutral"
             variant="outline"
-            v-bind="(typeof autoScroll === 'object' ? autoScroll : {})"
+            v-bind="(typeof props.autoScroll === 'object' ? props.autoScroll : {})"
             data-slot="autoScroll"
-            :class="ui.autoScroll({ class: uiProp?.autoScroll })"
+            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
             @click="onAutoScrollClick"
           />
         </slot>
diff --git a/src/runtime/components/ChatPalette.vue b/src/runtime/components/ChatPalette.vue
index 1118bd2d9d..36a7a6d262 100644
--- a/src/runtime/components/ChatPalette.vue
+++ b/src/runtime/components/ChatPalette.vue
@@ -26,28 +26,29 @@ export interface ChatPaletteSlots {
 import { computed } from 'vue'
 import { Primitive, Slot } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = defineProps<ChatPaletteProps>()
+const _props = defineProps<ChatPaletteProps>()
 const slots = defineSlots<ChatPaletteSlots>()
 
+const props = useComponentProps('chatPalette', _props)
+
 const appConfig = useAppConfig() as ChatPalette['AppConfig']
-const uiProp = useComponentUI('chatPalette', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatPalette || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="content" :class="ui.content({ class: uiProp?.content })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: uiProp?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: props.ui?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>
diff --git a/src/runtime/components/ChatPrompt.vue b/src/runtime/components/ChatPrompt.vue
index b0960b7a5a..5135044854 100644
--- a/src/runtime/components/ChatPrompt.vue
+++ b/src/runtime/components/ChatPrompt.vue
@@ -40,10 +40,11 @@ export interface ChatPromptSlots extends TextareaSlots {
 
 <script setup lang="ts">
 import { computed, toRef, useTemplateRef } from 'vue'
-import { Primitive, useForwardProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useIMEGuard } from '../composables/useIMEGuard'
 import { useLocale } from '../composables/useLocale'
 import { omit, transformUI } from '../utils'
@@ -52,7 +53,7 @@ import UTextarea from './Textarea.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ChatPromptProps>(), {
+const _props = withDefaults(defineProps<ChatPromptProps>(), {
   as: 'form',
   autofocus: true,
   autoresize: true,
@@ -61,16 +62,18 @@ const props = withDefaults(defineProps<ChatPromptProps>(), {
 const emits = defineEmits<ChatPromptEmits>()
 const slots = defineSlots<ChatPromptSlots>()
 
+const props = useComponentProps('chatPrompt', _props)
+
 const model = defineModel<string>({ default: '' })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as ChatPrompt['AppConfig']
-const uiProp = useComponentUI('chatPrompt', props)
 
 const textareaProps = useForwardProps(reactivePick(props, 'rows', 'autofocus', 'autofocusDelay', 'autoresize', 'autoresizeDelay', 'maxrows', 'icon', 'avatar', 'loading', 'loadingIcon'))
 
 const getProxySlots = () => omit(slots, ['header', 'footer'])
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatPrompt || {}) })({
   variant: props.variant
 }))
@@ -101,22 +104,22 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
     <UTextarea
       ref="textareaRef"
       v-model="model"
-      :placeholder="placeholder || t('chatPrompt.placeholder')"
-      :disabled="Boolean(error) || disabled"
+      :placeholder="props.placeholder ?? t('chatPrompt.placeholder')"
+      :disabled="Boolean(props.error) || props.disabled"
       variant="none"
       fixed
       v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), uiProp)"
+      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
       data-slot="body"
-      :class="ui.body({ class: uiProp?.body })"
+      :class="ui.body({ class: props.ui?.body })"
       @keydown.enter.exact="onEnter"
       @compositionend="onCompositionEnd"
       @keydown.esc="blur"
@@ -126,7 +129,7 @@ defineExpose({
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/ChatPromptSubmit.vue b/src/runtime/components/ChatPromptSubmit.vue
index f2060cb7f2..083873bc8b 100644
--- a/src/runtime/components/ChatPromptSubmit.vue
+++ b/src/runtime/components/ChatPromptSubmit.vue
@@ -85,10 +85,10 @@ export interface ChatPromptSubmitEmits {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useLocale } from '../composables/useLocale'
 import { transformUI } from '../utils'
 import { tv } from '../utils/tv'
@@ -96,7 +96,7 @@ import UButton from './Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ChatPromptSubmitProps>(), {
+const _props = withDefaults(defineProps<ChatPromptSubmitProps>(), {
   status: 'ready',
   streamingColor: 'neutral',
   streamingVariant: 'subtle',
@@ -108,9 +108,10 @@ const props = withDefaults(defineProps<ChatPromptSubmitProps>(), {
 const emits = defineEmits<ChatPromptSubmitEmits>()
 const slots = defineSlots<ButtonSlots>()
 
+const props = useComponentProps('chatPromptSubmit', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as ChatPromptSubmit['AppConfig']
-const uiProp = useComponentUI('chatPromptSubmit', props)
 
 const buttonProps = useForwardProps(reactiveOmit(props, 'icon', 'color', 'variant', 'status', 'disabled', 'streamingIcon', 'streamingColor', 'streamingVariant', 'submittedIcon', 'submittedColor', 'submittedVariant', 'errorIcon', 'errorColor', 'errorVariant', 'class', 'ui'))
 
@@ -162,8 +163,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatPromptSu
       'aria-label': t('chatPromptSubmit.label'),
       ...$attrs
     }"
-    :class="ui.base({ class: [uiProp?.base, props.class] })"
-    :ui="transformUI(ui, uiProp)"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    :ui="transformUI(ui, props.ui)"
   >
     <template v-for="(_, name) in slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
diff --git a/src/runtime/components/ChatReasoning.vue b/src/runtime/components/ChatReasoning.vue
index 4652474597..ea38e901c8 100644
--- a/src/runtime/components/ChatReasoning.vue
+++ b/src/runtime/components/ChatReasoning.vue
@@ -67,14 +67,14 @@ export interface ChatReasoningSlots {
 import { ref, computed, watch, onUnmounted, nextTick, useTemplateRef } from 'vue'
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { useScrollShadow } from '../composables/useScrollShadow'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UChatShimmer from './ChatShimmer.vue'
 
-const props = withDefaults(defineProps<ChatReasoningProps>(), {
+const _props = withDefaults(defineProps<ChatReasoningProps>(), {
   open: undefined,
   streaming: false,
   chevron: 'trailing',
@@ -82,12 +82,15 @@ const props = withDefaults(defineProps<ChatReasoningProps>(), {
   autoCloseDelay: 500
 })
 const emits = defineEmits<ChatReasoningEmits>()
+
 defineSlots<ChatReasoningSlots>()
 
+const props = useComponentProps('chatReasoning', _props)
+
 const { t, code } = useLocale()
 const appConfig = useAppConfig() as ChatReasoning['AppConfig']
-const uiProp = useComponentUI('chatReasoning', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatReasoning || {}) })({
   chevron: props.chevron
 }))
@@ -182,49 +185,49 @@ watch(() => props.text, () => {
     v-if="hasContent"
     v-slot="{ open: isOpen }"
     :open="resolvedOpen"
-    :disabled="disabled"
-    :unmount-on-hide="unmountOnHide"
+    :disabled="props.disabled"
+    :unmount-on-hide="props.unmountOnHide"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:open="setOpen"
   >
     <CollapsibleTrigger as-child :disabled="!hasContent">
       <button
         type="button"
         data-slot="trigger"
-        :class="ui.trigger({ class: uiProp?.trigger })"
+        :class="ui.trigger({ class: props.ui?.trigger })"
       >
-        <span v-if="icon || (hasContent && chevron === 'leading')" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <span v-if="props.icon || (hasContent && props.chevron === 'leading')" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <UIcon
-            v-if="icon"
-            :name="icon"
+            v-if="props.icon"
+            :name="props.icon"
             data-slot="leadingIcon"
-            :class="ui.leadingIcon({ class: uiProp?.leadingIcon, alone: !(hasContent && chevron === 'leading') })"
+            :class="ui.leadingIcon({ class: props.ui?.leadingIcon, alone: !(hasContent && props.chevron === 'leading') })"
           />
           <UIcon
-            v-if="hasContent && chevron === 'leading'"
+            v-if="hasContent && props.chevron === 'leading'"
             :name="chevronIconName"
             data-slot="chevronIcon"
-            :class="ui.chevronIcon({ class: uiProp?.chevronIcon, alone: !icon })"
+            :class="ui.chevronIcon({ class: props.ui?.chevronIcon, alone: !props.icon })"
           />
         </span>
 
-        <UChatShimmer v-if="streaming" :text="thinkingText" v-bind="props.shimmer" data-slot="label" :class="ui.label({ class: uiProp?.label })" />
-        <span v-else data-slot="label" :class="ui.label({ class: uiProp?.label })">{{ thinkingText }}</span>
+        <UChatShimmer v-if="props.streaming" :text="thinkingText" v-bind="props.shimmer" data-slot="label" :class="ui.label({ class: props.ui?.label })" />
+        <span v-else data-slot="label" :class="ui.label({ class: props.ui?.label })">{{ thinkingText }}</span>
 
         <UIcon
-          v-if="hasContent && chevron === 'trailing'"
+          v-if="hasContent && props.chevron === 'trailing'"
           :name="chevronIconName"
           data-slot="trailingIcon"
-          :class="ui.trailingIcon({ class: uiProp?.trailingIcon })"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         />
       </button>
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div ref="bodyRef" data-slot="body" :class="ui.body({ class: uiProp?.body })" :style="scrollShadowStyle">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div ref="bodyRef" data-slot="body" :class="ui.body({ class: props.ui?.body })" :style="scrollShadowStyle">
         <slot :open="isOpen">
-          {{ text }}
+          {{ props.text }}
         </slot>
       </div>
     </CollapsibleContent>
diff --git a/src/runtime/components/ChatShimmer.vue b/src/runtime/components/ChatShimmer.vue
index 1eb2057c9f..39eef6e100 100644
--- a/src/runtime/components/ChatShimmer.vue
+++ b/src/runtime/components/ChatShimmer.vue
@@ -34,34 +34,36 @@ export interface ChatShimmerProps {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<ChatShimmerProps>(), {
+const _props = withDefaults(defineProps<ChatShimmerProps>(), {
   as: 'span',
   duration: 2,
   spread: 2
 })
 
+const props = useComponentProps('chatShimmer', _props)
+
 const appConfig = useAppConfig() as ChatShimmer['AppConfig']
-const uiProp = useComponentUI('chatShimmer', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatShimmer || {}) }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const spread = computed(() => props.text.length * props.spread)
 </script>
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     :style="{
       '--spread': `${spread}px`,
-      '--duration': `${duration}s`
+      '--duration': `${props.duration}s`
     }"
     data-slot="base"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [(props.ui as { base?: any } | undefined)?.base, props.class] })"
   >
-    {{ text }}
+    {{ props.text }}
   </Primitive>
 </template>
diff --git a/src/runtime/components/ChatTool.vue b/src/runtime/components/ChatTool.vue
index 5a384a273c..da590c1c5d 100644
--- a/src/runtime/components/ChatTool.vue
+++ b/src/runtime/components/ChatTool.vue
@@ -76,12 +76,12 @@ export interface ChatToolSlots {
 import { ref, computed } from 'vue'
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UChatShimmer from './ChatShimmer.vue'
 
-const props = withDefaults(defineProps<ChatToolProps>(), {
+const _props = withDefaults(defineProps<ChatToolProps>(), {
   open: undefined,
   loading: false,
   streaming: false,
@@ -92,9 +92,11 @@ const props = withDefaults(defineProps<ChatToolProps>(), {
 const emits = defineEmits<ChatToolEmits>()
 const slots = defineSlots<ChatToolSlots>()
 
+const props = useComponentProps('chatTool', _props)
+
 const appConfig = useAppConfig() as ChatTool['AppConfig']
-const uiProp = useComponentUI('chatTool', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatTool || {}) })({
   variant: props.variant,
   chevron: props.chevron,
@@ -121,50 +123,50 @@ const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.
   <CollapsibleRoot
     v-slot="{ open: isOpen }"
     :open="resolvedOpen"
-    :disabled="disabled"
-    :unmount-on-hide="unmountOnHide"
+    :disabled="props.disabled"
+    :unmount-on-hide="props.unmountOnHide"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:open="setOpen"
   >
     <CollapsibleTrigger as-child :disabled="!hasContent">
       <button
         type="button"
         data-slot="trigger"
-        :class="ui.trigger({ class: uiProp?.trigger })"
+        :class="ui.trigger({ class: props.ui?.trigger })"
       >
-        <span v-if="resolvedIcon || (hasContent && chevron === 'leading')" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <span v-if="resolvedIcon || (hasContent && props.chevron === 'leading')" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <UIcon
             v-if="resolvedIcon"
             :name="resolvedIcon"
             data-slot="leadingIcon"
-            :class="ui.leadingIcon({ class: uiProp?.leadingIcon, alone: !(hasContent && chevron === 'leading') })"
+            :class="ui.leadingIcon({ class: props.ui?.leadingIcon, alone: !(hasContent && props.chevron === 'leading') })"
           />
           <UIcon
-            v-if="hasContent && chevron === 'leading'"
+            v-if="hasContent && props.chevron === 'leading'"
             :name="chevronIconName"
             data-slot="chevronIcon"
-            :class="ui.chevronIcon({ class: uiProp?.chevronIcon, alone: !resolvedIcon })"
+            :class="ui.chevronIcon({ class: props.ui?.chevronIcon, alone: !resolvedIcon })"
           />
         </span>
 
-        <span data-slot="label" :class="ui.label({ class: uiProp?.label })">
-          <UChatShimmer v-if="streaming && text" :text="text" v-bind="props.shimmer" />
-          <template v-else>{{ text }}</template>
-          <span v-if="suffix" data-slot="suffix" :class="ui.suffix({ class: uiProp?.suffix })">{{ suffix }}</span>
+        <span data-slot="label" :class="ui.label({ class: props.ui?.label })">
+          <UChatShimmer v-if="props.streaming && props.text" :text="props.text" v-bind="props.shimmer" />
+          <template v-else>{{ props.text }}</template>
+          <span v-if="props.suffix" data-slot="suffix" :class="ui.suffix({ class: props.ui?.suffix })">{{ props.suffix }}</span>
         </span>
 
         <UIcon
-          v-if="hasContent && chevron === 'trailing'"
+          v-if="hasContent && props.chevron === 'trailing'"
           :name="chevronIconName"
           data-slot="trailingIcon"
-          :class="ui.trailingIcon({ class: uiProp?.trailingIcon })"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         />
       </button>
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot :open="isOpen" />
       </div>
     </CollapsibleContent>
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 684c097714..851418cc7b 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -62,31 +62,30 @@ export interface CheckboxSlots {
 
 <script setup lang="ts" generic="T = boolean">
 import { computed, useAttrs, useId } from 'vue'
-import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits } from 'reka-ui'
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
-import { useResolvedVariants } from '../composables/useResolvedVariants'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<CheckboxProps<T>>()
+const _props = defineProps<CheckboxProps<T>>()
 const slots = defineSlots<CheckboxSlots>()
 const emits = defineEmits<CheckboxEmits<T>>()
 
+const props = useComponentProps<CheckboxProps<T>>('checkbox', _props)
+
 const appConfig = useAppConfig() as Checkbox['AppConfig']
-const uiProp = useComponentUI('checkbox', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'required', 'value', 'defaultValue', 'modelValue', 'trueValue', 'falseValue'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue', 'modelValue', 'trueValue', 'falseValue'), emits)
 
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps<T>>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps<T>>(_props)
 const id = _id.value ?? useId()
 
-const { variant } = useResolvedVariants('checkbox', props, theme, ['variant'])
-
 const attrs = useAttrs()
 // Omit `data-state` to prevent conflicts with parent components (e.g. TooltipTrigger)
 const forwardedAttrs = computed(() => {
@@ -94,10 +93,11 @@ const forwardedAttrs = computed(() => {
   return rest
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })({
-  size: size.value,
-  color: color.value,
-  variant: variant.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
+  variant: props.variant,
   indicator: props.indicator,
   required: props.required,
   disabled: disabled.value
@@ -114,35 +114,35 @@ function onUpdate(value: any) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+  <Primitive :as="(!props.variant || props.variant === 'list') ? props.as : Label" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         :name="name"
         :disabled="disabled"
         data-slot="base"
-        :class="ui.base({ class: uiProp?.base })"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ state }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
-            <UIcon v-if="state === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-            <UIcon v-else :name="icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+            <UIcon v-if="state === 'indeterminate'" :name="props.indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UIcon v-else :name="props.icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="(label || !!slots.label) || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-        <slot name="label" :label="label">
-          {{ label }}
+    <div v-if="(props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">
+          {{ props.label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
+      <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
         </slot>
       </p>
     </div>
diff --git a/src/runtime/components/CheckboxGroup.vue b/src/runtime/components/CheckboxGroup.vue
index abd9c2c36c..b084c09df2 100644
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -80,16 +80,17 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
 
 <script setup lang="ts" generic="T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'">
 import { computed, useId } from 'vue'
-import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from 'reka-ui'
+import { CheckboxGroupRoot } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFormField } from '../composables/useFormField'
 import { get, omit } from '../utils'
 import { tv } from '../utils/tv'
 import UCheckbox from './Checkbox.vue'
 
-const props = withDefaults(defineProps<CheckboxGroupProps<T, VK>>(), {
+const _props = withDefaults(defineProps<CheckboxGroupProps<T, VK>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   valueKey: 'value' as never,
@@ -98,21 +99,23 @@ const props = withDefaults(defineProps<CheckboxGroupProps<T, VK>>(), {
 const emits = defineEmits<CheckboxGroupEmits<T, VK>>()
 const slots = defineSlots<CheckboxGroupSlots<T>>()
 
+const props = useComponentProps<CheckboxGroupProps<T, VK>>('checkboxGroup', _props)
+
 const appConfig = useAppConfig() as CheckboxGroup['AppConfig']
-const uiProp = useComponentUI('checkboxGroup', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator', 'icon'))
 const getProxySlots = () => omit(slots, ['legend'])
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(props, { bind: false })
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(_props, { bind: false })
 const id = _id.value ?? useId()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
-  size: size.value,
+  size: size.value ?? props.size,
   required: props.required,
   orientation: props.orientation,
-  color: props.color,
+  color: color.value ?? props.color,
   variant: props.variant,
   disabled: disabled.value
 }))
@@ -167,17 +170,17 @@ function onUpdate(value: any) {
 <template>
   <CheckboxGroupRoot
     :id="id"
-    v-bind="rootProps"
+    v-bind="(rootProps as any)"
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: uiProp?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="props.legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
-          {{ legend }}
+          {{ props.legend }}
         </slot>
       </legend>
 
@@ -189,9 +192,9 @@ function onUpdate(value: any) {
         :size="size"
         :name="name"
         :disabled="item.disabled || disabled"
-        :ui="{ ...(uiProp ? omit(uiProp, ['root']) : undefined), ...(item.ui || {}) }"
+        :ui="{ ...(props.ui ? omit(props.ui, ['root']) : undefined), ...(item.ui || {}) }"
         data-slot="item"
-        :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="(name as keyof CheckboxGroupSlots<T>)" :item="item" />
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index ee0da356cf..e2da30b7f7 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -49,27 +49,30 @@ export interface ChipSlots {
 import { computed } from 'vue'
 import { Primitive, Slot } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import { tv } from '../utils/tv'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ChipProps>(), {
+const _props = withDefaults(defineProps<ChipProps>(), {
   inset: false,
   standalone: false
 })
+
 defineSlots<ChipSlots>()
 
+const props = useComponentProps('chip', _props)
+
 const show = defineModel<boolean>('show', { default: true })
 
-const { size } = useAvatarGroup(props)
+const { size } = useAvatarGroup(_props)
 const appConfig = useAppConfig() as Chip['AppConfig']
-const uiProp = useComponentUI('chip', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })({
   color: props.color,
-  size: size.value,
+  size: size.value ?? props.size,
   position: props.position,
   inset: props.inset,
   standalone: props.standalone
@@ -77,14 +80,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
 
-    <span v-if="show" data-slot="base" :class="ui.base({ class: uiProp?.base })">
+    <span v-if="show" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <slot name="content">
-        {{ text }}
+        {{ props.text }}
       </slot>
     </span>
   </Primitive>
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index 0525b50f88..dce26e8ec0 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -27,34 +27,36 @@ export interface CollapsibleSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<CollapsibleProps>(), {
+const _props = withDefaults(defineProps<CollapsibleProps>(), {
   unmountOnHide: true
 })
 const emits = defineEmits<CollapsibleEmits>()
 const slots = defineSlots<CollapsibleSlots>()
 
+const props = useComponentProps('collapsible', _props)
+
 const appConfig = useAppConfig() as Collapsible['AppConfig']
-const uiProp = useComponentUI('collapsible', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })())
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>
diff --git a/src/runtime/components/ColorPicker.vue b/src/runtime/components/ColorPicker.vue
index 47021daca4..cb35c27f0a 100644
--- a/src/runtime/components/ColorPicker.vue
+++ b/src/runtime/components/ColorPicker.vue
@@ -43,6 +43,7 @@ export type ColorPickerProps = {
   as?: any
   /**
    * Throttle time in ms for the color picker
+   * @defaultValue 50
    */
   throttle?: number
   /**
@@ -51,6 +52,7 @@ export type ColorPickerProps = {
   disabled?: boolean
   /**
    * The default value of the color picker
+   * @defaultValue '#FFFFFF'
    */
   defaultValue?: string
   /**
@@ -75,20 +77,22 @@ import { useEventListener, useElementBounding, watchThrottled, watchPausable } f
 import { isClient } from '@vueuse/shared'
 import { ColorTranslator } from 'colortranslator'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<ColorPickerProps>(), {
+const _props = withDefaults(defineProps<ColorPickerProps>(), {
   format: 'hex',
   throttle: 50,
   defaultValue: '#FFFFFF'
 })
 
+const props = useComponentProps('colorPicker', _props)
+
 const modelValue = defineModel<string>(undefined)
 
 const appConfig = useAppConfig() as ColorPicker['AppConfig']
-const uiProp = useComponentUI('colorPicker', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.colorPicker || {}) })({
   size: props.size
 }))
@@ -207,6 +211,7 @@ const selectorThumbRef = ref<HTMLDivElement | null>(null)
 const trackRef = ref<HTMLDivElement | null>(null)
 const trackThumbRef = ref<HTMLDivElement | null>(null)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const disabled = computed(() => props.disabled)
 
 const { position: selectorThumbPosition } = useColorDraggable(selectorThumbRef, selectorRef, 'both', {
@@ -265,19 +270,19 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" :data-disabled="disabled ? true : undefined">
-    <div data-slot="picker" :class="ui.picker({ class: uiProp?.picker })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : undefined">
+    <div data-slot="picker" :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"
         data-slot="selector"
-        :class="ui.selector({ class: uiProp?.selector })"
+        :class="ui.selector({ class: props.ui?.selector })"
         :style="selectorStyle"
       >
-        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: uiProp?.selectorBackground })" data-color-picker-background>
+        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
           <div
             ref="selectorThumbRef"
             data-slot="selectorThumb"
-            :class="ui.selectorThumb({ class: uiProp?.selectorThumb })"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
             :style="selectorThumbStyle"
             :data-disabled="disabled ? true : undefined"
           />
@@ -286,13 +291,13 @@ const trackThumbStyle = computed(() => ({
       <div
         ref="trackRef"
         data-slot="track"
-        :class="ui.track({ class: uiProp?.track })"
+        :class="ui.track({ class: props.ui?.track })"
         data-color-picker-track
       >
         <div
           ref="trackThumbRef"
           data-slot="trackThumb"
-          :class="ui.trackThumb({ class: uiProp?.trackThumb })"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
           :style="trackThumbStyle"
           :data-disabled="disabled ? true : undefined"
         />
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 8af30c4a85..bb8dba2a5a 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -224,12 +224,13 @@ export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteIte
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
 import { computed, ref, useTemplateRef, toRef } from 'vue'
-import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate, refDebounced, refThrottled } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { omit, get } from '../utils'
 import { highlight } from '../utils/fuse'
@@ -247,7 +248,7 @@ import UKbd from './Kbd.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
+const _props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   input: true,
@@ -261,13 +262,14 @@ const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
 const emits = defineEmits<CommandPaletteEmits<T>>()
 const slots = defineSlots<CommandPaletteSlots<T, G>>()
 
+const props = useComponentProps<CommandPaletteProps<G, T>>('commandPalette', _props)
+
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as CommandPalette['AppConfig']
-const uiProp = useComponentUI('commandPalette', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover', 'by'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover', 'by'), emits)
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false
 
@@ -293,11 +295,13 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: C
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.commandPalette || {}) })({
   size: props.size,
   virtualize: !!props.virtualize
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     ignoreLocation: true,
@@ -310,8 +314,10 @@ const fuse = computed(() => defu({}, props.fuse, {
 
 const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
 
+// eslint-disable-next-line vue/no-dupe-keys
 const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
 
 const items = computed(() => groups.value?.filter((group) => {
@@ -328,7 +334,7 @@ const items = computed(() => groups.value?.filter((group) => {
 // Opt-in debounce for the value piped into Fuse. Default `0` short-circuits inside `refDebounced`
 // so generic uses (menus, pickers) stay effectively instant, while large consumers (e.g. ContentSearch)
 // can opt in to avoid running fuzzy search on every keystroke.
-const fuseSearchTerm = refDebounced(searchTerm, () => props.searchDelay)
+const fuseSearchTerm = refDebounced(searchTerm, () => props.searchDelay!)
 
 const { results: fuseResults } = useFuse<typeof items.value[number]>(fuseSearchTerm, items, fuse)
 
@@ -346,8 +352,8 @@ function processGroupItems(group: G, items: (T & { matches?: FuseResult<T>['matc
     items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
-        labelHtml: highlight<T>(item, fuseSearchTerm.value, props.labelKey),
-        suffixHtml: highlight<T>(item, fuseSearchTerm.value, undefined, [props.labelKey])
+        labelHtml: highlight<T>(item, fuseSearchTerm.value, props.labelKey!),
+        suffixHtml: highlight<T>(item, fuseSearchTerm.value, undefined, [props.labelKey!])
       }
     })
   }
@@ -480,61 +486,61 @@ function onSelect(e: Event, item: T) {
         as-child
         @select="onSelect($event, item as T)"
       >
-        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], active: active || item.active })">
+        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
           <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<T>)" :item="(item as any)" :index="index" :ui="ui">
             <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<T>)" :item="(item as any)" :index="index" :ui="ui">
-              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-              <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+              <UIcon v-if="item.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+              <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
               <UChip
                 v-else-if="item.chip"
-                :size="((item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
                 inset
                 standalone
                 v-bind="item.chip"
                 data-slot="itemLeadingChip"
-                :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+                :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
               />
             </slot>
 
-            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T>])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
-              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+            <span v-if="(item.prefix || (item.labelHtml || get(item, props.labelKey as string)) || (item.suffixHtml || item.suffix) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T>]) || (get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T>])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
                 <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<T>)" :item="(item as any)" :index="index" :ui="ui">
-                  <span v-if="item.prefix" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [uiProp?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+                  <span v-if="item.prefix" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
-                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
-                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey as string) }}</span>
+                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
+                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey as string) }}</span>
 
-                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [uiProp?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
-                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [uiProp?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
+                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
+                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
                 </slot>
               </span>
 
-              <span v-if="get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T>]" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+              <span v-if="get(item, props.descriptionKey as string) || !!slots[(item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T>]" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
                 <slot :name="((item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`) as keyof CommandPaletteSlots<T>)" :item="(item as any)" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey as string) }}
                 </slot>
               </span>
             </span>
 
-            <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+            <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
               <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<T>)" :item="(item as any)" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
-                  :name="childrenIcon || appConfig.ui.icons.chevronRight"
+                  :name="props.childrenIcon || appConfig.ui.icons.chevronRight"
                   data-slot="itemTrailingIcon"
-                  :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                  :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                 />
 
-                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiProp?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-                  <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || uiProp?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                  <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                 </span>
 
-                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" data-slot="itemTrailingHighlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [uiProp?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" data-slot="itemTrailingHighlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
               </slot>
 
               <ListboxItemIndicator v-if="!item.children?.length" as-child>
-                <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
               </ListboxItemIndicator>
             </span>
           </slot>
@@ -543,50 +549,50 @@ function onSelect(e: Event, item: T) {
     </ULink>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ListboxFilter v-if="input" v-model="searchTerm" as-child>
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="props.selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ListboxFilter v-if="props.input" v-model="searchTerm" as-child>
       <UInput
         variant="none"
-        :size="size"
+        :size="props.size"
         v-bind="typeof props.input === 'object' ? props.input : {}"
         :placeholder="placeholder"
-        :autofocus="autofocus"
-        :loading="loading"
-        :loading-icon="loadingIcon"
-        :trailing-icon="trailingIcon"
-        :icon="icon || appConfig.ui.icons.search"
+        :autofocus="props.autofocus"
+        :loading="props.loading"
+        :loading-icon="props.loadingIcon"
+        :trailing-icon="props.trailingIcon"
+        :icon="props.icon || appConfig.ui.icons.search"
         data-slot="input"
-        :class="ui.input({ class: uiProp?.input })"
+        :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"
       >
-        <template v-if="history?.length && (back || !!slots.back)" #leading>
+        <template v-if="history?.length && (props.back || !!slots.back)" #leading>
           <slot name="back" :ui="ui">
             <UButton
-              :size="size"
-              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              :size="props.size"
+              :icon="props.backIcon || appConfig.ui.icons.arrowLeft"
               color="neutral"
               variant="link"
               :aria-label="t('commandPalette.back')"
-              v-bind="(typeof back === 'object' ? back : {})"
+              v-bind="(typeof props.back === 'object' ? props.back : {})"
               data-slot="back"
-              :class="ui.back({ class: uiProp?.back })"
+              :class="ui.back({ class: props.ui?.back })"
               @click="navigateBack"
             />
           </slot>
         </template>
 
-        <template v-if="close || !!slots.close" #trailing>
+        <template v-if="props.close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
-              v-if="close"
-              :size="size"
-              :icon="closeIcon || appConfig.ui.icons.close"
+              v-if="props.close"
+              :size="props.size"
+              :icon="props.closeIcon || appConfig.ui.icons.close"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
-              v-bind="(typeof close === 'object' ? close : {})"
+              v-bind="(typeof props.close === 'object' ? props.close : {})"
               data-slot="close"
-              :class="ui.close({ class: uiProp?.close })"
+              :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
             />
           </slot>
@@ -594,10 +600,10 @@ function onSelect(e: Event, item: T) {
       </UInput>
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
         <ListboxVirtualizer
-          v-if="!!virtualize"
+          v-if="!!props.virtualize"
           v-slot="{ option: item, virtualItem }"
           :options="(filteredItems as any[])"
           :text-content="item => get(item, props.labelKey as string)"
@@ -607,8 +613,8 @@ function onSelect(e: Event, item: T) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey as string) || !!slots[(group.slot ? `${group.slot}-group-label` : 'group-label') as keyof CommandPaletteSlots<T, G>]" data-slot="label" :class="ui.label({ class: uiProp?.label })">
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey as string) || !!slots[(group.slot ? `${group.slot}-group-label` : 'group-label') as keyof CommandPaletteSlots<T, G>]" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               <slot :name="((group.slot ? `${group.slot}-group-label` : 'group-label') as keyof GroupSlots<T, G>)" :group="group" :label="get(group, props.labelKey as string)" :ui="ui">
                 {{ get(group, props.labelKey as string) }}
               </slot>
@@ -625,14 +631,14 @@ function onSelect(e: Event, item: T) {
         </template>
       </div>
 
-      <div v-else data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+      <div v-else data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t('commandPalette.noMatch', { searchTerm }) : t('commandPalette.noData') }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :ui="ui" />
     </div>
   </ListboxRoot>
diff --git a/src/runtime/components/Container.vue b/src/runtime/components/Container.vue
index 4e41add34b..3ef5a83fc5 100644
--- a/src/runtime/components/Container.vue
+++ b/src/runtime/components/Container.vue
@@ -26,20 +26,22 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+
+const _props = defineProps<ContainerProps>()
 
-const props = defineProps<ContainerProps>()
 defineSlots<ContainerSlots>()
 
+const props = useComponentProps('container', _props)
+
 const appConfig = useAppConfig() as Container['AppConfig']
-const uiProp = useComponentUI('container', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.container || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index 43186c0f0c..7ce30b9037 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -111,15 +111,16 @@ export type ContextMenuSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<ContextMenuItem>">
 import { computed, toRef } from 'vue'
-import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from 'reka-ui'
+import { ContextMenuRoot, ContextMenuTrigger } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UContextMenuContent from './ContextMenuContent.vue'
 
-const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
+const _props = withDefaults(defineProps<ContextMenuProps<T>>(), {
   portal: true,
   modal: true,
   externalIcon: true,
@@ -129,13 +130,15 @@ const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
 const emits = defineEmits<ContextMenuEmits>()
 const slots = defineSlots<ContextMenuSlots<T>>()
 
+const props = useComponentProps<ContextMenuProps<T>>('contextMenu', _props)
+
 const appConfig = useAppConfig() as ContextMenu['AppConfig']
-const uiProp = useComponentUI('contextMenu', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'modal'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const getProxySlots = () => omit(slots, ['default'])
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })({
   size: props.size
 }))
@@ -143,22 +146,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu
 
 <template>
   <ContextMenuRoot v-bind="rootProps">
-    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled" :class="props.class">
+    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="props.disabled" :class="props.class">
       <slot />
     </ContextMenuTrigger>
 
     <UContextMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
       :ui="ui"
-      :ui-override="uiProp"
+      :ui-override="props.ui"
       v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="(labelKey as string & keyof NestedItem<T>)"
-      :description-key="(descriptionKey as string & keyof NestedItem<T>)"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
+      :items="props.items"
+      :portal="props.portal"
+      :label-key="(props.labelKey as string & keyof NestedItem<T>)"
+      :description-key="(props.descriptionKey as string & keyof NestedItem<T>)"
+      :checked-icon="props.checkedIcon"
+      :loading-icon="props.loadingIcon"
+      :external-icon="props.externalIcon"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" />
diff --git a/src/runtime/components/DashboardGroup.vue b/src/runtime/components/DashboardGroup.vue
index d0400d988c..3db56ddbe6 100644
--- a/src/runtime/components/DashboardGroup.vue
+++ b/src/runtime/components/DashboardGroup.vue
@@ -28,19 +28,21 @@ import { Primitive } from 'reka-ui'
 import { useNuxtApp, useAppConfig } from '#imports'
 import { provideDashboardContext } from '../utils/dashboard'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 
-const props = withDefaults(defineProps<DashboardGroupProps>(), {
+const _props = withDefaults(defineProps<DashboardGroupProps>(), {
   storage: 'cookie',
   storageKey: 'dashboard',
   persistent: true,
   unit: '%'
 })
+
 defineSlots<DashboardGroupSlots>()
 
+const props = useComponentProps('dashboardGroup', _props)
+
 const nuxtApp = useNuxtApp()
 const appConfig = useAppConfig() as DashboardGroup['AppConfig']
-const uiProp = useComponentUI('dashboardGroup', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardGroup || {}) }))
@@ -68,7 +70,7 @@ provideDashboardContext({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/DashboardNavbar.vue b/src/runtime/components/DashboardNavbar.vue
index d9d0a90598..0df1ce3780 100644
--- a/src/runtime/components/DashboardNavbar.vue
+++ b/src/runtime/components/DashboardNavbar.vue
@@ -53,7 +53,7 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useDashboard } from '../utils/dashboard'
 import { tv } from '../utils/tv'
 import UDashboardSidebarToggle from './DashboardSidebarToggle.vue'
@@ -61,14 +61,15 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<DashboardNavbarProps>(), {
+const _props = withDefaults(defineProps<DashboardNavbarProps>(), {
   toggle: true,
   toggleSide: 'left'
 })
 const slots = defineSlots<DashboardNavbarSlots>()
 
+const props = useComponentProps('dashboardNavbar', _props)
+
 const appConfig = useAppConfig() as DashboardNavbar['AppConfig']
-const uiProp = useComponentUI('dashboardNavbar', props)
 const dashboardContext = useDashboard({})
 
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate()
@@ -81,27 +82,27 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
   <DefineToggleTemplate>
     <slot name="toggle" v-bind="{ ...dashboardContext, ui }">
       <UDashboardSidebarToggle
-        v-if="toggle"
-        v-bind="(typeof toggle === 'object' ? toggle : {})"
-        :side="toggleSide"
+        v-if="props.toggle"
+        v-bind="(typeof props.toggle === 'object' ? props.toggle : {})"
+        :side="props.toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
-      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
         <slot name="leading" v-bind="{ ...dashboardContext, ui }">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+          <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h1>
 
@@ -109,14 +110,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
       </slot>
     </div>
 
-    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: uiProp?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
-      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
     </div>
   </Primitive>
 </template>
diff --git a/src/runtime/components/DashboardPanel.vue b/src/runtime/components/DashboardPanel.vue
index 0ea024a5a0..3dcb2c40ef 100644
--- a/src/runtime/components/DashboardPanel.vue
+++ b/src/runtime/components/DashboardPanel.vue
@@ -24,7 +24,7 @@ export interface DashboardPanelSlots {
 <script setup lang="ts">
 import { computed, useId, toRef } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useResizable } from '../composables/useResizable'
 import { useDashboard } from '../utils/dashboard'
 import { tv } from '../utils/tv'
@@ -32,14 +32,16 @@ import UDashboardResizeHandle from './DashboardResizeHandle.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<DashboardPanelProps>(), {
+const _props = withDefaults(defineProps<DashboardPanelProps>(), {
   minSize: 15,
   resizable: false
 })
+
 defineSlots<DashboardPanelSlots>()
 
+const props = useComponentProps('dashboardPanel', _props)
+
 const appConfig = useAppConfig() as DashboardPanel['AppConfig']
-const uiProp = useComponentUI('dashboardPanel', props)
 const dashboardContext = useDashboard({ storageKey: 'dashboard', unit: '%' })
 
 const id = `${dashboardContext.storageKey}-panel-${props.id || useId()}`
@@ -59,13 +61,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardPan
     v-bind="$attrs"
     :data-dragging="isDragging"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : undefined]"
   >
     <slot>
       <slot name="header" />
 
-      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot name="body" />
       </div>
 
@@ -75,10 +77,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardPan
 
   <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
     <UDashboardResizeHandle
-      v-if="resizable"
+      v-if="props.resizable"
       :aria-controls="id"
       data-slot="handle"
-      :class="ui.handle({ class: uiProp?.handle })"
+      :class="ui.handle({ class: props.ui?.handle })"
       @mousedown="onMouseDown"
       @touchstart="onTouchStart"
       @dblclick="onDoubleClick"
diff --git a/src/runtime/components/DashboardResizeHandle.vue b/src/runtime/components/DashboardResizeHandle.vue
index 203b40a2c7..6a27ef2ffe 100644
--- a/src/runtime/components/DashboardResizeHandle.vue
+++ b/src/runtime/components/DashboardResizeHandle.vue
@@ -26,13 +26,15 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+
+const _props = defineProps<DashboardResizeHandleProps>()
 
-const props = defineProps<DashboardResizeHandleProps>()
 defineSlots<DashboardResizeHandleSlots>()
 
+const props = useComponentProps('dashboardResizeHandle', _props)
+
 const appConfig = useAppConfig() as DashboardResizeHandle['AppConfig']
-const uiProp = useComponentUI('dashboardResizeHandle', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardResizeHandle || {}) }))
@@ -40,9 +42,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardRes
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     role="separator"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
   >
     <slot />
   </Primitive>
diff --git a/src/runtime/components/DashboardSearch.vue b/src/runtime/components/DashboardSearch.vue
index fd68553515..4bc6969919 100644
--- a/src/runtime/components/DashboardSearch.vue
+++ b/src/runtime/components/DashboardSearch.vue
@@ -49,18 +49,18 @@ export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteItem> & {
 
 <script setup lang="ts">
 import { computed, useTemplateRef } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig, useColorMode, defineShortcuts, useRuntimeHook } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useLocale } from '../composables/useLocale'
 import { omit, transformUI } from '../utils'
 import { tv } from '../utils/tv'
 import UCommandPalette from './CommandPalette.vue'
 import UModal from './Modal.vue'
 
-const props = withDefaults(defineProps<DashboardSearchProps>(), {
+const _props = withDefaults(defineProps<DashboardSearchProps>(), {
   shortcut: 'meta_k',
   colorMode: true,
   close: true,
@@ -69,6 +69,8 @@ const props = withDefaults(defineProps<DashboardSearchProps>(), {
 })
 const slots = defineSlots<DashboardSearchSlots>()
 
+const props = useComponentProps('dashboardSearch', _props)
+
 const open = defineModel<boolean>('open', { default: false })
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
@@ -80,7 +82,6 @@ const { t } = useLocale()
 // eslint-disable-next-line vue/no-dupe-keys
 const colorMode = useColorMode()
 const appConfig = useAppConfig() as DashboardSearch['AppConfig']
-const uiProp = useComponentUI('dashboardSearch', props)
 
 const commandPaletteProps = useForwardProps(reactivePick(props, 'size', 'icon', 'placeholder', 'autofocus', 'loading', 'loadingIcon', 'close', 'closeIcon', 'searchDelay'))
 const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal'))
@@ -92,6 +93,7 @@ const fuse = computed(() => defu({}, props.fuse, {
   }
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSearch || {}) })({
   size: props.size,
   fullscreen: props.fullscreen
@@ -162,11 +164,11 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="title || t('dashboardSearch.title')"
-    :description="description || t('dashboardSearch.description')"
+    :title="props.title || t('dashboardSearch.title')"
+    :description="props.description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
+    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -177,7 +179,7 @@ defineExpose({
           :groups="groups"
           :fuse="fuse"
           :input="{ fixed: true }"
-          :ui="transformUI(omit(ui, ['modal']), uiProp)"
+          :ui="transformUI(omit(ui, ['modal']), props.ui)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >
diff --git a/src/runtime/components/DashboardSearchButton.vue b/src/runtime/components/DashboardSearchButton.vue
index 5996326b0a..83dcc05d4f 100644
--- a/src/runtime/components/DashboardSearchButton.vue
+++ b/src/runtime/components/DashboardSearchButton.vue
@@ -51,11 +51,11 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useLocale } from '../composables/useLocale'
 import { useDashboard } from '../utils/dashboard'
 import { omit, transformUI } from '../utils'
@@ -66,7 +66,7 @@ import UTooltip from './Tooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<DashboardSearchButtonProps>(), {
+const _props = withDefaults(defineProps<DashboardSearchButtonProps>(), {
   color: 'neutral',
   collapsed: false,
   tooltip: false,
@@ -74,6 +74,8 @@ const props = withDefaults(defineProps<DashboardSearchButtonProps>(), {
 })
 const slots = defineSlots<ButtonSlots>()
 
+const props = useComponentProps('dashboardSearchButton', _props)
+
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate()
 
 const getProxySlots = () => omit(slots, ['trailing'])
@@ -83,9 +85,9 @@ const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} :
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as DashboardSearchButton['AppConfig']
-const uiProp = useComponentUI('dashboardSearchButton', props)
 const { toggleSearch } = useDashboard({ toggleSearch: () => {} })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSearchButton || {}) })({
   collapsed: props.collapsed
 }))
@@ -94,19 +96,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSea
 <template>
   <DefineButtonTemplate>
     <UButton
-      :icon="icon || appConfig.ui.icons.search"
-      :label="label || t('dashboardSearchButton.label')"
-      :variant="variant || (collapsed ? 'ghost' : 'outline')"
+      :icon="props.icon || appConfig.ui.icons.search"
+      :label="props.label || t('dashboardSearchButton.label')"
+      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
       v-bind="{
         ...buttonProps,
-        ...(collapsed ? {
+        ...(props.collapsed ? {
           'square': true,
-          'aria-label': label || t('dashboardSearchButton.label')
+          'aria-label': props.label || t('dashboardSearchButton.label')
         } : {}),
         ...$attrs
       }"
-      :class="ui.base({ class: [uiProp?.base, props.class] })"
-      :ui="transformUI(ui, uiProp)"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(ui, props.ui)"
       @click="toggleSearch"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -114,10 +116,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSea
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+        <span data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :ui="uiProxy">
-            <template v-if="kbds?.length">
-              <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <template v-if="props.kbds?.length">
+              <UKbd v-for="(kbd, index) in props.kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </template>
           </slot>
         </span>
@@ -125,7 +127,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSea
     </UButton>
   </DefineButtonTemplate>
 
-  <UTooltip v-if="collapsed && tooltip" :text="label || t('dashboardSearchButton.label')" v-bind="tooltipProps">
+  <UTooltip v-if="props.collapsed && props.tooltip" :text="props.label || t('dashboardSearchButton.label')" v-bind="tooltipProps">
     <ReuseButtonTemplate />
   </UTooltip>
   <ReuseButtonTemplate v-else />
diff --git a/src/runtime/components/DashboardSidebar.vue b/src/runtime/components/DashboardSidebar.vue
index 28ac063ec6..06534c9edf 100644
--- a/src/runtime/components/DashboardSidebar.vue
+++ b/src/runtime/components/DashboardSidebar.vue
@@ -14,7 +14,7 @@ type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slide
 export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
   /**
    * The mode of the sidebar menu.
-   * @defaultValue 'modal'
+   * @defaultValue 'slideover'
    */
   mode?: T
   /**
@@ -56,7 +56,7 @@ import { ref, computed, toRef, useId, watch } from 'vue'
 import { defu } from 'defu'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig, useRuntimeHook, useRoute } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useResizable } from '../composables/useResizable'
 import { useLocale } from '../composables/useLocale'
 import { useDashboard } from '../utils/dashboard'
@@ -69,7 +69,7 @@ import UDrawer from './Drawer.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<DashboardSidebarProps<T>>(), {
+const _props = withDefaults(defineProps<DashboardSidebarProps<T>>(), {
   side: 'left',
   mode: 'slideover' as never,
   autoClose: true,
@@ -84,13 +84,14 @@ const props = withDefaults(defineProps<DashboardSidebarProps<T>>(), {
 })
 const slots = defineSlots<DashboardSidebarSlots>()
 
+const props = useComponentProps<DashboardSidebarProps<T>>('dashboardSidebar', _props)
+
 const open = defineModel<boolean>('open', { default: false })
 const collapsed = defineModel<boolean>('collapsed', { default: false })
 
 const route = useRoute()
 const { t } = useLocale()
 const appConfig = useAppConfig() as DashboardSidebar['AppConfig']
-const uiProp = useComponentUI('dashboardSidebar', props)
 
 const dashboardContext = useDashboard({
   storageKey: 'dashboard',
@@ -123,6 +124,7 @@ watch(() => route.fullPath, () => {
   open.value = false
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSidebar || {}) })({
   side: props.side
 }))
@@ -144,11 +146,11 @@ function toggleOpen() {
   <DefineToggleTemplate>
     <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UDashboardSidebarToggle
-        v-if="toggle"
-        v-bind="(typeof toggle === 'object' ? toggle : {})"
-        :side="toggleSide"
+        v-if="props.toggle"
+        v-bind="(typeof props.toggle === 'object' ? props.toggle : {})"
+        :side="props.toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
@@ -156,10 +158,10 @@ function toggleOpen() {
   <DefineResizeHandleTemplate>
     <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick" :ui="ui">
       <UDashboardResizeHandle
-        v-if="resizable"
+        v-if="props.resizable"
         :aria-controls="id"
         data-slot="handle"
-        :class="ui.handle({ class: uiProp?.handle })"
+        :class="ui.handle({ class: props.ui?.handle })"
         @mousedown="onMouseDown"
         @touchstart="onTouchStart"
         @dblclick="onDoubleClick"
@@ -167,7 +169,7 @@ function toggleOpen() {
     </slot>
   </DefineResizeHandleTemplate>
 
-  <ReuseResizeHandleTemplate v-if="side === 'right'" />
+  <ReuseResizeHandleTemplate v-if="props.side === 'right'" />
 
   <div
     :id="id"
@@ -176,23 +178,23 @@ function toggleOpen() {
     :data-collapsed="isCollapsed"
     :data-dragging="isDragging"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
   >
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
   </div>
 
-  <ReuseResizeHandleTemplate v-if="side === 'left'" />
+  <ReuseResizeHandleTemplate v-if="props.side === 'left'" />
 
   <Menu
     v-model:open="open"
@@ -200,25 +202,25 @@ function toggleOpen() {
     :description="t('dashboardSidebar.description')"
     v-bind="menuProps"
     :ui="{
-      overlay: ui.overlay({ class: uiProp?.overlay }),
-      content: ui.content({ class: uiProp?.content })
+      overlay: ui.overlay({ class: props.ui?.overlay }),
+      content: ui.content({ class: props.ui?.content })
     }"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: uiProp?.header, menu: true })">
-          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
+        <div v-if="!!slots.header || props.mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header, menu: true })">
+          <ReuseToggleTemplate v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
 
           <slot name="header" :collapsed="false" :collapse="() => {}" />
 
-          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
+          <ReuseToggleTemplate v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
         </div>
 
-        <div data-slot="body" :class="ui.body({ class: uiProp?.body, menu: true })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body, menu: true })">
           <slot :collapsed="false" :collapse="() => {}" />
         </div>
 
-        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, menu: true })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
           <slot name="footer" :collapsed="false" :collapse="() => {}" />
         </div>
       </slot>
diff --git a/src/runtime/components/DashboardSidebarCollapse.vue b/src/runtime/components/DashboardSidebarCollapse.vue
index 9e7d5a5133..e5b8becb5f 100644
--- a/src/runtime/components/DashboardSidebarCollapse.vue
+++ b/src/runtime/components/DashboardSidebarCollapse.vue
@@ -26,26 +26,27 @@ export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPro
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useDashboard } from '../utils/dashboard'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<DashboardSidebarCollapseProps>(), {
+const _props = withDefaults(defineProps<DashboardSidebarCollapseProps>(), {
   color: 'neutral',
   variant: 'ghost',
   side: 'left'
 })
 
+const props = useComponentProps('dashboardSidebarCollapse', _props)
+
 const buttonProps = useForwardProps(reactiveOmit(props, 'icon', 'side', 'class'))
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as DashboardSidebarCollapse['AppConfig']
-const uiProp = useComponentUI('dashboardSidebarCollapse', props)
 const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {} })
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -60,7 +61,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSid
       'aria-label': sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse'),
       ...$attrs
     }"
-    :class="ui({ class: [uiProp?.base, props.class], side: props.side })"
+    :class="ui({ class: [props.ui?.base, props.class], side: props.side })"
     @click="collapseSidebar?.(!sidebarCollapsed)"
   />
 </template>
diff --git a/src/runtime/components/DashboardSidebarToggle.vue b/src/runtime/components/DashboardSidebarToggle.vue
index 63a00c3238..9b94e56eec 100644
--- a/src/runtime/components/DashboardSidebarToggle.vue
+++ b/src/runtime/components/DashboardSidebarToggle.vue
@@ -26,28 +26,29 @@ export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkProps
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useDashboard } from '../utils/dashboard'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<DashboardSidebarToggleProps>(), {
+const _props = withDefaults(defineProps<DashboardSidebarToggleProps>(), {
   color: 'neutral',
   variant: 'ghost',
   side: 'left'
 })
 
+const props = useComponentProps('dashboardSidebarToggle', _props)
+
 const buttonProps = useForwardProps(reactiveOmit(props, 'icon', 'side', 'class'))
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as DashboardSidebarToggle['AppConfig']
-const uiProp = useComponentUI('dashboardSidebarToggle', props)
 const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {} })
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -62,7 +63,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardSid
       'aria-label': sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open'),
       ...$attrs
     }"
-    :class="ui({ class: [uiProp?.base, props.class], side: props.side })"
+    :class="ui({ class: [props.ui?.base, props.class], side: props.side })"
     @click="toggleSidebar"
   />
 </template>
diff --git a/src/runtime/components/DashboardToolbar.vue b/src/runtime/components/DashboardToolbar.vue
index be25551e97..bfb6fc0e13 100644
--- a/src/runtime/components/DashboardToolbar.vue
+++ b/src/runtime/components/DashboardToolbar.vue
@@ -27,27 +27,29 @@ export interface DashboardToolbarSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = defineProps<DashboardToolbarProps>()
+const _props = defineProps<DashboardToolbarProps>()
+
 defineSlots<DashboardToolbarSlots>()
 
+const props = useComponentProps('dashboardToolbar', _props)
+
 const appConfig = useAppConfig() as DashboardToolbar['AppConfig']
-const uiProp = useComponentUI('dashboardToolbar', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardToolbar || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot>
-      <div data-slot="left" :class="ui.left({ class: [uiProp?.left] })">
+      <div data-slot="left" :class="ui.left({ class: [props.ui?.left] })">
         <slot name="left" />
       </div>
 
-      <div data-slot="right" :class="ui.right({ class: [uiProp?.right] })">
+      <div data-slot="right" :class="ui.right({ class: [props.ui?.right] })">
         <slot name="right" />
       </div>
     </slot>
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index 3a5b9d7c79..609e097425 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -65,17 +65,18 @@ export interface DrawerSlots {
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { VisuallyHidden } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { FieldGroupReset } from '../composables/useFieldGroup'
 import { usePortal } from '../composables/usePortal'
 import { pointerDownOutside } from '../utils/overlay'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<DrawerProps>(), {
+const _props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
   portal: true,
   overlay: true,
@@ -86,10 +87,11 @@ const props = withDefaults(defineProps<DrawerProps>(), {
 const emits = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
+const props = useComponentProps('drawer', _props)
+
 const appConfig = useAppConfig() as Drawer['AppConfig']
-const uiProp = useComponentUI('drawer', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
@@ -110,6 +112,7 @@ const contentEvents = computed(() => {
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })({
   direction: props.direction,
   inset: props.inset,
@@ -118,57 +121,57 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
+  <component :is="props.nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
 
     <DrawerPortal v-bind="portalProps">
       <FieldGroupReset>
-        <DrawerOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+        <DrawerOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
-        <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
-          <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: uiProp?.handle })" />
+        <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+          <DrawerHandle v-if="props.handle" data-slot="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
-          <VisuallyHidden v-if="(!title && !slots.title) || (!description && !slots.description) || !!slots.content">
-            <DrawerTitle v-if="!title && !slots.title" />
+          <VisuallyHidden v-if="(!props.title && !slots.title) || (!props.description && !slots.description) || !!slots.content">
+            <DrawerTitle v-if="!props.title && !slots.title" />
             <DrawerTitle v-else-if="!!slots.content">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </DrawerTitle>
 
-            <DrawerDescription v-if="!description && !slots.description" />
+            <DrawerDescription v-if="!props.description && !slots.description" />
             <DrawerDescription v-else-if="!!slots.content">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </DrawerDescription>
           </VisuallyHidden>
 
           <slot name="content">
-            <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-              <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+            <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+              <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
                 <slot name="header">
-                  <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+                  <DrawerTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                     <slot name="title">
-                      {{ title }}
+                      {{ props.title }}
                     </slot>
                   </DrawerTitle>
 
-                  <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                  <DrawerDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                     <slot name="description">
-                      {{ description }}
+                      {{ props.description }}
                     </slot>
                   </DrawerDescription>
                 </slot>
               </div>
 
-              <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+              <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
                 <slot name="body" />
               </div>
 
-              <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+              <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
                 <slot name="footer" />
               </div>
             </div>
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 166d8ad6ad..92f482abf0 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -142,15 +142,16 @@ export type DropdownMenuSlots<
 <script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
-import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'reka-ui'
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UDropdownMenuContent from './DropdownMenuContent.vue'
 
-const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
+const _props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
   portal: true,
   modal: true,
   externalIcon: true,
@@ -164,14 +165,16 @@ const slots = defineSlots<DropdownMenuSlots<T>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
+const props = useComponentProps<DropdownMenuProps<T>>('dropdownMenu', _props)
+
 const appConfig = useAppConfig() as DropdownMenu['AppConfig']
-const uiProp = useComponentUI('dropdownMenu', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as DropdownMenuContentProps)
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }) as DropdownMenuArrowProps)
 const getProxySlots = () => omit(slots, ['default'])
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })({
   size: props.size
 }))
@@ -179,33 +182,33 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu
 
 <template>
   <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
-    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="props.disabled">
       <slot :open="open" />
     </DropdownMenuTrigger>
 
     <UDropdownMenuContent
       v-model:search-term="searchTerm"
-      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
       :ui="ui"
-      :ui-override="uiProp"
+      :ui-override="props.ui"
       v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="(labelKey as string & keyof NestedItem<T>)"
-      :description-key="(descriptionKey as string & keyof NestedItem<T>)"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
-      :size="size"
-      :filter="filter"
-      :filter-fields="filterFields"
-      :ignore-filter="ignoreFilter"
+      :items="props.items"
+      :portal="props.portal"
+      :label-key="(props.labelKey as string & keyof NestedItem<T>)"
+      :description-key="(props.descriptionKey as string & keyof NestedItem<T>)"
+      :checked-icon="props.checkedIcon"
+      :loading-icon="props.loadingIcon"
+      :external-icon="props.externalIcon"
+      :size="props.size"
+      :filter="props.filter"
+      :filter-fields="props.filterFields"
+      :ignore-filter="props.ignoreFilter"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+      <DropdownMenuArrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>
 </template>
diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
index e65fa5e816..90f635acae 100644
--- a/src/runtime/components/Editor.vue
+++ b/src/runtime/components/Editor.vue
@@ -87,7 +87,7 @@ export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandle
 <script setup lang="ts" generic="T extends Content, H extends EditorCustomHandlers">
 import { computed, provide, useAttrs, watch } from 'vue'
 import { defu } from 'defu'
-import { Primitive, useForwardProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { mergeAttributes } from '@tiptap/core'
 import Code from '@tiptap/extension-code'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
@@ -99,24 +99,28 @@ import StarterKit from '@tiptap/starter-kit'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { createHandlers } from '../utils/editor'
 import { tv } from '../utils/tv'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<EditorProps<T, H>>(), {
+const _props = withDefaults(defineProps<EditorProps<T, H>>(), {
   image: true,
   mention: true
 })
 const emits = defineEmits<EditorEmits<T>>()
+
 defineSlots<EditorSlots<H>>()
 
+const props = useComponentProps<EditorProps<T, H>>('editor', _props)
+
 const attrs = useAttrs()
 
 const appConfig = useAppConfig() as Editor['AppConfig']
-const uiProp = useComponentUI('editor', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editor || {}) })({
   placeholderMode: typeof props.placeholder === 'object' ? props.placeholder.mode : undefined
 }))
@@ -129,10 +133,12 @@ const editorProps = computed(() => defu(props.editorProps, {
     autocorrect: 'off',
     autocapitalize: 'off',
     ...attrs,
-    class: ui.value.base({ class: uiProp.value?.base })
+    class: ui.value.base({ class: props.ui?.base })
   }
 } as EditorOptions['editorProps']))
+// eslint-disable-next-line vue/no-dupe-keys
 const contentType = computed(() => props.contentType || (typeof props.modelValue === 'string' ? 'html' : 'json'))
+// eslint-disable-next-line vue/no-dupe-keys
 const starterKit = computed(() => defu(props.starterKit, {
   code: false,
   horizontalRule: false,
@@ -144,6 +150,7 @@ const starterKit = computed(() => defu(props.starterKit, {
     openOnClick: false
   }
 } as Partial<StarterKitOptions>))
+// eslint-disable-next-line vue/no-dupe-keys
 const placeholder = computed(() => {
   const options = typeof props.placeholder === 'string' ? { placeholder: props.placeholder } : props.placeholder
   const { mode, ...rest } = options || {}
@@ -153,12 +160,15 @@ const placeholder = computed(() => {
     showOnlyCurrent: true
   } as Partial<PlaceholderOptions>)
 })
+// eslint-disable-next-line vue/no-dupe-keys
 const markdown = computed(() => defu(props.markdown, {
   markedOptions: {
     gfm: true
   }
 } as Partial<MarkdownExtensionOptions>))
+// eslint-disable-next-line vue/no-dupe-keys
 const image = computed(() => typeof props.image === 'boolean' ? {} : props.image)
+// eslint-disable-next-line vue/no-dupe-keys
 const mention = computed(() => defu(typeof props.mention === 'boolean' ? {} : props.mention, {
   HTMLAttributes: {
     class: 'mention'
@@ -259,6 +269,7 @@ watch(() => props.modelValue, (newVal) => {
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const handlers = computed(() => ({
   ...createHandlers(),
   ...props.handlers
@@ -272,7 +283,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <template v-if="editor">
       <slot :editor="editor" :handlers="handlers" />
 
@@ -280,7 +291,7 @@ defineExpose({
         role="presentation"
         :editor="editor"
         data-slot="content"
-        :class="ui.content({ class: uiProp?.content })"
+        :class="ui.content({ class: props.ui?.content })"
       />
     </template>
   </Primitive>
diff --git a/src/runtime/components/EditorDragHandle.vue b/src/runtime/components/EditorDragHandle.vue
index b5328f1f91..727ed90739 100644
--- a/src/runtime/components/EditorDragHandle.vue
+++ b/src/runtime/components/EditorDragHandle.vue
@@ -48,11 +48,11 @@ export interface EditorDragHandleEmits {
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import DragHandle from '@tiptap/extension-drag-handle-vue-3'
-import { useForwardProps } from 'reka-ui'
 import { reactiveOmit, reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { buildFloatingUIMiddleware } from '../utils/editor'
 import { transformUI } from '../utils'
 import { tv } from '../utils/tv'
@@ -60,19 +60,21 @@ import UButton from './Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<EditorDragHandleProps>(), {
+const _props = withDefaults(defineProps<EditorDragHandleProps>(), {
   color: 'neutral',
   variant: 'ghost',
   size: 'sm'
 })
+
 defineSlots<EditorDragHandleSlots>()
 const emit = defineEmits<EditorDragHandleEmits>()
 
+const props = useComponentProps('editorDragHandle', _props)
+
 const dragHandleProps = useForwardProps(reactivePick(props, 'pluginKey', 'nested', 'nestedOptions', 'onElementDragEnd', 'onElementDragStart', 'getReferencedVirtualElement'))
 const buttonProps = useForwardProps(reactiveOmit(props, 'icon', 'options', 'editor', 'pluginKey', 'nested', 'nestedOptions', 'onElementDragEnd', 'onElementDragStart', 'getReferencedVirtualElement', 'class', 'ui'))
 
 const appConfig = useAppConfig() as EditorDragHandle['AppConfig']
-const uiProp = useComponentUI('editorDragHandle', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorDragHandle || {}) })())
@@ -149,10 +151,10 @@ function onClick() {
   <DragHandle
     v-bind="dragHandleProps"
     :compute-position-config="computePositionConfig"
-    :editor="editor"
+    :editor="props.editor"
     :on-node-change="onNodeChange"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @click="onClick"
   >
     <slot :ui="ui" :on-click="onClick">
@@ -163,8 +165,8 @@ function onClick() {
           ...$attrs
         }"
         data-slot="handle"
-        :class="ui.handle({ class: [uiProp?.handle, props.class] })"
-        :ui="transformUI(ui, uiProp)"
+        :class="ui.handle({ class: [props.ui?.handle, props.class] })"
+        :ui="transformUI(ui, props.ui)"
       />
     </slot>
   </DragHandle>
diff --git a/src/runtime/components/EditorToolbar.vue b/src/runtime/components/EditorToolbar.vue
index 0b8d08ae06..de5995c66f 100644
--- a/src/runtime/components/EditorToolbar.vue
+++ b/src/runtime/components/EditorToolbar.vue
@@ -97,12 +97,13 @@ export type EditorToolbarSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<EditorToolbarItem>">
 import { computed, inject } from 'vue'
-import { Primitive, Separator, useForwardProps } from 'reka-ui'
+import { Primitive, Separator } from 'reka-ui'
 import { defu } from 'defu'
 import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { isArrayOfArray, pick, omit } from '../utils'
 import { createHandlers } from '../utils/editor'
 import { tv } from '../utils/tv'
@@ -112,7 +113,7 @@ import UTooltip from './Tooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<EditorToolbarProps<T>>(), {
+const _props = withDefaults(defineProps<EditorToolbarProps<T>>(), {
   layout: 'fixed',
   color: 'neutral',
   variant: 'ghost',
@@ -120,10 +121,12 @@ const props = withDefaults(defineProps<EditorToolbarProps<T>>(), {
   activeVariant: 'soft',
   size: 'sm'
 })
+
 defineSlots<EditorToolbarSlots<T>>()
 
+const props = useComponentProps<EditorToolbarProps<T>>('editorToolbar', _props)
+
 const appConfig = useAppConfig() as EditorToolbar['AppConfig']
-const uiProp = useComponentUI('editorToolbar', props)
 
 const handlers = inject('editorHandlers', computed(() => createHandlers()))
 
@@ -132,7 +135,7 @@ const Component = computed(() => {
     bubble: BubbleMenu,
     floating: FloatingMenu,
     fixed: 'template'
-  }[props.layout])
+  }[props.layout!])
 })
 
 const rootProps = useForwardProps(reactiveOmit(props, 'as', 'color', 'variant', 'activeColor', 'activeVariant', 'size', 'items', 'layout', 'editor', 'class', 'ui'))
@@ -142,6 +145,7 @@ const options = computed(() => defu((props as any).options, {
   shift: { padding: 8 }
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorToolbar || {}) })({
   layout: props.layout
 }))
@@ -312,9 +316,9 @@ function getDropdownItems(item: EditorToolbarDropdownItem) {
   <Primitive
     :as="Component"
     v-bind="Component !== 'template' ? {
-      editor,
+      editor: props.editor,
       tabindex: -1,
-      class: ui.root({ class: uiProp?.root }),
+      class: ui.root({ class: props.ui?.root }),
       ...rootProps,
       options,
       ...$attrs
@@ -322,9 +326,9 @@ function getDropdownItems(item: EditorToolbarDropdownItem) {
       ...$attrs
     }"
   >
-    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <Primitive :as="props.as" role="toolbar" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
       <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
-        <div role="group" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+        <div role="group" data-slot="group" :class="ui.group({ class: props.ui?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <slot
               :name="((item.slot || 'item') as keyof EditorToolbarSlots<T>)"
@@ -371,7 +375,7 @@ function getDropdownItems(item: EditorToolbarDropdownItem) {
         <Separator
           v-if="groupIndex < groups.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: uiProp?.separator })"
+          :class="ui.separator({ class: props.ui?.separator })"
           orientation="vertical"
         />
       </template>
diff --git a/src/runtime/components/Empty.vue b/src/runtime/components/Empty.vue
index a28bbc445c..435b09a746 100644
--- a/src/runtime/components/Empty.vue
+++ b/src/runtime/components/Empty.vue
@@ -52,17 +52,19 @@ export interface EmptySlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
 
-const props = defineProps<EmptyProps>()
+const _props = defineProps<EmptyProps>()
 const slots = defineSlots<EmptySlots>()
 
+const props = useComponentProps('empty', _props)
+
 const appConfig = useAppConfig() as Empty['AppConfig']
-const uiProp = useComponentUI('empty', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.empty || {}) })({
   variant: props.variant,
   size: props.size
@@ -70,38 +72,38 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.empty || {})
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (props.icon || props.avatar || !!slots.leading) || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <slot name="leading" :ui="ui">
-          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+          <UAvatar v-if="props.icon || props.avatar" :icon="props.icon" v-bind="typeof props.avatar === 'object' ? props.avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
 
-        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h2>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div v-if="!!slots.body || (props.actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+        <div v-if="props.actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
-            <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
+            <UButton v-for="(action, index) in props.actions" :key="index" :size="props.size" v-bind="action" />
           </slot>
         </div>
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Error.vue b/src/runtime/components/Error.vue
index b790d0c9fb..af732da800 100644
--- a/src/runtime/components/Error.vue
+++ b/src/runtime/components/Error.vue
@@ -43,21 +43,22 @@ export interface ErrorSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { clearError, useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<ErrorProps>(), {
+const _props = withDefaults(defineProps<ErrorProps>(), {
   as: 'main',
   redirect: '/',
   clear: true
 })
 const slots = defineSlots<ErrorSlots>()
 
+const props = useComponentProps('error', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Error['AppConfig']
-const uiProp = useComponentUI('error', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.error || {}) })())
@@ -68,31 +69,31 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!props.error?.status || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: uiProp?.statusCode })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!props.error?.status || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode || props.error?.status }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!props.error?.statusText || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: uiProp?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!props.error?.statusText || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage || props.error?.statusText }}
       </slot>
     </h1>
-    <p v-if="(props.error?.message && props.error.message !== (props.error.statusMessage || props.error.statusText)) || !!slots.message" data-slot="message" :class="ui.message({ class: uiProp?.message })">
+    <p v-if="(props.error?.message && props.error.message !== (props.error.statusMessage || props.error.statusText)) || !!slots.message" data-slot="message" :class="ui.message({ class: props.ui?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
+    <div v-if="!!props.clear || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
       <slot name="links">
         <UButton
-          v-if="clear"
+          v-if="props.clear"
           size="lg"
           color="primary"
           variant="solid"
           :label="t('error.clear')"
-          v-bind="(typeof clear === 'object' ? clear : {})"
+          v-bind="(typeof props.clear === 'object' ? props.clear : {})"
           @click="handleError"
         />
       </slot>
diff --git a/src/runtime/components/FieldGroup.vue b/src/runtime/components/FieldGroup.vue
index bca9e04480..c250f5eba9 100644
--- a/src/runtime/components/FieldGroup.vue
+++ b/src/runtime/components/FieldGroup.vue
@@ -34,17 +34,19 @@ export interface FieldGroupSlots {
 import { provide, computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { fieldGroupInjectionKey } from '../composables/useFieldGroup'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<FieldGroupProps>(), {
+const _props = withDefaults(defineProps<FieldGroupProps>(), {
   orientation: 'horizontal'
 })
+
 defineSlots<FieldGroupSlots>()
 
+const props = useComponentProps('fieldGroup', _props)
+
 const appConfig = useAppConfig() as FieldGroup['AppConfig']
-const uiProp = useComponentUI('fieldGroup', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.fieldGroup || {}) }))
@@ -56,7 +58,7 @@ provide(fieldGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui({ orientation: props.orientation, class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index 36f0219bbb..892b1f31f7 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -142,8 +142,7 @@ import { Primitive, VisuallyHidden } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
-import { useComponentUI } from '../composables/useComponentUI'
-import { useResolvedVariants } from '../composables/useResolvedVariants'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFormField } from '../composables/useFormField'
 import { useFileUpload } from '../composables/useFileUpload'
 import { tv } from '../utils/tv'
@@ -153,7 +152,7 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<FileUploadProps<M>>(), {
+const _props = withDefaults(defineProps<FileUploadProps<M>>(), {
   accept: '*',
   multiple: false as never,
   reset: false,
@@ -170,14 +169,15 @@ const slots = defineSlots<FileUploadSlots<M>>()
 
 const modelValue = defineModel<(M extends true ? File[] : File) | null>()
 
+const props = useComponentProps<FileUploadProps<M>>('fileUpload', _props)
+
 const appConfig = useAppConfig() as FileUpload['AppConfig']
-const uiProp = useComponentUI('fileUpload', props)
 
 const { t } = useLocale()
 
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate()
 
-const { accept, multiple, reset } = toRefs(props)
+const { accept, multiple, reset } = toRefs(_props)
 
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   accept,
@@ -186,11 +186,13 @@ const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   dropzone: props.dropzone,
   onUpdate
 })
-const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField<FileUploadProps>(props)
+const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField<FileUploadProps>(_props)
 
-const { variant: resolvedVariant } = useResolvedVariants('fileUpload', props, theme, ['variant'])
-const variant = computed(() => props.multiple ? 'area' : resolvedVariant.value)
-const layout = computed(() => resolvedVariant.value === 'button' && !props.multiple ? 'grid' : props.layout)
+// eslint-disable-next-line vue/no-dupe-keys
+const variant = computed(() => props.multiple ? 'area' : props.variant)
+// eslint-disable-next-line vue/no-dupe-keys
+const layout = computed(() => props.variant === 'button' && !props.multiple ? 'grid' : props.layout)
+// eslint-disable-next-line vue/no-dupe-keys
 const position = computed(() => {
   if (layout.value === 'grid' && props.multiple) {
     return 'inside'
@@ -202,16 +204,17 @@ const position = computed(() => {
   return props.position
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.fileUpload || {}) })({
   dropzone: props.dropzone,
   interactive: props.interactive,
-  color: color.value,
+  color: color.value ?? props.color,
   size: props.size,
   variant: variant.value,
   layout: layout.value,
   position: position.value,
   multiple: props.multiple,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   disabled: props.disabled
 }))
 
@@ -293,29 +296,29 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
-      <div data-slot="files" :class="ui.files({ class: uiProp?.files })">
+      <div data-slot="files" :class="ui.files({ class: props.ui?.files })">
         <slot name="files" :files="modelValue">
-          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" data-slot="file" :class="ui.file({ class: uiProp?.file })">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
                 <UAvatar
                   :as="{ img: 'img' }"
                   :src="createObjectUrl(file)"
-                  :icon="fileIcon || appConfig.ui.icons.file"
+                  :icon="props.fileIcon || appConfig.ui.icons.file"
                   :size="props.size"
                   data-slot="fileLeadingAvatar"
-                  :class="ui.fileLeadingAvatar({ class: uiProp?.fileLeadingAvatar })"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                 />
               </slot>
 
-              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: uiProp?.fileWrapper })">
-                <span data-slot="fileName" :class="ui.fileName({ class: uiProp?.fileName })">
+              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span data-slot="fileName" :class="ui.fileName({ class: props.ui?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ (file as File).name }}
                   </slot>
                 </span>
 
-                <span data-slot="fileSize" :class="ui.fileSize({ class: uiProp?.fileSize })">
+                <span data-slot="fileSize" :class="ui.fileSize({ class: props.ui?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize((file as File).size) }}
                   </slot>
@@ -324,7 +327,7 @@ defineExpose({
 
               <slot name="file-trailing" :file="file" :index="index" :ui="ui">
                 <UButton
-                  v-if="fileDelete"
+                  v-if="props.fileDelete"
                   color="neutral"
                   v-bind="{
                     ...(layout === 'grid' ? {
@@ -332,14 +335,14 @@ defineExpose({
                       size: 'xs'
                     } : {
                       variant: 'link',
-                      size
+                      size: props.size
                     }),
-                    ...typeof fileDelete === 'object' ? fileDelete : undefined
+                    ...typeof props.fileDelete === 'object' ? props.fileDelete : undefined
                   }"
                   :aria-label="t('fileUpload.removeFile', { filename: (file as File).name })"
-                  :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                  :trailing-icon="props.fileDeleteIcon || appConfig.ui.icons.close"
                   data-slot="fileTrailingButton"
-                  :class="ui.fileTrailingButton({ class: uiProp?.fileTrailingButton })"
+                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
               </slot>
@@ -352,7 +355,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -361,33 +364,33 @@ defineExpose({
         :role="variant === 'button' ? undefined : 'button'"
         :data-dragging="isDragging"
         data-slot="base"
-        :class="ui.base({ class: uiProp?.base })"
-        :tabindex="interactive && !disabled ? 0 : -1"
-        @click="interactive && !disabled && open()"
+        :class="ui.base({ class: props.ui?.base })"
+        :tabindex="props.interactive && !disabled ? 0 : -1"
+        @click="props.interactive && !disabled && open()"
         @keydown.space.prevent
-        @keyup.enter.space="interactive && !disabled && open()"
+        @keyup.enter.space="props.interactive && !disabled && open()"
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
-        <div v-if="position === 'inside' ? (!props.preview || (multiple ? !(modelValue as File[])?.length : !modelValue)) : true" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+        <div v-if="position === 'inside' ? (!props.preview || (multiple ? !(modelValue as File[])?.length : !modelValue)) : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+            <UIcon v-if="variant === 'button'" :name="props.icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UAvatar v-else :icon="props.icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="label || !!slots.label" data-slot="label" :class="ui.label({ class: uiProp?.label })">
+            <div v-if="props.label || !!slots.label" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               <slot name="label">
-                {{ label }}
+                {{ props.label }}
               </slot>
             </div>
-            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </div>
 
-            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>
@@ -406,7 +409,7 @@ defineExpose({
       :name="name"
       :accept="accept"
       :multiple="(multiple as boolean)"
-      :required="required"
+      :required="props.required"
       :disabled="disabled"
       v-bind="{ ...$attrs, ...ariaAttrs }"
     />
diff --git a/src/runtime/components/Footer.vue b/src/runtime/components/Footer.vue
index 441bc10d4a..ce6f4d0131 100644
--- a/src/runtime/components/Footer.vue
+++ b/src/runtime/components/Footer.vue
@@ -29,43 +29,44 @@ export interface FooterSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UContainer from './Container.vue'
 
-const props = withDefaults(defineProps<FooterProps>(), {
+const _props = withDefaults(defineProps<FooterProps>(), {
   as: 'footer'
 })
 const slots = defineSlots<FooterSlots>()
 
+const props = useComponentProps('footer', _props)
+
 const appConfig = useAppConfig() as Footer['AppConfig']
-const uiProp = useComponentUI('footer', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footer || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
       <slot name="top" />
     </div>
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="right" />
       </div>
 
-      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
-      <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
         <slot name="left" />
       </div>
     </UContainer>
 
-    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: uiProp?.bottom })">
+    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom })">
       <slot name="bottom" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/FooterColumns.vue b/src/runtime/components/FooterColumns.vue
index 22036deacf..20d161f900 100644
--- a/src/runtime/components/FooterColumns.vue
+++ b/src/runtime/components/FooterColumns.vue
@@ -51,55 +51,56 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { pickLinkProps } from '../utils/link'
 import { tv } from '../utils/tv'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<FooterColumnsProps<T>>(), {
+const _props = withDefaults(defineProps<FooterColumnsProps<T>>(), {
   as: 'nav'
 })
 const slots = defineSlots<FooterColumnsSlots<T>>()
 
+const props = useComponentProps<FooterColumnsProps<T>>('footerColumns', _props)
+
 const appConfig = useAppConfig() as FooterColumns['AppConfig']
-const uiProp = useComponentUI('footerColumns', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footerColumns || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: uiProp?.left })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </div>
 
-    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="ui.center({ class: uiProp?.center })">
+    <div v-if="!!slots.default || props.columns?.length" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot>
-        <div v-for="(column, index) in columns" :key="index">
-          <h3 data-slot="label" :class="ui.label({ class: uiProp?.label })">
+        <div v-for="(column, index) in props.columns" :key="index">
+          <h3 data-slot="label" :class="ui.label({ class: props.ui?.label })">
             <slot name="column-label" :column="column">
               {{ column.label }}
             </slot>
           </h3>
 
-          <ul data-slot="list" :class="ui.list({ class: uiProp?.list })">
-            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item] })">
+          <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active })">
+                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
                   <slot name="link" :link="(link as T)" :active="active" :ui="ui">
                     <slot name="link-leading" :link="(link as T)" :active="active" :ui="ui">
-                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 
-                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, link.ui?.linkLabel], active })">
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                       <slot name="link-label" :link="(link as T)" :active="active">
                         {{ (link as T).label }}
                       </slot>
 
-                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
                     </span>
 
                     <slot name="link-trailing" :link="(link as T)" :active="active" />
@@ -112,7 +113,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footerColumn
       </slot>
     </div>
 
-    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
index b6687784d9..6bad418c4b 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -81,14 +81,14 @@ import { useEventBus } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formStateInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { validateSchema, getAtPath, setAtPath } from '../utils/form'
 import { FormValidationException } from '../types/form'
 
 type I = InferInput<S>
 type O = InferOutput<S>
 
-const props = withDefaults(defineProps<FormProps<S, T, N>>(), {
+const _props = withDefaults(defineProps<FormProps<S, T, N>>(), {
   validateOn() {
     return ['input', 'blur', 'change'] as FormInputEvents[]
   },
@@ -100,8 +100,9 @@ const props = withDefaults(defineProps<FormProps<S, T, N>>(), {
 const emits = defineEmits<FormEmits<S, T>>()
 defineSlots<FormSlots>()
 
+const props = useComponentProps<FormProps<S, T, N>>('form', _props)
+
 const appConfig = useAppConfig() as FormConfig['AppConfig']
-const uiProp = useComponentUI('form', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.form || {}) }))
@@ -117,6 +118,7 @@ const parentBus = props.nested === true && inject(
 )
 
 const parentState = props.nested === true ? inject(formStateInjectionKey, undefined) : undefined
+// eslint-disable-next-line vue/no-dupe-keys
 const state = computed(() => {
   if (parentState?.value) {
     return props.name ? getAtPath(parentState.value, props.name) : parentState.value
@@ -265,7 +267,7 @@ const loading = ref(false)
 provide(formLoadingInjectionKey, readonly(loading))
 
 async function onSubmitWrapper(payload: Event) {
-  loading.value = props.loadingAuto && true
+  loading.value = !!props.loadingAuto
 
   const event = payload as FormSubmitEvent<FormData<S, T>>
 
@@ -288,6 +290,7 @@ async function onSubmitWrapper(payload: Event) {
   }
 }
 
+// eslint-disable-next-line vue/no-dupe-keys
 const disabled = computed(() => props.disabled || loading.value)
 
 provide(formOptionsInjectionKey, computed(() => ({
@@ -459,7 +462,7 @@ defineExpose(api)
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
     ref="formRef"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"
   >
     <slot :errors="errors" :loading="loading" />
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index 6f5843576c..26aad162af 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -56,19 +56,22 @@ export interface FormFieldSlots {
 import { computed, ref, inject, provide, useId, watch } from 'vue'
 import { Primitive, Label } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
 import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
-const props = withDefaults(defineProps<FormFieldProps>(), {
-  error: undefined
+const _props = withDefaults(defineProps<FormFieldProps>(), {
+  error: undefined,
+  orientation: 'vertical'
 })
 const slots = defineSlots<FormFieldSlots>()
 
+const props = useComponentProps('formField', _props)
+
 const appConfig = useAppConfig() as FormField['AppConfig']
-const uiProp = useComponentUI('formField', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
   size: props.size,
   required: props.required,
@@ -77,6 +80,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField ||
 
 const formErrors = inject<Ref<FormError[]> | null>(formErrorsInjectionKey, null)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name || (props.errorPattern && error.name?.match(props.errorPattern)))?.message)
 
 const id = ref(useId())
@@ -108,38 +112,38 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: uiProp?.labelWrapper })">
-        <Label :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-          <slot name="label" :label="label">
-            {{ label }}
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="props.label">
+            {{ props.label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: uiProp?.hint })">
-          <slot name="hint" :hint="hint">
-            {{ hint }}
+        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="props.hint">
+            {{ props.hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
+      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
         </slot>
       </p>
     </div>
 
-    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: uiProp?.container })]">
+    <div :class="[(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
-      <div v-if="props.error !== false && ((typeof error === 'string' && error) || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: uiProp?.error })">
+      <div v-if="props.error !== false && ((typeof error === 'string' && error) || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: uiProp?.help })">
-        <slot name="help" :help="help">
-          {{ help }}
+      <div v-else-if="props.help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="props.help">
+          {{ props.help }}
         </slot>
       </div>
     </div>
diff --git a/src/runtime/components/Header.vue b/src/runtime/components/Header.vue
index 39d89cb4d5..116e5a1ed4 100644
--- a/src/runtime/components/Header.vue
+++ b/src/runtime/components/Header.vue
@@ -65,7 +65,7 @@ import { Primitive } from 'reka-ui'
 import { defu } from 'defu'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig, useRoute } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { getSlotChildrenText } from '../utils'
 import { tv } from '../utils/tv'
@@ -78,7 +78,7 @@ import UDrawer from './Drawer.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<HeaderProps<T>>(), {
+const _props = withDefaults(defineProps<HeaderProps<T>>(), {
   as: 'header',
   mode: 'modal' as never,
   autoClose: true,
@@ -89,12 +89,13 @@ const props = withDefaults(defineProps<HeaderProps<T>>(), {
 })
 const slots = defineSlots<HeaderSlots>()
 
+const props = useComponentProps<HeaderProps<T>>('header', _props)
+
 const open = defineModel<boolean>('open', { default: false })
 
 const route = useRoute()
 const { t } = useLocale()
 const appConfig = useAppConfig() as Header['AppConfig']
-const uiProp = useComponentUI('header', props)
 
 const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate()
 const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate()
@@ -131,27 +132,27 @@ function toggleOpen() {
   <DefineToggleTemplate>
     <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UButton
-        v-if="toggle"
+        v-if="props.toggle"
         color="neutral"
         variant="ghost"
         :aria-label="open ? t('header.close') : t('header.open')"
         :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
-        v-bind="(typeof toggle === 'object' ? toggle : {})"
+        v-bind="(typeof props.toggle === 'object' ? props.toggle : {})"
         data-slot="toggle"
-        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
         @click="toggleOpen"
       />
     </slot>
   </DefineToggleTemplate>
 
   <DefineLeftTemplate>
-    <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
-      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />
 
       <slot name="left">
-        <ULink :to="to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <ULink :to="props.to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </ULink>
       </slot>
@@ -159,20 +160,20 @@ function toggleOpen() {
   </DefineLeftTemplate>
 
   <DefineRightTemplate>
-    <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
 
-      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <ReuseLeftTemplate />
 
-      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
@@ -188,19 +189,19 @@ function toggleOpen() {
     :description="t('header.description')"
     v-bind="menuProps"
     :ui="{
-      overlay: ui.overlay({ class: uiProp?.overlay }),
-      content: ui.content({ class: uiProp?.content })
+      overlay: ui.overlay({ class: props.ui?.overlay }),
+      content: ui.content({ class: props.ui?.content })
     }"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="mode !== 'drawer'" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+        <div v-if="props.mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <ReuseLeftTemplate />
 
           <ReuseRightTemplate />
         </div>
 
-        <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
       </slot>
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 904d558a5a..b6e58a6ece 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -70,7 +70,7 @@ import { useTemplateRef, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -81,7 +81,7 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputProps<T, Mod>>(), {
+const _props = withDefaults(defineProps<InputProps<T, Mod>>(), {
   type: 'text',
   autocomplete: 'off',
   autofocusDelay: 0
@@ -89,24 +89,27 @@ const props = withDefaults(defineProps<InputProps<T, Mod>>(), {
 const emits = defineEmits<InputEmits<T, Mod>>()
 const slots = defineSlots<InputSlots>()
 
+const props = useComponentProps<InputProps<T, Mod>>('input', _props)
+
+// eslint-disable-next-line vue/no-dupe-keys
 const modelValue = useVModel<InputProps<T, Mod>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
 
 const appConfig = useAppConfig() as Input['AppConfig']
-const uiProp = useComponentUI('input', props)
 
-const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps<T>>(props, { deferInputValidation: true })
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps<T>>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps<T>>(_props, { deferInputValidation: true })
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps<T>>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })({
   type: props.type as Input['variants']['type'],
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize?.value,
+  size: inputSize?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -182,19 +185,19 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
       :id="id"
       ref="inputRef"
-      :type="type"
+      :type="props.type"
       :value="modelValue"
       :name="name"
-      :placeholder="placeholder"
+      :placeholder="props.placeholder"
       data-slot="base"
-      :class="ui.base({ class: uiProp?.base })"
+      :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
-      :required="required"
-      :autocomplete="autocomplete"
+      :required="props.required"
+      :autocomplete="props.autocomplete"
       v-bind="{ ...$attrs, ...ariaAttrs }"
       @input="onInput"
       @blur="onBlur"
@@ -204,16 +207,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>
diff --git a/src/runtime/components/InputDate.vue b/src/runtime/components/InputDate.vue
index 4f311fd536..e9603fd4f5 100644
--- a/src/runtime/components/InputDate.vue
+++ b/src/runtime/components/InputDate.vue
@@ -70,11 +70,12 @@ export interface InputDateSlots {
 
 <script setup lang="ts" generic="R extends boolean">
 import { computed, onMounted, ref } from 'vue'
-import { useForwardPropsEmits } from 'reka-ui'
+import { } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { DateField as SingleDateField, DateRangeField as RangeDateField } from 'reka-ui/namespaced'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -84,18 +85,19 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputDateProps<R>>(), {
+const _props = withDefaults(defineProps<InputDateProps<R>>(), {
   autofocusDelay: 0
 })
 const emits = defineEmits<InputDateEmits<R>>()
 const slots = defineSlots<InputDateSlots>()
 
+const props = useComponentProps<InputDateProps<R>>('inputDate', _props)
+
 const appConfig = useAppConfig() as InputDate['AppConfig']
-const uiProp = useComponentUI('inputDate', props)
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'id', 'name', 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'fixed', 'disabled', 'autofocus', 'autofocusDelay', 'icon', 'avatar', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'separatorIcon', 'class', 'ui'), emits)
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputDateProps<R>>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputDateProps<R>>(props)
+const rootProps = useForwardProps(reactiveOmit(props, 'id', 'name', 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'fixed', 'disabled', 'autofocus', 'autofocusDelay', 'icon', 'avatar', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'separatorIcon', 'class', 'ui'), emits)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputDateProps<R>>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputDateProps<R>>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate<{
@@ -105,11 +107,12 @@ const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate<{
 
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputDate || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize.value,
-  highlight: highlight.value,
+  size: inputSize.value ?? props.size,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   loading: props.loading,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -171,7 +174,7 @@ defineExpose({
       :type="type"
       :part="segment.part"
       data-slot="segment"
-      :class="ui.segment({ class: uiProp?.segment })"
+      :class="ui.segment({ class: props.ui?.segment })"
       :data-segment="segment.part"
     >
       {{ segment.value.trim() }}
@@ -182,12 +185,12 @@ defineExpose({
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :id="id"
     v-slot="{ segments }"
-    :model-value="(modelValue as DateValue)"
-    :default-value="(defaultValue as DateValue)"
+    :model-value="(props.modelValue as DateValue)"
+    :default-value="(props.defaultValue as DateValue)"
     :name="name"
     :disabled="disabled"
     data-slot="base"
-    :class="ui.base({ class: [uiProp?.base, props.class] })"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
     @focus="onFocus"
@@ -198,23 +201,23 @@ defineExpose({
     <template v-else>
       <ReuseSegmentsTemplate :segments="segments.start" type="start" />
       <slot name="separator" :ui="ui">
-        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: uiProp?.separatorIcon })" />
+        <UIcon :name="props.separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
       </slot>
       <ReuseSegmentsTemplate :segments="segments.end" type="end" />
     </template>
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </DateField.Root>
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 8bdb7cb706..7e01812efd 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -231,13 +231,14 @@ export interface InputMenuSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false">
 import { computed, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from 'vue'
-import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'reka-ui'
+import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { Combobox, Autocomplete } from 'reka-ui/namespaced'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
 import { reactivePick, reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup, FieldGroupReset } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -254,7 +255,7 @@ import UChip from './Chip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputMenuProps<T, VK, M, Mod, C>>(), {
+const _props = withDefaults(defineProps<InputMenuProps<T, VK, M, Mod, C>>(), {
   type: 'text',
   autofocusDelay: 0,
   portal: true,
@@ -268,15 +269,16 @@ const props = withDefaults(defineProps<InputMenuProps<T, VK, M, Mod, C>>(), {
 const emits = defineEmits<InputMenuEmits<T, VK, M, Mod, C>>()
 const slots = defineSlots<InputMenuSlots<T, VK, M, Mod, C>>()
 
+const props = useComponentProps<InputMenuProps<T, VK, M, Mod, C>>('inputMenu', _props)
+
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as InputMenu['AppConfig']
-const uiProp = useComponentUI('inputMenu', props)
 const { filterGroups } = useFilter()
 
 const rootPropsPick = reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'highlightOnHover', 'openOnClick', 'openOnFocus', 'by')
-const rootProps = useForwardPropsEmits(props.autocomplete ? reactiveOmit(rootPropsPick, 'multiple', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'by') : rootPropsPick, emits)
+const rootProps = useForwardProps(props.autocomplete ? reactiveOmit(rootPropsPick, 'multiple', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'by') : rootPropsPick, emits)
 const Component = computed(() => props.autocomplete ? Autocomplete : Combobox)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
@@ -290,8 +292,8 @@ const virtualizerProps = toRef(() => {
   })
 })
 
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
@@ -310,12 +312,13 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: I
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputMenu || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize?.value,
+  size: inputSize?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -357,6 +360,7 @@ const filteredGroups = computed(() => {
 })
 const filteredItems = computed(() => filteredGroups.value.flatMap(group => group))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const createItem = computed(() => {
   if (!props.createItem || !searchTerm.value) {
     return false
@@ -533,11 +537,11 @@ defineExpose({
   <DefineCreateItemTemplate>
     <Component.Item
       data-slot="item"
-      :class="ui.item({ class: uiProp?.item })"
+      :class="ui.item({ class: props.ui?.item })"
       :value="searchTerm"
       @select="onCreate"
     >
-      <span data-slot="itemLabel" :class="ui.itemLabel({ class: uiProp?.itemLabel })">
+      <span data-slot="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           {{ t('inputMenu.create', { label: searchTerm }) }}
         </slot>
@@ -546,54 +550,54 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <DefineItemTemplate v-slot="{ item, index }">
-    <Component.Label v-if="isInputItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+    <Component.Label v-if="isInputItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
       {{ get(item, props.labelKey as string) }}
     </Component.Label>
 
-    <Component.Separator v-else-if="isInputItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+    <Component.Separator v-else-if="isInputItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
     <Component.Item
       v-else
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
+      :class="ui.item({ class: [props.ui?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
       :disabled="isInputItem(item) && item.disabled"
       :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey as string) : item"
       @select="onSelect($event, item)"
     >
       <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
         <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-          <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-          <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
             v-else-if="isInputItem(item) && item.chip"
-            :size="((item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+            :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
             inset
             standalone
             v-bind="item.chip"
             data-slot="itemLeadingChip"
-            :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+            :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
           />
         </slot>
 
-        <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, isInputItem(item) && item.ui?.itemWrapper] })">
-          <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
+        <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isInputItem(item) && item.ui?.itemWrapper] })">
+          <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
             <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
               {{ isInputItem(item) ? get(item, props.labelKey as string) : item }}
             </slot>
           </span>
 
-          <span v-if="isInputItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, isInputItem(item) && item.ui?.itemDescription] })">
+          <span v-if="isInputItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isInputItem(item) && item.ui?.itemDescription] })">
             <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
               {{ get(item, props.descriptionKey as string) }}
             </slot>
           </span>
         </span>
 
-        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
           <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
-          <Component.ItemIndicator v-if="!autocomplete" as-child>
-            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
+          <Component.ItemIndicator v-if="!props.autocomplete" as-child>
+            <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
           </Component.ItemIndicator>
         </span>
       </slot>
@@ -606,35 +610,35 @@ defineExpose({
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
-    :as-child="!!multiple && !autocomplete"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :as-child="!!props.multiple && !props.autocomplete"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <Component.Anchor :as-child="!multiple" data-slot="base" :class="ui.base({ class: uiProp?.base })">
+    <Component.Anchor :as-child="!props.multiple" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <TagsInputRoot
-        v-if="multiple && !autocomplete"
+        v-if="props.multiple && !props.autocomplete"
         v-slot="{ modelValue: tags }"
         :model-value="(modelValue as string[])"
         :disabled="disabled"
-        :required="required"
+        :required="props.required"
         delimiter=""
         as-child
         @blur="onBlur"
         @focus="onFocus"
         @remove-tag="onRemoveTag($event, modelValue as GetModelValue<T, VK, true, ExcludeItem>)"
       >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" data-slot="tagsItem" :class="ui.tagsItem({ class: [uiProp?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
-          <TagsInputItemText data-slot="tagsItemText" :class="ui.tagsItemText({ class: [uiProp?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" data-slot="tagsItem" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+          <TagsInputItemText data-slot="tagsItemText" :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">
               {{ displayValue(item as GetItemValue<T, VK, ExcludeItem>) }}
             </slot>
           </TagsInputItemText>
 
-          <TagsInputItemDelete data-slot="tagsItemDelete" :class="ui.tagsItemDelete({ class: [uiProp?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
+          <TagsInputItemDelete data-slot="tagsItemDelete" :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
             <slot name="tags-item-delete" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-              <UIcon :name="deleteIcon || appConfig.ui.icons.close" data-slot="tagsItemDeleteIcon" :class="ui.tagsItemDeleteIcon({ class: [uiProp?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
+              <UIcon :name="props.deleteIcon || appConfig.ui.icons.close" data-slot="tagsItemDeleteIcon" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
             </slot>
           </TagsInputItemDelete>
         </TagsInputItem>
@@ -644,9 +648,9 @@ defineExpose({
             :id="id"
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
-            :placeholder="placeholder"
+            :placeholder="props.placeholder"
             data-slot="tagsInput"
-            :class="ui.tagsInput({ class: uiProp?.tagsInput })"
+            :class="ui.tagsInput({ class: props.ui?.tagsInput })"
             @change.stop
           />
         </Component.Input>
@@ -656,58 +660,58 @@ defineExpose({
         v-else
         :id="id"
         ref="inputRef"
-        v-bind="{ ...(!autocomplete ? { displayValue } : {}), ...$attrs, ...ariaAttrs }"
-        :type="type"
-        :placeholder="placeholder"
-        :required="required"
+        v-bind="{ ...(!props.autocomplete ? { displayValue } : {}), ...$attrs, ...ariaAttrs }"
+        :type="props.type"
+        :placeholder="props.placeholder"
+        :required="props.required"
         @blur="onBlur"
         @focus="onFocus"
         @change.stop
         @update:model-value="onInputUpdate"
       />
 
-      <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+      <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: uiProp?.itemLeadingAvatar })" />
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
         </slot>
       </span>
 
-      <Component.Trigger v-if="isTrailing || !!slots.trailing || !!clear" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+      <Component.Trigger v-if="isTrailing || !!slots.trailing || !!props.clear" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
         <slot name="trailing" :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-          <Component.Cancel v-if="!!clear && !isModelValueEmpty(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" as-child>
+          <Component.Cancel v-if="!!props.clear && !isModelValueEmpty(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" as-child>
             <UButton
               as="span"
-              :icon="clearIcon || appConfig.ui.icons.close"
+              :icon="props.clearIcon || appConfig.ui.icons.close"
               :size="inputSize"
               variant="link"
               color="neutral"
               tabindex="-1"
               v-bind="clearProps"
               data-slot="trailingClear"
-              :class="ui.trailingClear({ class: uiProp?.trailingClear })"
+              :class="ui.trailingClear({ class: props.ui?.trailingClear })"
               @click.stop="onClear"
             />
           </Component.Cancel>
 
-          <UIcon v-else-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+          <UIcon v-else-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
         </slot>
       </Component.Trigger>
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
       <FieldGroupReset>
-        <Component.Content data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps" @focus-outside.prevent>
+        <Component.Content data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps" @focus-outside.prevent>
           <slot name="content-top" />
 
-          <Component.Empty data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+          <Component.Empty data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty" :search-term="searchTerm">
               {{ searchTerm ? t('inputMenu.noMatch', { searchTerm }) : t('inputMenu.noData') }}
             </slot>
           </Component.Empty>
 
-          <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-            <template v-if="!!virtualize">
+          <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+            <template v-if="!!props.virtualize">
               <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
               <Component.Virtualizer
@@ -723,15 +727,15 @@ defineExpose({
             </template>
 
             <template v-else>
-              <Component.Group v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+              <Component.Group v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                 <ReuseCreateItemTemplate />
               </Component.Group>
 
-              <Component.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+              <Component.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                 <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
               </Component.Group>
 
-              <Component.Group v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+              <Component.Group v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                 <ReuseCreateItemTemplate />
               </Component.Group>
             </template>
@@ -739,7 +743,7 @@ defineExpose({
 
           <slot name="content-bottom" />
 
-          <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+          <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
         </Component.Content>
       </FieldGroupReset>
     </Component.Portal>
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index 0acc48cc96..b62397ad2c 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -85,10 +85,11 @@ export interface InputNumberSlots {
 
 <script setup lang="ts" generic="T extends InputNumberValue = InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'> = Pick<ModelModifiers, 'optional'>">
 import { onMounted, computed, useTemplateRef, toRef } from 'vue'
-import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
+import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick, useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useFormField } from '../composables/useFormField'
 import { useLocale } from '../composables/useLocale'
@@ -97,32 +98,36 @@ import UButton from './Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputNumberProps<T, Mod>>(), {
+const _props = withDefaults(defineProps<InputNumberProps<T, Mod>>(), {
   orientation: 'horizontal',
   increment: true,
   decrement: true
 })
 const emits = defineEmits<InputNumberEmits<T, Mod>>()
+
 defineSlots<InputNumberSlots>()
 
+const props = useComponentProps<InputNumberProps<T, Mod>>('inputNumber', _props)
+
+// eslint-disable-next-line vue/no-dupe-keys
 const modelValue = useVModel<InputNumberProps<T, Mod>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as InputNumber['AppConfig']
-const uiProp = useComponentUI('inputNumber', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange', 'required', 'readonly', 'focusOnChange'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange', 'required', 'readonly', 'focusOnChange'), emits)
 
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps<T, Mod>>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputNumberProps<T, Mod>>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps<T, Mod>>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputNumberProps<T, Mod>>(_props)
 
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize.value,
-  highlight: highlight.value,
+  size: inputSize.value ?? props.size,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   orientation: props.orientation,
   fieldGroup: orientation.value,
@@ -130,7 +135,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
   decrement: props.orientation === 'vertical' ? false : !!props.decrement
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
+// eslint-disable-next-line vue/no-dupe-keys
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown))
 
 const inputRef = useTemplateRef('inputRef')
@@ -174,13 +181,13 @@ defineExpose({
   <NumberFieldRoot
     v-bind="rootProps"
     :id="id"
-    :default-value="defaultValue"
+    :default-value="props.defaultValue"
     :model-value="modelValue"
-    :min="min"
-    :max="max"
-    :step="step"
+    :min="props.min"
+    :max="props.max"
+    :step="props.step"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"
     @update:model-value="(val) => onUpdate(val as ApplyModifiers<T, Mod>)"
@@ -188,16 +195,16 @@ defineExpose({
     <NumberFieldInput
       v-bind="{ ...$attrs, ...ariaAttrs }"
       ref="inputRef"
-      :placeholder="placeholder"
-      :required="required"
+      :placeholder="props.placeholder"
+      :required="props.required"
       data-slot="base"
-      :class="ui.base({ class: uiProp?.base })"
+      :class="ui.base({ class: props.ui?.base })"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div v-if="!!increment" data-slot="increment" :class="ui.increment({ class: uiProp?.increment })">
-      <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
+    <div v-if="!!props.increment" data-slot="increment" :class="ui.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="disabled || props.incrementDisabled">
         <slot name="increment">
           <UButton
             :icon="incrementIcon"
@@ -205,14 +212,14 @@ defineExpose({
             :size="inputSize"
             variant="link"
             :aria-label="t('inputNumber.increment')"
-            v-bind="typeof increment === 'object' ? increment : undefined"
+            v-bind="typeof props.increment === 'object' ? props.increment : undefined"
           />
         </slot>
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="!!decrement" data-slot="decrement" :class="ui.decrement({ class: uiProp?.decrement })">
-      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
+    <div v-if="!!props.decrement" data-slot="decrement" :class="ui.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="disabled || props.decrementDisabled">
         <slot name="decrement">
           <UButton
             :icon="decrementIcon"
@@ -220,7 +227,7 @@ defineExpose({
             :size="inputSize"
             variant="link"
             :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof decrement === 'object' ? decrement : undefined"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
           />
         </slot>
       </NumberFieldDecrement>
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index 82469413ad..934ec62973 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -69,10 +69,11 @@ export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
 
 <script setup lang="ts" generic="T extends InputTagItem">
 import { computed, useTemplateRef, onMounted, toRaw, toRef } from 'vue'
-import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'reka-ui'
+import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -82,30 +83,32 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputTagsProps<T>>(), {
+const _props = withDefaults(defineProps<InputTagsProps<T>>(), {
   type: 'text',
   autofocusDelay: 0
 })
 const emits = defineEmits<InputTagsEmits<T>>()
 const slots = defineSlots<InputTagsSlots<T>>()
 
+const props = useComponentProps<InputTagsProps<T>>('inputTags', _props)
+
 const appConfig = useAppConfig() as InputTags['AppConfig']
-const uiProp = useComponentUI('inputTags', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'addOnPaste', 'addOnTab', 'addOnBlur', 'duplicate', 'delimiter', 'max', 'convertValue', 'displayValue', 'required'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'addOnPaste', 'addOnTab', 'addOnBlur', 'duplicate', 'delimiter', 'max', 'convertValue', 'displayValue', 'required'), emits)
 
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputTagsProps>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputTagsProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputTagsProps>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputTagsProps>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTags || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize?.value,
+  size: inputSize?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -157,10 +160,10 @@ defineExpose({
   <TagsInputRoot
     :id="id"
     v-slot="{ modelValue: tags }"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [ui.base({ class: uiProp?.base }), uiProp?.root, props.class] })"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
@@ -171,19 +174,19 @@ defineExpose({
       :key="index"
       :value="item"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item] })"
+      :class="ui.item({ class: [props.ui?.item] })"
     >
-      <TagsInputItemText data-slot="itemText" :class="ui.itemText({ class: [uiProp?.itemText] })">
+      <TagsInputItemText data-slot="itemText" :class="ui.itemText({ class: [props.ui?.itemText] })">
         <slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" :ui="ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
         data-slot="itemDelete"
-        :class="ui.itemDelete({ class: [uiProp?.itemDelete] })"
+        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
         :disabled="disabled"
       >
         <slot name="item-delete" :item="(item as T)" :index="index" :ui="ui">
-          <UIcon :name="deleteIcon || appConfig.ui.icons.close" data-slot="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: [uiProp?.itemDeleteIcon] })" />
+          <UIcon :name="props.deleteIcon || appConfig.ui.icons.close" data-slot="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
         </slot>
       </TagsInputItemDelete>
     </TagsInputItem>
@@ -191,26 +194,26 @@ defineExpose({
     <TagsInputInput
       ref="inputRef"
       v-bind="{ ...$attrs, ...ariaAttrs }"
-      :placeholder="placeholder"
-      :max-length="maxLength"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
       data-slot="input"
-      :class="ui.input({ class: uiProp?.input })"
+      :class="ui.input({ class: props.ui?.input })"
       @blur="onBlur"
       @focus="onFocus"
     />
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TagsInputRoot>
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 08feed9568..f94ac92db1 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -80,11 +80,12 @@ export interface InputTimeSlots {
 
 <script setup lang="ts" generic="R extends boolean">
 import { computed, onMounted, ref } from 'vue'
-import { TimeRangeFieldRoot, TimeRangeFieldInput, useForwardPropsEmits } from 'reka-ui'
+import { TimeRangeFieldRoot, TimeRangeFieldInput } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { TimeField as SingleTimeField } from 'reka-ui/namespaced'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -94,29 +95,31 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputTimeProps<R>>(), {
+const _props = withDefaults(defineProps<InputTimeProps<R>>(), {
   autofocusDelay: 0
 })
 const emits = defineEmits<InputTimeEmits<R>>()
 const slots = defineSlots<InputTimeSlots>()
 
+const props = useComponentProps<InputTimeProps<R>>('inputTime', _props)
+
 const appConfig = useAppConfig() as InputTime['AppConfig']
-const uiProp = useComponentUI('inputTime', props)
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'id', 'name', 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'fixed', 'disabled', 'autofocus', 'autofocusDelay', 'icon', 'avatar', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'separatorIcon', 'class', 'ui'), emits)
+const rootProps = useForwardProps(reactiveOmit(props, 'id', 'name', 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'fixed', 'disabled', 'autofocus', 'autofocusDelay', 'icon', 'avatar', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'separatorIcon', 'class', 'ui'), emits)
 
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps<R>>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps<R>>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps<R>>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps<R>>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTime || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize.value,
+  size: inputSize.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -185,7 +188,7 @@ defineExpose({
       :type="type"
       :part="segment.part"
       data-slot="segment"
-      :class="ui.segment({ class: uiProp?.segment })"
+      :class="ui.segment({ class: props.ui?.segment })"
       :data-segment="segment.part"
     >
       {{ segment.value.trim() }}
@@ -198,10 +201,10 @@ defineExpose({
     v-slot="{ segments }"
     :name="name"
     :disabled="disabled"
-    :model-value="(modelValue as TimeValue)"
-    :default-value="(defaultValue as TimeValue)"
+    :model-value="(props.modelValue as TimeValue)"
+    :default-value="(props.defaultValue as TimeValue)"
     data-slot="base"
-    :class="ui.base({ class: [uiProp?.base, props.class] })"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
     @focus="onFocus"
@@ -212,23 +215,23 @@ defineExpose({
     <template v-else>
       <ReuseSegmentsTemplate :segments="segments.start" type="start" />
       <slot name="separator" :ui="ui">
-        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: uiProp?.separatorIcon })" />
+        <UIcon :name="props.separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
       </slot>
       <ReuseSegmentsTemplate :segments="segments.end" type="end" />
     </template>
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TimeField.Root>
diff --git a/src/runtime/components/Kbd.vue b/src/runtime/components/Kbd.vue
index 178d867c40..3b777ac653 100644
--- a/src/runtime/components/Kbd.vue
+++ b/src/runtime/components/Kbd.vue
@@ -40,26 +40,28 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useKbd } from '../composables/useKbd'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<KbdProps>(), {
+const _props = withDefaults(defineProps<KbdProps>(), {
   as: 'kbd'
 })
+
 defineSlots<KbdSlots>()
 
+const props = useComponentProps('kbd', _props)
+
 const { getKbdKey } = useKbd()
 const appConfig = useAppConfig() as Kbd['AppConfig']
-const uiProp = useComponentUI('kbd', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class], color: props.color, variant: props.variant, size: props.size })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class], color: props.color, variant: props.variant, size: props.size })">
     <slot>
-      {{ getKbdKey(value) }}
+      {{ getKbdKey(props.value) }}
     </slot>
   </Primitive>
 </template>
diff --git a/src/runtime/components/Listbox.vue b/src/runtime/components/Listbox.vue
index 14aa1a2a85..4bff57e533 100644
--- a/src/runtime/components/Listbox.vue
+++ b/src/runtime/components/Listbox.vue
@@ -40,6 +40,10 @@ export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNest
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: Listbox['variants']['color']
   /**
    * @defaultValue 'md'
    */
@@ -154,11 +158,12 @@ export type ListboxSlots<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<Li
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>">
-import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter, useForwardPropsEmits } from 'reka-ui'
+import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { createReusableTemplate, reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFilter } from '../composables/useFilter'
 import { useFormField } from '../composables/useFormField'
 import { useLocale } from '../composables/useLocale'
@@ -172,7 +177,7 @@ import UInput from './Input.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ListboxProps<T, VK, M, Mod>>(), {
+const _props = withDefaults(defineProps<ListboxProps<T, VK, M, Mod>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   highlightOnHover: true,
@@ -183,14 +188,15 @@ const props = withDefaults(defineProps<ListboxProps<T, VK, M, Mod>>(), {
 const emits = defineEmits<ListboxEmits<T, VK, M, Mod>>()
 const slots = defineSlots<ListboxSlots<T>>()
 
+const props = useComponentProps<ListboxProps<T, VK, M, Mod>>('listbox', _props)
+
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as Listbox['AppConfig']
-const uiProp = useComponentUI('listbox', props)
 const { filterGroups } = useFilter()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'multiple', 'selectionBehavior', 'highlightOnHover', 'by', 'orientation', 'required'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'multiple', 'selectionBehavior', 'highlightOnHover', 'by', 'orientation', 'required'), emits)
 
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false
@@ -201,7 +207,7 @@ const virtualizerProps = toRef(() => {
 })
 const inputProps = toRef(() => defu(typeof props.filter === 'object' ? props.filter : {}, { placeholder: t('listbox.search'), variant: 'none' }) as Omit<InputProps, 'modelValue' | 'defaultValue'>)
 
-const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props, { bind: false })
+const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField<InputProps>(_props, { bind: false })
 
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ListboxItem, index: number }>({
   props: {
@@ -216,10 +222,11 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: L
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.listbox || {}) })({
-  color: color.value,
-  size: size.value,
-  highlight: highlight.value,
+  color: color.value ?? props.color,
+  size: size.value ?? props.size,
+  highlight: highlight.value ?? props.highlight,
   disabled: disabled.value,
   virtualize: !!props.virtualize
 }))
@@ -291,54 +298,54 @@ const filteredItems = computed(() => filteredGroups.value.flatMap(group => group
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
   <DefineItemTemplate v-slot="{ item, index }">
-    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
       {{ get(item, props.labelKey as string) }}
     </ListboxGroupLabel>
 
-    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
     <RekaListboxItem
       v-else
       :value="props.valueKey ? get(item, props.valueKey as string) : item"
       :disabled="item.disabled"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       @select="onSelect($event, item)"
     >
       <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
         <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
             v-else-if="item.chip"
-            :size="((item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+            :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
             inset
             standalone
             v-bind="item.chip"
             data-slot="itemLeadingChip"
-            :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+            :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
           />
         </slot>
 
-        <span v-if="get(item, props.labelKey as string) || get(item, props.descriptionKey as string) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
-          <span v-if="get(item, props.labelKey as string) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel] })">
+        <span v-if="get(item, props.labelKey as string) || get(item, props.descriptionKey as string) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+          <span v-if="get(item, props.labelKey as string) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel] })">
             <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
               {{ get(item, props.labelKey as string) }}
             </slot>
           </span>
 
-          <span v-if="get(item, props.descriptionKey as string) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+          <span v-if="get(item, props.descriptionKey as string) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
             <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
               {{ get(item, props.descriptionKey as string) }}
             </slot>
           </span>
         </span>
 
-        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
           <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
           <ListboxItemIndicator as-child>
-            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+            <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
           </ListboxItemIndicator>
         </span>
       </slot>
@@ -351,34 +358,34 @@ const filteredItems = computed(() => filteredGroups.value.flatMap(group => group
     :disabled="disabled"
     :name="name"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <ListboxFilter v-if="filter" v-model="searchTerm" as-child>
+    <ListboxFilter v-if="props.filter" v-model="searchTerm" as-child>
       <UInput
-        :autofocus="autofocus"
-        :autofocus-delay="autofocusDelay"
+        :autofocus="props.autofocus"
+        :autofocus-delay="props.autofocusDelay"
         :size="size"
         v-bind="inputProps"
         data-slot="input"
-        :class="ui.input({ class: uiProp?.input })"
+        :class="ui.input({ class: props.ui?.input })"
       />
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div v-if="loading" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="props.loading" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
         <slot name="loading">
-          <UIcon :name="loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: uiProp?.loadingIcon })" />
+          <UIcon :name="props.loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: props.ui?.loadingIcon })" />
         </slot>
       </div>
-      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t('listbox.noMatch', { searchTerm }) : t('listbox.noData') }}
         </slot>
       </div>
 
       <ListboxVirtualizer
-        v-else-if="!!virtualize"
+        v-else-if="!!props.virtualize"
         v-slot="{ option: item, virtualItem }"
         :options="(filteredItems as any[])"
         :text-content="(item: any) => get(item, props.labelKey as string)"
@@ -388,7 +395,7 @@ const filteredItems = computed(() => filteredGroups.value.flatMap(group => group
       </ListboxVirtualizer>
 
       <template v-else>
-        <ListboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+        <ListboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
           <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
         </ListboxGroup>
       </template>
diff --git a/src/runtime/components/Main.vue b/src/runtime/components/Main.vue
index 47f6117731..d8036e8ddd 100644
--- a/src/runtime/components/Main.vue
+++ b/src/runtime/components/Main.vue
@@ -26,22 +26,24 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 
-const props = withDefaults(defineProps<MainProps>(), {
+const _props = withDefaults(defineProps<MainProps>(), {
   as: 'main'
 })
+
 defineSlots<MainSlots>()
 
+const props = useComponentProps('main', _props)
+
 const appConfig = useAppConfig() as Main['AppConfig']
-const uiProp = useComponentUI('main', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.main || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/Marquee.vue b/src/runtime/components/Marquee.vue
index bd544d91b6..74957247c7 100644
--- a/src/runtime/components/Marquee.vue
+++ b/src/runtime/components/Marquee.vue
@@ -50,19 +50,22 @@ export interface MarqueeSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<MarqueeProps>(), {
+const _props = withDefaults(defineProps<MarqueeProps>(), {
   orientation: 'horizontal',
   repeat: 4,
   overlay: true
 })
+
 defineSlots<MarqueeSlots>()
 
+const props = useComponentProps('marquee', _props)
+
 const appConfig = useAppConfig() as Marquee['AppConfig']
-const uiProp = useComponentUI('marquee', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {}) })({
   pauseOnHover: props.pauseOnHover,
   orientation: props.orientation,
@@ -72,8 +75,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [uiProp?.content] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-for="i in props.repeat" :key="i" data-slot="content" :class="ui.content({ class: [props.ui?.content] })">
       <slot />
     </div>
   </Primitive>
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 7b805599d0..f5cfb5fd55 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -81,10 +81,11 @@ export interface ModalSlots {
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { FieldGroupReset } from '../composables/useFieldGroup'
 import { useLocale } from '../composables/useLocale'
 import { usePortal } from '../composables/usePortal'
@@ -92,7 +93,7 @@ import { pointerDownOutside } from '../utils/overlay'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<ModalProps>(), {
+const _props = withDefaults(defineProps<ModalProps>(), {
   close: true,
   portal: true,
   overlay: true,
@@ -103,11 +104,12 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emits = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
 
+const props = useComponentProps('modal', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
-const uiProp = useComponentUI('modal', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
@@ -130,6 +132,7 @@ const contentEvents = computed(() => {
 
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })({
   transition: props.transition,
   fullscreen: props.fullscreen,
@@ -144,41 +147,41 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
     <DefineContentTemplate>
       <DialogContent
         data-slot="content"
-        :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
         @after-leave="emits('after:leave')"
         v-on="contentEvents"
       >
-        <VisuallyHidden v-if="(!title && !slots.title) || (!description && !slots.description) || !!slots.content">
-          <DialogTitle v-if="!title && !slots.title" />
+        <VisuallyHidden v-if="(!props.title && !slots.title) || (!props.description && !slots.description) || !!slots.content">
+          <DialogTitle v-if="!props.title && !slots.title" />
           <DialogTitle v-else-if="!!slots.content">
             <slot name="title">
-              {{ title }}
+              {{ props.title }}
             </slot>
           </DialogTitle>
 
-          <DialogDescription v-if="!description && !slots.description" />
+          <DialogDescription v-if="!props.description && !slots.description" />
           <DialogDescription v-else-if="!!slots.content">
             <slot name="description">
-              {{ description }}
+              {{ props.description }}
             </slot>
           </DialogDescription>
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+          <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
             <slot name="header" :close="close">
-              <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+              <div v-if="props.title || !!slots.title || props.description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
-                    {{ title }}
+                    {{ props.title }}
                   </slot>
                 </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                <DialogDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                   <slot name="description">
-                    {{ description }}
+                    {{ props.description }}
                   </slot>
                 </DialogDescription>
               </div>
@@ -189,24 +192,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                 <slot name="close" :ui="ui">
                   <UButton
                     v-if="props.close"
-                    :icon="closeIcon || appConfig.ui.icons.close"
+                    :icon="props.closeIcon || appConfig.ui.icons.close"
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"
                     v-bind="(typeof props.close === 'object' ? props.close : {})"
                     data-slot="close"
-                    :class="ui.close({ class: uiProp?.close })"
+                    :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>
               </DialogClose>
             </slot>
           </div>
 
-          <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+          <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
             <slot name="body" :close="close" />
           </div>
 
-          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>
@@ -219,14 +222,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 
     <DialogPortal v-bind="portalProps">
       <FieldGroupReset>
-        <template v-if="scrollable">
-          <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })">
+        <template v-if="props.scrollable">
+          <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
             <ReuseContentTemplate />
           </DialogOverlay>
         </template>
 
         <template v-else>
-          <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+          <DialogOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
           <ReuseContentTemplate />
         </template>
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 877fbd2e79..0a9eb526d0 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -226,11 +226,12 @@ export type NavigationMenuSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation">
 import { computed, toRef } from 'vue'
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { get, isArrayOfArray } from '../utils'
 import { tv } from '../utils/tv'
 import { pickLinkProps } from '../utils/link'
@@ -245,7 +246,7 @@ import UTooltip from './Tooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<NavigationMenuProps<T, K, O>>(), {
+const _props = withDefaults(defineProps<NavigationMenuProps<T, K, O>>(), {
   orientation: 'horizontal' as never,
   contentOrientation: 'horizontal',
   externalIcon: true,
@@ -259,10 +260,11 @@ const props = withDefaults(defineProps<NavigationMenuProps<T, K, O>>(), {
 const emits = defineEmits<NavigationMenuEmits<K, O>>()
 const slots = defineSlots<NavigationMenuSlots<T>>()
 
+const props = useComponentProps<NavigationMenuProps<T, K, O>>('navigationMenu', _props)
+
 const appConfig = useAppConfig() as NavigationMenu['AppConfig']
-const uiProp = useComponentUI('navigationMenu', props)
 
-const rootProps = useForwardPropsEmits(computed(() => ({
+const rootProps = useForwardProps(computed(() => ({
   as: props.as,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
@@ -272,7 +274,7 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
 })), emits)
-const accordionProps = useForwardPropsEmits(reactivePick(props, 'collapsible', 'disabled', 'type', 'unmountOnHide'), emits)
+const accordionProps = useForwardProps(reactivePick(props, 'collapsible', 'disabled', 'type', 'unmountOnHide'), emits)
 const contentProps = toRef(() => props.content)
 const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} : props.tooltip, { ...(props.orientation === 'vertical' && { delayDuration: 0, content: { side: 'right' } }) }) as TooltipProps)
 const popoverProps = toRef(() => defu(typeof props.popover === 'boolean' ? {} : props.popover, { mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }) as PopoverProps)
@@ -287,6 +289,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: N
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })({
   orientation: props.orientation,
   contentOrientation: props.orientation === 'vertical' ? undefined : props.contentOrientation,
@@ -339,37 +342,37 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
   <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index" :active="active" :ui="ui">
       <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
-        <UAvatar v-if="item.avatar" :size="((item.ui?.linkLeadingAvatarSize || uiProp?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
+        <UAvatar v-if="item.avatar" :size="((item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
         <UChip
           v-else-if="item.icon && item.chip"
-          :size="((item.ui?.linkLeadingChipSize || uiProp?.linkLeadingChipSize || ui.linkLeadingChipSize()) as ChipProps['size'])"
+          :size="((item.ui?.linkLeadingChipSize || props.ui?.linkLeadingChipSize || ui.linkLeadingChipSize()) as ChipProps['size'])"
           inset
           v-bind="typeof item.chip === 'object' ? item.chip : {}"
           data-slot="linkLeadingChip"
         >
-          <UIcon :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
+          <UIcon :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
         </UChip>
-        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
       </slot>
 
       <span
         v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>]"
         data-slot="linkLabel"
-        :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })"
+        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
       >
         <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey as string) }}
         </slot>
 
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
+        <UIcon v-if="item.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
       </span>
 
       <component
-        :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
-        v-if="(item.badge || item.badge === 0) || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>]"
-        :as="orientation === 'vertical' && item.children?.length && !collapsed ? 'span' : undefined"
+        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
+        v-if="(item.badge || item.badge === 0) || (props.orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (props.orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>]"
+        :as="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? 'span' : undefined"
         data-slot="linkTrailing"
-        :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, item.ui?.linkTrailing] })"
+        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
         @click="(e: Event) => onLinkTrailingClick(e, item)"
       >
         <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
@@ -377,14 +380,14 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
             v-if="item.badge || item.badge === 0"
             color="neutral"
             variant="outline"
-            :size="((item.ui?.linkTrailingBadgeSize || uiProp?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+            :size="((item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
             v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
             data-slot="linkTrailingBadge"
-            :class="ui.linkTrailingBadge({ class: [uiProp?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
+            :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
           />
 
-          <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
-          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <UIcon v-if="(props.orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (props.orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
         </slot>
       </component>
     </slot>
@@ -392,24 +395,24 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
 
   <DefineItemTemplate v-slot="{ item, index, level = 0, listIndex = 0 }">
     <component
-      :is="(orientation === 'vertical' && !collapsed) ? AccordionItem : NavigationMenuItem"
+      :is="(props.orientation === 'vertical' && !props.collapsed) ? AccordionItem : NavigationMenuItem"
       as="li"
-      v-bind="(orientation === 'vertical' && !collapsed) ? { disabled: !!item.disabled } : {}"
+      v-bind="(props.orientation === 'vertical' && !props.collapsed) ? { disabled: !!item.disabled } : {}"
       :value="getItemValue(item, index, level, listIndex)"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+      <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger') ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger') ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((orientation === 'vertical' && item.children?.length && !collapsed && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
+          :is="(props.orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((props.orientation === 'vertical' && item.children?.length && !props.collapsed && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <UPopover v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...(typeof item.popover === 'boolean' ? {} : item.popover || {}) }" :ui="{ content: ui.content({ class: [uiProp?.content, item.ui?.content] }) }">
-            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+          <UPopover v-if="props.orientation === 'vertical' && props.collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...(typeof item.popover === 'boolean' ? {} : item.popover || {}) }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </ULinkBase>
 
@@ -422,20 +425,20 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
                 :ui="ui"
                 :close="close"
               >
-                <ul data-slot="childList" :class="ui.childList({ class: [uiProp?.childList, item.ui?.childList] })">
-                  <li data-slot="childLabel" :class="ui.childLabel({ class: [uiProp?.childLabel, item.ui?.childLabel] })">
+                <ul data-slot="childList" :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+                  <li data-slot="childLabel" :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
                     {{ get(item, props.labelKey as string) }}
                   </li>
-                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [uiProp?.childItem, item.ui?.childItem] })">
+                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                     <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                       <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                        <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [uiProp?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
-                          <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [uiProp?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
+                        <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                          <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                          <span data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [uiProp?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                          <span data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                             {{ get(childItem, props.labelKey as string) }}
 
-                            <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [uiProp?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                            <UIcon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                           </span>
                         </ULinkBase>
                       </NavigationMenuLink>
@@ -445,32 +448,32 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
               </slot>
             </template>
           </UPopover>
-          <UTooltip v-else-if="(orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)) || (orientation === 'horizontal' && !!item.tooltip)" :text="get(item, props.labelKey as string)" v-bind="{ ...tooltipProps, ...(typeof item.tooltip === 'boolean' ? {} : item.tooltip || {}) }">
-            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+          <UTooltip v-else-if="(props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip)) || (props.orientation === 'horizontal' && !!item.tooltip)" :text="get(item, props.labelKey as string)" v-bind="{ ...tooltipProps, ...(typeof item.tooltip === 'boolean' ? {} : item.tooltip || {}) }">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
             </ULinkBase>
           </UTooltip>
-          <ULinkBase v-else v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <ULinkBase v-else v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: props.orientation === 'horizontal' || level > 0 })">
             <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
           </ULinkBase>
         </component>
 
-        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content] })">
+        <NavigationMenuContent v-if="props.orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
           <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active || item.active" :index="index" :ui="ui">
-            <ul data-slot="childList" :class="ui.childList({ class: [uiProp?.childList, item.ui?.childList] })">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [uiProp?.childItem, item.ui?.childItem] })">
+            <ul data-slot="childList" :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [uiProp?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
-                      <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [uiProp?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
+                    <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                      <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                      <div data-slot="childLinkWrapper" :class="ui.childLinkWrapper({ class: [uiProp?.childLinkWrapper, item.ui?.childLinkWrapper] })">
-                        <p data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [uiProp?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                      <div data-slot="childLinkWrapper" :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
+                        <p data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                           {{ get(childItem, props.labelKey as string) }}
 
-                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [uiProp?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                          <UIcon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                         </p>
-                        <p v-if="childItem.description" data-slot="childLinkDescription" :class="ui.childLinkDescription({ class: [uiProp?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
+                        <p v-if="childItem.description" data-slot="childLinkDescription" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -483,7 +486,7 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
         </NavigationMenuContent>
       </ULink>
 
-      <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content] })">
+      <AccordionContent v-if="props.orientation === 'vertical' && item.children?.length && !props.collapsed" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <AccordionRoot
           v-bind="({
             ...accordionProps,
@@ -491,7 +494,7 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
           } as AccordionRootProps)"
           as="ul"
           data-slot="childList"
-          :class="ui.childList({ class: [uiProp?.childList, item.ui?.childList] })"
+          :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })"
         >
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -501,7 +504,7 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
             :level="level + 1"
             :list-index="listIndex"
             data-slot="childItem"
-            :class="ui.childItem({ class: [uiProp?.childItem, childItem.ui?.childItem] })"
+            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </AccordionRoot>
       </AccordionContent>
@@ -511,29 +514,29 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
   <NavigationMenuRoot
     v-bind="{
       ...rootProps,
-      ...(orientation === 'horizontal' ? {
-        modelValue: modelValue as string,
-        defaultValue: defaultValue as string
+      ...(props.orientation === 'horizontal' ? {
+        modelValue: props.modelValue as string,
+        defaultValue: props.defaultValue as string
       } : {}),
       ...$attrs
     }"
-    :data-collapsed="collapsed"
+    :data-collapsed="props.collapsed"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <component
-        v-bind="orientation === 'vertical' && !collapsed ? {
+        v-bind="props.orientation === 'vertical' && !props.collapsed ? {
           ...accordionProps,
-          modelValue,
-          defaultValue: defaultValue ?? getAccordionDefaultValue(list, 0, listIndex)
+          modelValue: props.modelValue,
+          defaultValue: props.defaultValue ?? getAccordionDefaultValue(list, 0, listIndex)
         } : {}"
-        :is="orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
+        :is="props.orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
         as="ul"
         data-slot="list"
-        :class="ui.list({ class: uiProp?.list })"
+        :class="ui.list({ class: props.ui?.list })"
       >
         <ReuseItemTemplate
           v-for="(item, index) in list"
@@ -542,21 +545,21 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
           :index="index"
           :list-index="listIndex"
           data-slot="item"
-          :class="ui.item({ class: [uiProp?.item, item.ui?.item] })"
+          :class="ui.item({ class: [props.ui?.item, item.ui?.item] })"
         />
       </component>
 
-      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" data-slot="separator" :class="ui.separator({ class: uiProp?.separator })" />
+      <div v-if="props.orientation === 'vertical' && listIndex < lists.length - 1" data-slot="separator" :class="ui.separator({ class: props.ui?.separator })" />
     </template>
 
     <slot name="list-trailing" />
 
-    <div v-if="orientation === 'horizontal'" data-slot="viewportWrapper" :class="ui.viewportWrapper({ class: uiProp?.viewportWrapper })">
-      <NavigationMenuIndicator v-if="arrow" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
-        <div data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+    <div v-if="props.orientation === 'horizontal'" data-slot="viewportWrapper" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
+      <NavigationMenuIndicator v-if="props.arrow" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+        <div data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
       </NavigationMenuIndicator>
 
-      <NavigationMenuViewport data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })" />
+      <NavigationMenuViewport data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })" />
     </div>
   </NavigationMenuRoot>
 </template>
diff --git a/src/runtime/components/Page.vue b/src/runtime/components/Page.vue
index 0d79f2c55f..f91deeb32b 100644
--- a/src/runtime/components/Page.vue
+++ b/src/runtime/components/Page.vue
@@ -27,14 +27,15 @@ export interface PageSlots {
 import { computed, onBeforeUpdate, shallowRef } from 'vue'
 import { Primitive, Slot } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = defineProps<PageProps>()
+const _props = defineProps<PageProps>()
 const slots = defineSlots<PageSlots>()
 
+const props = useComponentProps('page', _props)
+
 const appConfig = useAppConfig() as Page['AppConfig']
-const uiProp = useComponentUI('page', props)
 
 const hasLeft = shallowRef(!!slots.left)
 const hasRight = shallowRef(!!slots.right)
@@ -52,16 +53,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.page || {})
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <Slot v-if="!!slots.left" data-slot="left" :class="ui.left({ class: uiProp?.left })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Slot v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </Slot>
 
-    <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
+    <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot />
     </div>
 
-    <Slot v-if="!!slots.right" data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <Slot v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </Slot>
   </Primitive>
diff --git a/src/runtime/components/PageAnchors.vue b/src/runtime/components/PageAnchors.vue
index 0f6822cdee..146fa7c89c 100644
--- a/src/runtime/components/PageAnchors.vue
+++ b/src/runtime/components/PageAnchors.vue
@@ -42,44 +42,45 @@ export interface PageAnchorsSlots<T extends PageAnchor = PageAnchor> {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { pickLinkProps } from '../utils/link'
 import { tv } from '../utils/tv'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<PageAnchorsProps<T>>(), {
+const _props = withDefaults(defineProps<PageAnchorsProps<T>>(), {
   as: 'nav'
 })
 const slots = defineSlots<PageAnchorsSlots<T>>()
 
+const props = useComponentProps<PageAnchorsProps<T>>('pageAnchors', _props)
+
 const appConfig = useAppConfig() as PageAnchors['AppConfig']
-const uiProp = useComponentUI('pageAnchors', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageAnchors || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ul data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in props.links" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active })">
+          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
             <slot name="link" :link="link" :active="active" :ui="ui">
-              <div v-if="link.icon || !!slots['link-leading']" data-slot="linkLeading" :class="ui.linkLeading({ class: [uiProp?.linkLeading, link.ui?.linkLeading], active })">
+              <div v-if="link.icon || !!slots['link-leading']" data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading], active })">
                 <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                  <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                  <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                 </slot>
               </div>
 
-              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, link.ui?.linkLabel], active })">
+              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                 <slot name="link-label" :link="link" :active="active">
                   {{ link.label }}
                 </slot>
 
-                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
               </span>
 
               <slot name="link-trailing" :link="link" :active="active" />
diff --git a/src/runtime/components/PageAside.vue b/src/runtime/components/PageAside.vue
index 03d1f180a5..67a2ef0d3f 100644
--- a/src/runtime/components/PageAside.vue
+++ b/src/runtime/components/PageAside.vue
@@ -27,30 +27,31 @@ export interface PageAsideSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<PageAsideProps>(), {
+const _props = withDefaults(defineProps<PageAsideProps>(), {
   as: 'aside'
 })
 const slots = defineSlots<PageAsideSlots>()
 
+const props = useComponentProps('pageAside', _props)
+
 const appConfig = useAppConfig() as PageAside['AppConfig']
-const uiProp = useComponentUI('pageAside', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageAside || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
-        <div data-slot="topHeader" :class="ui.topHeader({ class: uiProp?.topHeader })" />
-        <div data-slot="topBody" :class="ui.topBody({ class: uiProp?.topBody })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
+        <div data-slot="topHeader" :class="ui.topHeader({ class: props.ui?.topHeader })" />
+        <div data-slot="topBody" :class="ui.topBody({ class: props.ui?.topBody })">
           <slot name="top" />
         </div>
-        <div data-slot="topFooter" :class="ui.topFooter({ class: uiProp?.topFooter })" />
+        <div data-slot="topFooter" :class="ui.topFooter({ class: props.ui?.topFooter })" />
       </div>
 
       <slot />
diff --git a/src/runtime/components/PageBody.vue b/src/runtime/components/PageBody.vue
index 9bacb23cc2..d53237fa0a 100644
--- a/src/runtime/components/PageBody.vue
+++ b/src/runtime/components/PageBody.vue
@@ -26,20 +26,22 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+
+const _props = defineProps<PageBodyProps>()
 
-const props = defineProps<PageBodyProps>()
 defineSlots<PageBodySlots>()
 
+const props = useComponentProps('pageBody', _props)
+
 const appConfig = useAppConfig() as PageBody['AppConfig']
-const uiProp = useComponentUI('pageBody', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageBody || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/PageCTA.vue b/src/runtime/components/PageCTA.vue
index 9e0160e495..c86f82973c 100644
--- a/src/runtime/components/PageCTA.vue
+++ b/src/runtime/components/PageCTA.vue
@@ -55,20 +55,22 @@ export interface PageCTASlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 import UContainer from './Container.vue'
 
-const props = withDefaults(defineProps<PageCTAProps>(), {
+const _props = withDefaults(defineProps<PageCTAProps>(), {
   orientation: 'vertical',
   reverse: false
 })
 const slots = defineSlots<PageCTASlots>()
 
+const props = useComponentProps('pageCTA', _props)
+
 const appConfig = useAppConfig() as PageCTA['AppConfig']
-const uiProp = useComponentUI('pageCTA', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageCTA || {}) })({
   variant: props.variant,
   orientation: props.orientation,
@@ -78,36 +80,36 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageCTA || {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-        <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.body || !!slots.footer || (props.links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+            <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </h2>
 
-            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </div>
           </slot>
         </div>
 
-        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+        <div v-if="!!slots.footer || (props.links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
+            <div v-if="props.links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
-                <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+                <UButton v-for="(link, index) in props.links" :key="index" size="lg" v-bind="link" />
               </slot>
             </div>
           </slot>
@@ -115,7 +117,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageCTA || {
       </div>
 
       <slot v-if="!!slots.default" />
-      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
+      <div v-else-if="props.orientation === 'horizontal'" class="hidden lg:block" />
     </UContainer>
 
     <slot name="bottom" />
diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index 2c57b52ff1..e63409d63b 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -73,7 +73,7 @@ import { computed, ref, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useMouseInElement, pausableFilter } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { getSlotChildrenText } from '../utils'
 import { tv } from '../utils/tv'
 import ULink from './Link.vue'
@@ -81,20 +81,22 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<PageCardProps>(), {
+const _props = withDefaults(defineProps<PageCardProps>(), {
   orientation: 'vertical'
 })
 const slots = defineSlots<PageCardSlots>()
 
+const props = useComponentProps('pageCard', _props)
+
 const cardRef = ref<HTMLElement>()
 const motionControl = pausableFilter()
 
 const appConfig = useAppConfig() as PageCard['AppConfig']
-const uiProp = useComponentUI('pageCard', props)
 const { elementX, elementY } = useMouseInElement(cardRef, {
   eventFilter: motionControl.eventFilter
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const spotlight = computed(() => props.spotlight && (elementX.value !== 0 || elementY.value !== 0))
 
 watch(() => props.spotlight, (value) => {
@@ -105,6 +107,7 @@ watch(() => props.spotlight, (value) => {
   }
 }, { immediate: true })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageCard || {}) })({
   orientation: props.orientation,
   reverse: props.reverse,
@@ -126,44 +129,44 @@ const ariaLabel = computed(() => {
 <template>
   <Primitive
     ref="cardRef"
-    :as="as"
-    :data-orientation="orientation"
+    :as="props.as"
+    :data-orientation="props.orientation"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="spotlight && { '--spotlight-x': `${elementX}px`, '--spotlight-y': `${elementY}px` }"
-    @click="onClick"
+    @click="props.onClick"
   >
-    <div v-if="props.spotlight" data-slot="spotlight" :class="ui.spotlight({ class: uiProp?.spotlight })" />
+    <div v-if="props.spotlight" data-slot="spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
 
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-        <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (props.icon || !!slots.leading) || !!slots.body || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header" />
         </div>
 
-        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+            <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <div v-if="!!slots.body || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body">
-            <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+            <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </div>
 
-            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </div>
           </slot>
         </div>
 
-        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer" />
         </div>
       </div>
@@ -172,9 +175,9 @@ const ariaLabel = computed(() => {
     </div>
 
     <ULink
-      v-if="to"
+      v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
+      v-bind="{ to: props.to, target: props.target, ...$attrs }"
       class="focus:outline-none peer"
       raw
     >
diff --git a/src/runtime/components/PageColumns.vue b/src/runtime/components/PageColumns.vue
index 825ac27927..43d4a04fbe 100644
--- a/src/runtime/components/PageColumns.vue
+++ b/src/runtime/components/PageColumns.vue
@@ -26,20 +26,22 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+
+const _props = defineProps<PageColumnsProps>()
 
-const props = defineProps<PageColumnsProps>()
 defineSlots<PageColumnsSlots>()
 
+const props = useComponentProps('pageColumns', _props)
+
 const appConfig = useAppConfig() as PageColumns['AppConfig']
-const uiProp = useComponentUI('pageColumns', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageColumns || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/PageFeature.vue b/src/runtime/components/PageFeature.vue
index 5bcdb246f2..9c2655a199 100644
--- a/src/runtime/components/PageFeature.vue
+++ b/src/runtime/components/PageFeature.vue
@@ -44,7 +44,7 @@ export interface PageFeatureSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { getSlotChildrenText } from '../utils'
 import { tv } from '../utils/tv'
 import ULink from './Link.vue'
@@ -52,14 +52,16 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<PageFeatureProps>(), {
+const _props = withDefaults(defineProps<PageFeatureProps>(), {
   orientation: 'horizontal'
 })
 const slots = defineSlots<PageFeatureSlots>()
 
+const props = useComponentProps('pageFeature', _props)
+
 const appConfig = useAppConfig() as PageFeature['AppConfig']
-const uiProp = useComponentUI('pageFeature', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageFeature || {}) })({
   orientation: props.orientation,
   title: !!props.title || !!slots.title,
@@ -73,18 +75,18 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
-    <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+    <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+        <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       </slot>
     </div>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
-        v-if="to"
+        v-if="props.to"
         :aria-label="ariaLabel"
-        v-bind="{ to, target, ...$attrs }"
+        v-bind="{ to: props.to, target: props.target, ...$attrs }"
         class="focus:outline-none peer"
         raw
       >
@@ -92,15 +94,15 @@ const ariaLabel = computed(() => {
       </ULink>
 
       <slot>
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
diff --git a/src/runtime/components/PageGrid.vue b/src/runtime/components/PageGrid.vue
index 4cb090369d..9d5ac78ce6 100644
--- a/src/runtime/components/PageGrid.vue
+++ b/src/runtime/components/PageGrid.vue
@@ -26,20 +26,22 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+
+const _props = defineProps<PageGridProps>()
 
-const props = defineProps<PageGridProps>()
 defineSlots<PageGridSlots>()
 
+const props = useComponentProps('pageGrid', _props)
+
 const appConfig = useAppConfig() as PageGrid['AppConfig']
-const uiProp = useComponentUI('pageGrid', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageGrid || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/PageHeader.vue b/src/runtime/components/PageHeader.vue
index 0770bd5bce..a16b96fd9f 100644
--- a/src/runtime/components/PageHeader.vue
+++ b/src/runtime/components/PageHeader.vue
@@ -38,47 +38,49 @@ export interface PageHeaderSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = defineProps<PageHeaderProps>()
+const _props = defineProps<PageHeaderProps>()
 const slots = defineSlots<PageHeaderSlots>()
 
+const props = useComponentProps('pageHeader', _props)
+
 const appConfig = useAppConfig() as PageHeader['AppConfig']
-const uiProp = useComponentUI('pageHeader', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHeader || {}) })({
   title: !!props.title || !!slots.title
 }))
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: uiProp?.headline })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="props.headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline })">
       <slot name="headline">
-        {{ headline }}
+        {{ props.headline }}
       </slot>
     </div>
 
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-        <h1 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <h1 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h1>
 
-        <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
+        <div v-if="props.links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
           <slot name="links">
-            <UButton v-for="(link, index) in links" :key="index" color="neutral" variant="outline" v-bind="link" />
+            <UButton v-for="(link, index) in props.links" :key="index" color="neutral" variant="outline" v-bind="link" />
           </slot>
         </div>
       </div>
 
-      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+      <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
-          {{ description }}
+          {{ props.description }}
         </slot>
       </div>
 
diff --git a/src/runtime/components/PageHero.vue b/src/runtime/components/PageHero.vue
index d9a74317f8..b35d6e0e0e 100644
--- a/src/runtime/components/PageHero.vue
+++ b/src/runtime/components/PageHero.vue
@@ -53,19 +53,21 @@ export interface PageHeroSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 import UContainer from './Container.vue'
 
-const props = withDefaults(defineProps<PageHeroProps>(), {
+const _props = withDefaults(defineProps<PageHeroProps>(), {
   orientation: 'vertical'
 })
 const slots = defineSlots<PageHeroSlots>()
 
+const props = useComponentProps('pageHero', _props)
+
 const appConfig = useAppConfig() as PageHero['AppConfig']
-const uiProp = useComponentUI('pageHero', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHero || {}) })({
   orientation: props.orientation,
   reverse: props.reverse,
@@ -74,42 +76,42 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHero ||
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-        <div v-if="!!slots.header || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (props.headline || !!slots.headline) || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.body || !!slots.footer || (props.links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (props.headline || !!slots.headline) || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: uiProp?.headline, headline: !slots.headline })">
+            <div v-if="props.headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
               <slot name="headline">
-                {{ headline }}
+                {{ props.headline }}
               </slot>
             </div>
 
-            <h1 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+            <h1 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </h1>
 
-            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </div>
           </slot>
         </div>
 
-        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+        <div v-if="!!slots.footer || (props.links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
+            <div v-if="props.links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
-                <UButton v-for="(link, index) in links" :key="index" size="xl" v-bind="link" />
+                <UButton v-for="(link, index) in props.links" :key="index" size="xl" v-bind="link" />
               </slot>
             </div>
           </slot>
@@ -117,7 +119,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageHero ||
       </div>
 
       <slot v-if="!!slots.default" />
-      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
+      <div v-else-if="props.orientation === 'horizontal'" class="hidden lg:block" />
     </UContainer>
 
     <slot name="bottom" />
diff --git a/src/runtime/components/PageLinks.vue b/src/runtime/components/PageLinks.vue
index 09a8b66440..887da3003a 100644
--- a/src/runtime/components/PageLinks.vue
+++ b/src/runtime/components/PageLinks.vue
@@ -44,48 +44,49 @@ export interface PageLinksSlots<T extends PageLink = PageLink> {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { pickLinkProps } from '../utils/link'
 import { tv } from '../utils/tv'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<PageLinksProps<T>>(), {
+const _props = withDefaults(defineProps<PageLinksProps<T>>(), {
   as: 'nav'
 })
 const slots = defineSlots<PageLinksSlots<T>>()
 
+const props = useComponentProps<PageLinksProps<T>>('pageLinks', _props)
+
 const appConfig = useAppConfig() as PageLinks['AppConfig']
-const uiProp = useComponentUI('pageLinks', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageLinks || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
       <slot name="title">
-        {{ title }}
+        {{ props.title }}
       </slot>
     </p>
 
-    <ul data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item] })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in props.links" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active })">
+          <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
             <slot name="link" :link="link" :active="active" :ui="ui">
               <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
               </slot>
 
-              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, link.ui?.linkLabel], active })">
+              <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                 <slot name="link-label" :link="link" :active="active">
                   {{ link.label }}
                 </slot>
 
-                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
               </span>
 
               <slot name="link-trailing" :link="link" :active="active" />
diff --git a/src/runtime/components/PageList.vue b/src/runtime/components/PageList.vue
index 37ae876b77..32465f9666 100644
--- a/src/runtime/components/PageList.vue
+++ b/src/runtime/components/PageList.vue
@@ -27,22 +27,24 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 
-const props = withDefaults(defineProps<PageListProps>(), {
+const _props = withDefaults(defineProps<PageListProps>(), {
   divide: false
 })
+
 defineSlots<PageListSlots>()
 
+const props = useComponentProps('pageList', _props)
+
 const appConfig = useAppConfig() as PageList['AppConfig']
-const uiProp = useComponentUI('pageList', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageList || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" role="list" :class="ui({ class: [uiProp?.base, props.class], divide: props.divide })">
+  <Primitive :as="props.as" role="list" :class="ui({ class: [props.ui?.base, props.class], divide: props.divide })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/PageLogos.vue b/src/runtime/components/PageLogos.vue
index c7948c0c9c..9c2728b11d 100644
--- a/src/runtime/components/PageLogos.vue
+++ b/src/runtime/components/PageLogos.vue
@@ -35,7 +35,7 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UMarquee from './Marquee.vue'
 import UAvatar from './Avatar.vue'
@@ -45,13 +45,14 @@ defineOptions({ inheritAttrs: false })
 
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
 
-const props = withDefaults(defineProps<PageLogosProps>(), {
+const _props = withDefaults(defineProps<PageLogosProps>(), {
   marquee: false
 })
 const slots = defineSlots<PageLogosSlots>()
 
+const props = useComponentProps('pageLogos', _props)
+
 const appConfig = useAppConfig() as PageLogos['AppConfig']
-const uiProp = useComponentUI('pageLogos', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageLogos || {}) })())
@@ -60,40 +61,40 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageLogos ||
 <template>
   <DefineCreateItemTemplate>
     <slot v-if="!!slots.default" />
-    <template v-else-if="items?.length">
-      <template v-for="(item, index) in items" :key="index">
+    <template v-else-if="props.items?.length">
+      <template v-for="(item, index) in props.items" :key="index">
         <UAvatar
           v-if="typeof item === 'object'"
           :src="item.src"
           :alt="item.alt"
           data-slot="logo"
-          :class="ui.logo({ class: uiProp?.logo })"
+          :class="ui.logo({ class: props.ui?.logo })"
         />
         <UIcon
           v-else
           :name="item"
           data-slot="logo"
-          :class="ui.logo({ class: uiProp?.logo })"
+          :class="ui.logo({ class: props.ui?.logo })"
         />
       </template>
     </template>
   </DefineCreateItemTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <h2 v-if="title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
-      {{ title }}
+  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <h2 v-if="props.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+      {{ props.title }}
     </h2>
 
     <UMarquee
-      v-if="marquee"
-      v-bind="typeof marquee === 'object' ? marquee : {}"
+      v-if="props.marquee"
+      v-bind="typeof props.marquee === 'object' ? props.marquee : {}"
       data-slot="logos"
-      :class="ui.logos({ class: uiProp?.logos, marquee: true })"
+      :class="ui.logos({ class: props.ui?.logos, marquee: true })"
     >
-      <ReuseCreateItemTemplate :items="items" />
+      <ReuseCreateItemTemplate :items="props.items" />
     </UMarquee>
-    <div v-else data-slot="logos" :class="ui.logos({ class: uiProp?.logos })">
-      <ReuseCreateItemTemplate :items="items" />
+    <div v-else data-slot="logos" :class="ui.logos({ class: props.ui?.logos })">
+      <ReuseCreateItemTemplate :items="props.items" />
     </div>
   </Primitive>
 </template>
diff --git a/src/runtime/components/PageSection.vue b/src/runtime/components/PageSection.vue
index 2b277865e8..f72aca3752 100644
--- a/src/runtime/components/PageSection.vue
+++ b/src/runtime/components/PageSection.vue
@@ -67,22 +67,24 @@ export interface PageSectionSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UPageFeature from './PageFeature.vue'
 import UContainer from './Container.vue'
 import UIcon from './Icon.vue'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<PageSectionProps>(), {
+const _props = withDefaults(defineProps<PageSectionProps>(), {
   as: 'section',
   orientation: 'vertical'
 })
 const slots = defineSlots<PageSectionSlots>()
 
+const props = useComponentProps('pageSection', _props)
+
 const appConfig = useAppConfig() as PageSection['AppConfig']
-const uiProp = useComponentUI('pageSection', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection || {}) })({
   orientation: props.orientation,
   reverse: props.reverse,
@@ -93,45 +95,45 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || (features?.length || !!slots.features) || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-        <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (props.icon || !!slots.leading) || (props.headline || !!slots.headline) || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.body || (props.features?.length || !!slots.features) || !!slots.footer || (props.links?.length || !!slots.links)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (props.icon || !!slots.leading) || (props.headline || !!slots.headline) || (props.title || !!slots.title) || (props.description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
-            <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+            <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
               <slot name="leading" :ui="ui">
-                <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+                <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
               </slot>
             </div>
 
-            <div v-if="headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: uiProp?.headline, headline: !slots.headline })">
+            <div v-if="props.headline || !!slots.headline" data-slot="headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
               <slot name="headline">
-                {{ headline }}
+                {{ props.headline }}
               </slot>
             </div>
 
-            <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+            <h2 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </h2>
 
-            <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </div>
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (features?.length || !!slots.features)" data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <div v-if="!!slots.body || (props.features?.length || !!slots.features)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body">
-            <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: uiProp?.features })">
+            <ul v-if="props.features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: props.ui?.features })">
               <slot name="features">
                 <UPageFeature
-                  v-for="(feature, index) in features"
+                  v-for="(feature, index) in props.features"
                   :key="index"
                   as="li"
                   v-bind="feature"
@@ -141,11 +143,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
           </slot>
         </div>
 
-        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+        <div v-if="!!slots.footer || (props.links?.length || !!slots.links)" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
           <slot name="footer">
-            <div v-if="links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: uiProp?.links })">
+            <div v-if="props.links?.length || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
               <slot name="links">
-                <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+                <UButton v-for="(link, index) in props.links" :key="index" size="lg" v-bind="link" />
               </slot>
             </div>
           </slot>
@@ -153,7 +155,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
       </div>
 
       <slot v-if="!!slots.default" />
-      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
+      <div v-else-if="props.orientation === 'horizontal'" class="hidden lg:block" />
     </UContainer>
 
     <slot name="bottom" />
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index 0abb827df7..3028780821 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -103,15 +103,16 @@ export interface PaginationSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'reka-ui'
+import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<PaginationProps>(), {
+const _props = withDefaults(defineProps<PaginationProps>(), {
   color: 'neutral',
   variant: 'outline',
   activeColor: 'primary',
@@ -125,15 +126,20 @@ const props = withDefaults(defineProps<PaginationProps>(), {
 const emits = defineEmits<PaginationEmits>()
 const slots = defineSlots<PaginationSlots>()
 
+const props = useComponentProps('pagination', _props)
+
 const { dir } = useLocale()
 const appConfig = useAppConfig() as Pagination['AppConfig']
-const uiProp = useComponentUI('pagination', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const firstIcon = computed(() => props.firstIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
+// eslint-disable-next-line vue/no-dupe-keys
 const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
+// eslint-disable-next-line vue/no-dupe-keys
 const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+// eslint-disable-next-line vue/no-dupe-keys
 const lastIcon = computed(() => props.lastIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -141,49 +147,49 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pagination |
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <PaginationList v-slot="{ items }" data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <PaginationFirst v-if="showControls || !!slots.first" as-child data-slot="first" :class="ui.first({ class: uiProp?.first })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="(rootProps as any)" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <PaginationList v-slot="{ items }" data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="props.showControls || !!slots.first" as-child data-slot="first" :class="ui.first({ class: props.ui?.first })">
         <slot name="first">
-          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
+          <UButton :color="props.color" :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="showControls || !!slots.prev" as-child data-slot="prev" :class="ui.prev({ class: uiProp?.prev })">
+      <PaginationPrev v-if="props.showControls || !!slots.prev" as-child data-slot="prev" :class="ui.prev({ class: props.ui?.prev })">
         <slot name="prev">
-          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : undefined" />
+          <UButton :color="props.color" :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="ui.item({ class: uiProp?.item })">
+        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="ui.item({ class: props.ui?.item })">
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <UButton
-              :color="page === item.value ? activeColor : color"
-              :variant="page === item.value ? activeVariant : variant"
-              :size="size"
+              :color="page === item.value ? props.activeColor : props.color"
+              :variant="page === item.value ? props.activeVariant : props.variant"
+              :size="props.size"
               :label="String(item.value)"
               :ui="{ label: ui.label() }"
-              :to="to?.(item.value)"
+              :to="props.to?.(item.value)"
               square
             />
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="ui.ellipsis({ class: uiProp?.ellipsis })">
+        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="ui.ellipsis({ class: props.ui?.ellipsis })">
           <slot name="ellipsis" :ui="ui">
-            <UButton as="div" :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
+            <UButton as="div" :color="props.color" :variant="props.variant" :size="props.size" :icon="props.ellipsisIcon || appConfig.ui.icons.ellipsis" />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="showControls || !!slots.next" as-child data-slot="next" :class="ui.next({ class: uiProp?.next })">
+      <PaginationNext v-if="props.showControls || !!slots.next" as-child data-slot="next" :class="ui.next({ class: props.ui?.next })">
         <slot name="next">
-          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : undefined" />
+          <UButton :color="props.color" :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : undefined" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="showControls || !!slots.last" as-child data-slot="last" :class="ui.last({ class: uiProp?.last })">
+      <PaginationLast v-if="props.showControls || !!slots.last" as-child data-slot="last" :class="ui.last({ class: props.ui?.last })">
         <slot name="last">
-          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
+          <UButton :color="props.color" :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
         </slot>
       </PaginationLast>
     </PaginationList>
diff --git a/src/runtime/components/PinInput.vue b/src/runtime/components/PinInput.vue
index 52a254c82f..1dab59fb11 100644
--- a/src/runtime/components/PinInput.vue
+++ b/src/runtime/components/PinInput.vue
@@ -52,33 +52,36 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
 
 <script setup lang="ts" generic="T extends PinInputType">
 import { ref, computed, onMounted } from 'vue'
-import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
+import { PinInputInput, PinInputRoot } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<PinInputProps<T>>(), {
+const _props = withDefaults(defineProps<PinInputProps<T>>(), {
   type: 'text' as never,
   length: 5,
   autofocusDelay: 0
 })
 const emits = defineEmits<PinInputEmits<T>>()
 
+const props = useComponentProps<PinInputProps<T>>('pinInput', _props)
+
 const appConfig = useAppConfig() as PinInput['AppConfig']
-const uiProp = useComponentUI('pinInput', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'id', 'mask', 'name', 'otp', 'required', 'type'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'disabled', 'id', 'mask', 'name', 'otp', 'required', 'type'), emits)
 
-const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(props)
+const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(_props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pinInput || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: size.value,
-  highlight: highlight.value,
+  size: size.value ?? props.size,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed
 }))
 
@@ -123,14 +126,14 @@ defineExpose({
 
 <template>
   <PinInputRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
+    v-bind="({ ...rootProps, ...ariaAttrs } as any)"
     :id="id"
     :name="name"
-    :placeholder="placeholder"
-    :model-value="(modelValue as PinInputValue<T>)"
-    :default-value="(defaultValue as PinInputValue<T>)"
+    :placeholder="props.placeholder"
+    :model-value="(props.modelValue as PinInputValue<T>)"
+    :default-value="(props.defaultValue as PinInputValue<T>)"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
@@ -140,7 +143,7 @@ defineExpose({
       :ref="el => setInputRef(index as number, el)"
       :index="(index as number)"
       data-slot="base"
-      :class="ui.base({ class: uiProp?.base })"
+      :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       @blur="onBlur"
       @focus="emitFormFocus"
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 2a69f4270e..27e1e96c07 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -62,17 +62,18 @@ export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
 <script setup lang="ts" generic="M extends PopoverMode">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
-import { useForwardPropsEmits } from 'reka-ui'
+import { } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { Popover, HoverCard } from 'reka-ui/namespaced'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { FieldGroupReset } from '../composables/useFieldGroup'
 import { usePortal } from '../composables/usePortal'
 import { pointerDownOutside } from '../utils/overlay'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<PopoverProps<M>>(), {
+const _props = withDefaults(defineProps<PopoverProps<M>>(), {
   portal: true,
   mode: 'click' as never,
   openDelay: 0,
@@ -82,11 +83,12 @@ const props = withDefaults(defineProps<PopoverProps<M>>(), {
 const emits = defineEmits<PopoverEmits>()
 const slots = defineSlots<PopoverSlots<M>>()
 
+const props = useComponentProps<PopoverProps<M>>('popover', _props)
+
 const appConfig = useAppConfig() as Popover['AppConfig']
-const uiProp = useComponentUI('popover', props)
 
 const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay') : reactivePick(props, 'defaultOpen', 'open', 'modal')
-const rootProps = useForwardPropsEmits(pick, emits)
+const rootProps = useForwardProps(pick, emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
 const contentEvents = computed(() => {
@@ -118,7 +120,7 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 
 <template>
   <Component.Root v-slot="{ open, close }: { open: boolean, close?: () => void }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
+    <Component.Trigger v-if="!!slots.default || !!props.reference" as-child :reference="props.reference" :class="props.class">
       <slot :open="open" />
     </Component.Trigger>
 
@@ -128,10 +130,10 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 
     <Component.Portal v-bind="portalProps">
       <FieldGroupReset>
-        <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-on="contentEvents">
+        <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
           <slot name="content" v-bind="((close ? { close } : {}) as SlotProps<M>)" />
 
-          <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+          <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
         </Component.Content>
       </FieldGroupReset>
     </Component.Portal>
diff --git a/src/runtime/components/PricingPlan.vue b/src/runtime/components/PricingPlan.vue
index 3e7cc2db80..b227f1d23b 100644
--- a/src/runtime/components/PricingPlan.vue
+++ b/src/runtime/components/PricingPlan.vue
@@ -114,7 +114,7 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UBadge from './Badge.vue'
 import UButton from './Button.vue'
@@ -122,16 +122,18 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<PricingPlanProps>(), {
+const _props = withDefaults(defineProps<PricingPlanProps>(), {
   orientation: 'vertical'
 })
 const slots = defineSlots<PricingPlanSlots>()
 
+const props = useComponentProps('pricingPlan', _props)
+
 const appConfig = useAppConfig() as PricingPlan['AppConfig']
-const uiProp = useComponentUI('pricingPlan', props)
 
 const [DefinePriceTemplate, ReusePriceTemplate] = createReusableTemplate()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pricingPlan || {}) })({
   orientation: props.orientation,
   variant: props.variant,
@@ -139,101 +141,102 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pricingPlan
   scale: props.scale
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const features = computed(() => props.features?.map(feature => typeof feature === 'string' ? { title: feature } : feature))
 </script>
 
 <template>
   <DefinePriceTemplate>
-    <div v-if="discount || price || !!slots.discount || !!slots.price || billingCycle || billingPeriod || !!slots.billing" data-slot="priceWrapper" :class="ui.priceWrapper({ class: uiProp?.priceWrapper })">
-      <div v-if="(discount && price) || !!slots.discount" data-slot="discount" :class="ui.discount({ class: uiProp?.discount })">
+    <div v-if="props.discount || props.price || !!slots.discount || !!slots.price || props.billingCycle || props.billingPeriod || !!slots.billing" data-slot="priceWrapper" :class="ui.priceWrapper({ class: props.ui?.priceWrapper })">
+      <div v-if="(props.discount && props.price) || !!slots.discount" data-slot="discount" :class="ui.discount({ class: props.ui?.discount })">
         <slot name="discount">
-          {{ price }}
+          {{ props.price }}
         </slot>
       </div>
 
-      <div v-if="(discount || price) || !!slots.price" data-slot="price" :class="ui.price({ class: uiProp?.price })">
+      <div v-if="(props.discount || props.price) || !!slots.price" data-slot="price" :class="ui.price({ class: props.ui?.price })">
         <slot name="price">
-          {{ discount || price }}
+          {{ props.discount || props.price }}
         </slot>
       </div>
 
-      <div v-if="billingCycle || billingPeriod || !!slots.billing" data-slot="billing" :class="ui.billing({ class: uiProp?.billing })">
+      <div v-if="props.billingCycle || props.billingPeriod || !!slots.billing" data-slot="billing" :class="ui.billing({ class: props.ui?.billing })">
         <slot name="billing" :ui="ui">
-          <span data-slot="billingPeriod" :class="ui.billingPeriod({ class: uiProp?.billingPeriod })">
-            {{ billingPeriod || '&nbsp;' }}
+          <span data-slot="billingPeriod" :class="ui.billingPeriod({ class: props.ui?.billingPeriod })">
+            {{ props.billingPeriod || '&nbsp;' }}
           </span>
 
-          <span v-if="billingCycle" data-slot="billingCycle" :class="ui.billingCycle({ class: uiProp?.billingCycle })">
-            {{ billingCycle }}
+          <span v-if="props.billingCycle" data-slot="billingCycle" :class="ui.billingCycle({ class: props.ui?.billingCycle })">
+            {{ props.billingCycle }}
           </span>
         </slot>
       </div>
     </div>
   </DefinePriceTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.header && orientation === 'vertical'" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" v-bind="$attrs" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header && props.orientation === 'vertical'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot name="body">
-        <div data-slot="titleWrapper" :class="ui.titleWrapper({ class: uiProp?.titleWrapper })">
-          <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div data-slot="titleWrapper" :class="ui.titleWrapper({ class: props.ui?.titleWrapper })">
+          <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <slot name="title">
-              {{ title }}
+              {{ props.title }}
             </slot>
           </div>
 
           <slot name="badge" :ui="ui">
             <UBadge
-              v-if="badge"
+              v-if="props.badge"
               color="primary"
               variant="subtle"
-              v-bind="typeof badge === 'string' ? { label: badge } : badge"
+              v-bind="typeof props.badge === 'string' ? { label: props.badge } : props.badge"
               data-slot="badge"
-              :class="ui.badge({ class: uiProp?.badge })"
+              :class="ui.badge({ class: props.ui?.badge })"
             />
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
 
-        <ReusePriceTemplate v-if="orientation === 'vertical'" />
+        <ReusePriceTemplate v-if="props.orientation === 'vertical'" />
 
-        <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: uiProp?.features })">
+        <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: props.ui?.features })">
           <slot name="features">
-            <li v-for="(feature, index) in features" :key="index" data-slot="feature" :class="ui.feature({ class: uiProp?.feature })">
-              <UIcon :name="feature.icon || appConfig.ui.icons.success" data-slot="featureIcon" :class="ui.featureIcon({ class: uiProp?.featureIcon })" />
+            <li v-for="(feature, index) in features" :key="index" data-slot="feature" :class="ui.feature({ class: props.ui?.feature })">
+              <UIcon :name="feature.icon || appConfig.ui.icons.success" data-slot="featureIcon" :class="ui.featureIcon({ class: props.ui?.featureIcon })" />
 
-              <span data-slot="featureTitle" :class="ui.featureTitle({ class: uiProp?.featureTitle })">{{ feature.title }}</span>
+              <span data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">{{ feature.title }}</span>
             </li>
           </slot>
         </ul>
       </slot>
     </div>
 
-    <div v-if="(terms || !!slots.terms) || (button || !!slots.button) || orientation === 'horizontal' || (tagline || !!slots.tagline) || !!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="(props.terms || !!slots.terms) || (props.button || !!slots.button) || props.orientation === 'horizontal' || (props.tagline || !!slots.tagline) || !!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer">
-        <div v-if="tagline || !!slots.tagline" data-slot="tagline" :class="ui.tagline({ class: uiProp?.tagline })">
+        <div v-if="props.tagline || !!slots.tagline" data-slot="tagline" :class="ui.tagline({ class: props.ui?.tagline })">
           <slot name="tagline">
-            {{ tagline }}
+            {{ props.tagline }}
           </slot>
         </div>
 
-        <ReusePriceTemplate v-if="orientation === 'horizontal'" />
+        <ReusePriceTemplate v-if="props.orientation === 'horizontal'" />
 
         <slot name="button" :ui="ui">
-          <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" data-slot="button" :class="ui.button({ class: uiProp?.button })" @click="button?.onClick" />
+          <UButton v-if="props.button" v-bind="{ block: true, size: 'lg', ...props.button }" data-slot="button" :class="ui.button({ class: props.ui?.button })" @click="props.button?.onClick" />
         </slot>
 
-        <div v-if="terms || !!slots.terms" data-slot="terms" :class="ui.terms({ class: uiProp?.terms })">
+        <div v-if="props.terms || !!slots.terms" data-slot="terms" :class="ui.terms({ class: props.ui?.terms })">
           <slot name="terms">
-            {{ terms }}
+            {{ props.terms }}
           </slot>
         </div>
       </slot>
diff --git a/src/runtime/components/PricingPlans.vue b/src/runtime/components/PricingPlans.vue
index 239f7c5413..ced943bfa8 100644
--- a/src/runtime/components/PricingPlans.vue
+++ b/src/runtime/components/PricingPlans.vue
@@ -54,20 +54,21 @@ import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import UPricingPlan from './PricingPlan.vue'
 
-const props = withDefaults(defineProps<PricingPlansProps>(), {
+const _props = withDefaults(defineProps<PricingPlansProps>(), {
   orientation: 'horizontal',
   compact: false,
   scale: false
 })
 const slots = defineSlots<PricingPlansSlots<T>>()
 
+const props = useComponentProps<PricingPlansProps>('pricingPlans', _props)
+
 const getProxySlots = () => omit(slots, ['default'])
 
 const appConfig = useAppConfig() as PricingPlans['AppConfig']
-const uiProp = useComponentUI('pricingPlans', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pricingPlans || {}) }))
@@ -88,12 +89,12 @@ function mapSlot(slot: any) {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ class: [uiProp?.base, props.class], compact, scale, orientation })" :style="{ '--count': count }">
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui({ class: [props.ui?.base, props.class], compact: props.compact, scale: props.scale, orientation: props.orientation })" :style="{ '--count': count }">
     <slot>
       <UPricingPlan
-        v-for="(plan, index) in plans"
+        v-for="(plan, index) in props.plans"
         :key="index"
-        :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
+        :orientation="props.orientation === 'vertical' ? 'horizontal' : 'vertical'"
         v-bind="plan"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
diff --git a/src/runtime/components/PricingTable.vue b/src/runtime/components/PricingTable.vue
index 57611368e1..e567ecde93 100644
--- a/src/runtime/components/PricingTable.vue
+++ b/src/runtime/components/PricingTable.vue
@@ -105,7 +105,7 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UBadge from './Badge.vue'
@@ -114,12 +114,13 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<PricingTableProps<T>>()
+const _props = defineProps<PricingTableProps<T>>()
 const slots = defineSlots<PricingTableSlots<T>>()
 
+const props = useComponentProps<PricingTableProps<T>>('pricingTable', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as PricingTable['AppConfig']
-const uiProp = useComponentUI('pricingTable', props)
 
 const formatSlotName = (item: { id?: string, title: string }): string => {
   if (item.id) return item.id
@@ -150,11 +151,11 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
 
 <template>
   <DefineTierTemplate v-slot="{ tier }">
-    <div data-slot="tierWrapper" :class="ui.tierWrapper({ class: uiProp?.tierWrapper })">
+    <div data-slot="tierWrapper" :class="ui.tierWrapper({ class: props.ui?.tierWrapper })">
       <slot :name="(tier.id as keyof PricingTableSlots<T>)" :tier="(tier as T)">
         <slot name="tier" :tier="(tier as T)">
-          <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: uiProp?.tierTitleWrapper })">
-            <div data-slot="tierTitle" :class="ui.tierTitle({ class: uiProp?.tierTitle })">
+          <div data-slot="tierTitleWrapper" :class="ui.tierTitleWrapper({ class: props.ui?.tierTitleWrapper })">
+            <div data-slot="tierTitle" :class="ui.tierTitle({ class: props.ui?.tierTitle })">
               <slot :name="(`${tier.id}-title` as keyof PricingTableSlots<T>)" :tier="tier">
                 <slot name="tier-title" :tier="(tier as T)">
                   {{ tier.title }}
@@ -170,13 +171,13 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
                   variant="subtle"
                   v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
                   data-slot="tierBadge"
-                  :class="ui.tierBadge({ class: uiProp?.tierBadge })"
+                  :class="ui.tierBadge({ class: props.ui?.tierBadge })"
                 />
               </slot>
             </slot>
           </div>
 
-          <div data-slot="tierDescription" :class="ui.tierDescription({ class: uiProp?.tierDescription })">
+          <div data-slot="tierDescription" :class="ui.tierDescription({ class: props.ui?.tierDescription })">
             <slot :name="(`${tier.id}-description` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-description" :tier="(tier as T)">
                 {{ tier.description }}
@@ -184,8 +185,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: uiProp?.tierPriceWrapper })">
-            <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: uiProp?.tierDiscount })">
+          <div data-slot="tierPriceWrapper" :class="ui.tierPriceWrapper({ class: props.ui?.tierPriceWrapper })">
+            <div v-if="(tier.discount && tier.price) || !!slots[(`${tier.id}-discount` as keyof PricingTableSlots<T>)] || !!slots['tier-discount']" data-slot="tierDiscount" :class="ui.tierDiscount({ class: props.ui?.tierDiscount })">
               <slot :name="(`${tier.id}-discount` as keyof PricingTableSlots<T>)" :tier="tier">
                 <slot name="tier-discount" :tier="(tier as T)">
                   {{ tier.price }}
@@ -193,7 +194,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
               </slot>
             </div>
 
-            <div v-if="(tier.discount || tier.price) || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: uiProp?.tierPrice })">
+            <div v-if="(tier.discount || tier.price) || !!slots[(`${tier.id}-price` as keyof PricingTableSlots<T>)] || !!slots['tier-price']" data-slot="tierPrice" :class="ui.tierPrice({ class: props.ui?.tierPrice })">
               <slot :name="(`${tier.id}-price` as keyof PricingTableSlots<T>)" :tier="tier">
                 <slot name="tier-price" :tier="(tier as T)">
                   {{ tier.discount || tier.price }}
@@ -201,14 +202,14 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
               </slot>
             </div>
 
-            <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: uiProp?.tierBilling })">
+            <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[(`${tier.id}-billing` as keyof PricingTableSlots<T>)] || !!slots['tier-billing']" data-slot="tierBilling" :class="ui.tierBilling({ class: props.ui?.tierBilling })">
               <slot :name="(`${tier.id}-billing` as keyof PricingTableSlots<T>)" :tier="tier">
                 <slot name="tier-billing" :tier="(tier as T)">
-                  <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: uiProp?.tierBillingPeriod })">
+                  <span data-slot="tierBillingPeriod" :class="ui.tierBillingPeriod({ class: props.ui?.tierBillingPeriod })">
                     {{ tier.billingPeriod || '&nbsp;' }}
                   </span>
 
-                  <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: uiProp?.tierBillingCycle })">
+                  <span v-if="tier.billingCycle" data-slot="tierBillingCycle" :class="ui.tierBillingCycle({ class: props.ui?.tierBillingCycle })">
                     {{ tier.billingCycle }}
                   </span>
                 </slot>
@@ -216,7 +217,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </div>
           </div>
 
-          <div v-if="!!slots[(`${tier.id}-button` as keyof PricingTableSlots<T>)] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: uiProp?.tierButton })">
+          <div v-if="!!slots[(`${tier.id}-button` as keyof PricingTableSlots<T>)] || !!slots['tier-button'] || tier.button" data-slot="tierButton" :class="ui.tierButton({ class: props.ui?.tierButton })">
             <slot :name="(`${tier.id}-button` as keyof PricingTableSlots<T>)" :tier="tier">
               <slot name="tier-button" :tier="(tier as T)">
                 <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
@@ -230,44 +231,44 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
 
   <DefineFeatureTemplate v-slot="{ feature, tier }">
     <template v-if="feature.tiers?.[tier.id]">
-      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: uiProp?.tierFeatureIcon, active: true })" />
+      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon, active: true })" />
       <template v-else>
         {{ feature.tiers[tier.id] }}
       </template>
     </template>
 
-    <UIcon v-else :name="appConfig.ui.icons.minus" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: uiProp?.tierFeatureIcon })" />
+    <UIcon v-else :name="appConfig.ui.icons.minus" data-slot="tierFeatureIcon" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon })" />
   </DefineFeatureTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <table data-slot="table" :class="ui.table({ class: uiProp?.table })">
-      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [uiProp?.caption] })">
+  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table data-slot="table" :class="ui.table({ class: props.ui?.table })">
+      <caption v-if="props.caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
-          {{ caption || t('pricingTable.caption') }}
+          {{ props.caption || t('pricingTable.caption') }}
         </slot>
       </caption>
 
-      <thead data-slot="thead" :class="ui.thead({ class: uiProp?.thead })">
-        <tr data-slot="tr" :class="ui.tr({ class: uiProp?.tr })">
+      <thead data-slot="thead" :class="ui.thead({ class: props.ui?.thead })">
+        <tr data-slot="tr" :class="ui.tr({ class: props.ui?.tr })">
           <td />
 
           <th
-            v-for="(tier, index) in tiers"
+            v-for="(tier, index) in props.tiers"
             :key="index"
             scope="col"
             data-slot="tier"
-            :class="ui.tier({ class: uiProp?.tier, highlight: tier.highlight })"
+            :class="ui.tier({ class: props.ui?.tier, highlight: tier.highlight })"
           >
             <ReuseTierTemplate :tier="tier" />
           </th>
         </tr>
       </thead>
 
-      <tbody data-slot="tbody" :class="ui.tbody({ class: uiProp?.tbody })">
-        <template v-for="(section, sectionIndex) in sections" :key="sectionIndex">
-          <tr data-slot="tr" :class="ui.tr({ class: uiProp?.tr, section: sectionIndex > 0 })">
-            <th scope="row" data-slot="th" :class="ui.th({ class: uiProp?.th })">
-              <div v-if="section.title || !!slots['section-title'] || !!slots[(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)]" data-slot="sectionTitle" :class="ui.sectionTitle({ class: uiProp?.sectionTitle })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: props.ui?.tbody })">
+        <template v-for="(section, sectionIndex) in props.sections" :key="sectionIndex">
+          <tr data-slot="tr" :class="ui.tr({ class: props.ui?.tr, section: sectionIndex > 0 })">
+            <th scope="row" data-slot="th" :class="ui.th({ class: props.ui?.th })">
+              <div v-if="section.title || !!slots['section-title'] || !!slots[(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)]" data-slot="sectionTitle" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
                 <slot :name="(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)" :section="section">
                   <slot name="section-title" :section="section">
                     {{ section.title }}
@@ -277,16 +278,16 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </th>
 
             <td
-              v-for="(tier, index) in tiers"
+              v-for="(tier, index) in props.tiers"
               :key="`${sectionIndex}-tier-${index}`"
               data-slot="td"
-              :class="ui.td({ class: uiProp?.td, highlight: tier.highlight })"
+              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
             />
           </tr>
 
           <tr v-for="(feature, featureIndex) in section.features" :key="`${sectionIndex}-feature-${featureIndex}`">
-            <th scope="row" data-slot="th" :class="ui.th({ class: uiProp?.th })">
-              <div data-slot="featureTitle" :class="ui.featureTitle({ class: uiProp?.featureTitle })">
+            <th scope="row" data-slot="th" :class="ui.th({ class: props.ui?.th })">
+              <div data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">
                 <slot :name="(`feature-${formatSlotName(feature)}-title` as keyof PricingTableSlots<T>)" :feature="feature" :section="section">
                   <slot name="feature-title" :feature="feature" :section="section">
                     {{ feature.title }}
@@ -296,12 +297,12 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </th>
 
             <td
-              v-for="(tier, index) in tiers"
+              v-for="(tier, index) in props.tiers"
               :key="`${sectionIndex}-feature-${featureIndex}-tier-${index}`"
               data-slot="td"
-              :class="ui.td({ class: uiProp?.td, highlight: tier.highlight })"
+              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
             >
-              <div data-slot="featureValue" :class="ui.featureValue({ class: uiProp?.featureValue })">
+              <div data-slot="featureValue" :class="ui.featureValue({ class: props.ui?.featureValue })">
                 <slot :name="(`feature-${formatSlotName(feature)}-value` as keyof PricingTableSlots<T>)" :feature="feature" :tier="(tier as T)" :section="section">
                   <slot name="feature-value" :feature="feature" :tier="(tier as T)" :section="section">
                     <ReuseFeatureTemplate :tier="tier" :feature="feature" />
@@ -314,12 +315,12 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
       </tbody>
     </table>
 
-    <ul data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <li v-for="(tier, index) in tiers" :key="index" data-slot="item" :class="ui.item({ class: uiProp?.item, highlight: tier.highlight })">
+    <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(tier, index) in props.tiers" :key="index" data-slot="item" :class="ui.item({ class: props.ui?.item, highlight: tier.highlight })">
         <ReuseTierTemplate :tier="tier" />
 
-        <div v-for="(section, sectionIndex) in sections" :key="`section-${sectionIndex}`" data-slot="section" :class="ui.section({ class: uiProp?.section })">
-          <div v-if="section.title" data-slot="sectionTitle" :class="ui.sectionTitle({ class: uiProp?.sectionTitle })">
+        <div v-for="(section, sectionIndex) in props.sections" :key="`section-${sectionIndex}`" data-slot="section" :class="ui.section({ class: props.ui?.section })">
+          <div v-if="section.title" data-slot="sectionTitle" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
             <slot :name="(`section-${formatSlotName(section)}-title` as keyof PricingTableSlots<T>)" :section="section">
               <slot name="section-title" :section="section">
                 {{ section.title }}
@@ -327,8 +328,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
             </slot>
           </div>
 
-          <div v-for="(feature, featureIndex) in section.features" :key="`section-${sectionIndex}-feature-${featureIndex}`" data-slot="feature" :class="ui.feature({ class: uiProp?.feature })">
-            <div data-slot="featureTitle" :class="ui.featureTitle({ class: uiProp?.featureTitle })">
+          <div v-for="(feature, featureIndex) in section.features" :key="`section-${sectionIndex}-feature-${featureIndex}`" data-slot="feature" :class="ui.feature({ class: props.ui?.feature })">
+            <div data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">
               <slot :name="(`feature-${formatSlotName(feature)}-title` as keyof PricingTableSlots<T>)" :feature="feature" :section="section">
                 <slot name="feature-title" :feature="feature" :section="section">
                   {{ feature.title }}
@@ -336,7 +337,7 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate<{ t
               </slot>
             </div>
 
-            <div data-slot="featureValue" :class="ui.featureValue({ class: uiProp?.featureValue })">
+            <div data-slot="featureValue" :class="ui.featureValue({ class: props.ui?.featureValue })">
               <slot :name="(`feature-${formatSlotName(feature)}-value` as keyof PricingTableSlots<T>)" :feature="feature" :tier="(tier as T)" :section="section">
                 <slot name="feature-value" :feature="feature" :tier="(tier as T)" :section="section">
                   <ReuseFeatureTemplate :tier="tier" :feature="feature" />
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 5b825a63e4..e47087ccab 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -54,14 +54,15 @@ export type ProgressSlots = {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive, ProgressRoot, ProgressIndicator, useForwardPropsEmits } from 'reka-ui'
+import { Primitive, ProgressRoot, ProgressIndicator } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<ProgressProps>(), {
+const _props = withDefaults(defineProps<ProgressProps>(), {
   inverted: false,
   modelValue: null,
   orientation: 'horizontal'
@@ -69,11 +70,12 @@ const props = withDefaults(defineProps<ProgressProps>(), {
 const emits = defineEmits<ProgressEmits>()
 const slots = defineSlots<ProgressSlots>()
 
+const props = useComponentProps('progress', _props)
+
 const { dir } = useLocale()
 const appConfig = useAppConfig() as Progress['AppConfig']
-const uiProp = useComponentUI('progress', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'getValueText', 'modelValue'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'getValueLabel', 'getValueText', 'modelValue'), emits)
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
 const hasSteps = computed(() => Array.isArray(props.max))
@@ -159,6 +161,7 @@ function stepVariant(index: number | string) {
   return 'other'
 }
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress || {}) })({
   animation: props.animation,
   size: props.size,
@@ -169,19 +172,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!isIndeterminate && (status || !!slots.status)" data-slot="status" :class="ui.status({ class: uiProp?.status })" :style="statusStyle">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!isIndeterminate && (props.status || !!slots.status)" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
     </div>
 
-    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: uiProp?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="indicatorStyle" />
+    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
+      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: uiProp?.steps })">
-      <div v-for="(step, index) in max" :key="index" data-slot="step" :class="ui.step({ class: uiProp?.step, step: stepVariant(index) })">
+    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })">
+      <div v-for="(step, index) in props.max" :key="index" data-slot="step" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}
         </slot>
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index f7bf8f5f0a..add24a6567 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -90,16 +90,16 @@ export interface RadioGroupSlots<T extends RadioGroupItem[] = RadioGroupItem[]>
 
 <script setup lang="ts" generic="T extends RadioGroupItem[], VK extends GetItemKeys<T> = 'value'">
 import { computed, useId } from 'vue'
-import { RadioGroupRoot, RadioGroupItem as RRadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'reka-ui'
+import { RadioGroupRoot, RadioGroupItem as RRadioGroupItem, RadioGroupIndicator, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
-import { useResolvedVariants } from '../composables/useResolvedVariants'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useFormField } from '../composables/useFormField'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<RadioGroupProps<T, VK>>(), {
+const _props = withDefaults(defineProps<RadioGroupProps<T, VK>>(), {
   valueKey: 'value' as never,
   labelKey: 'label',
   descriptionKey: 'description',
@@ -108,23 +108,23 @@ const props = withDefaults(defineProps<RadioGroupProps<T, VK>>(), {
 const emits = defineEmits<RadioGroupEmits<T, VK>>()
 const slots = defineSlots<RadioGroupSlots<T>>()
 
+const props = useComponentProps<RadioGroupProps<T, VK>>('radioGroup', _props)
+
 const appConfig = useAppConfig() as RadioGroup['AppConfig']
-const uiProp = useComponentUI('radioGroup', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'loop', 'required'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'loop', 'required'), emits)
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<RadioGroupProps<T>>(props, { bind: false })
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<RadioGroupProps<T>>(_props, { bind: false })
 const id = _id.value ?? useId()
 
-const { variant } = useResolvedVariants('radioGroup', props, theme, ['variant'])
-
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup || {}) })({
-  size: size.value,
-  color: color.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
   disabled: disabled.value,
   required: props.required,
   orientation: props.orientation,
-  variant: variant.value,
+  variant: props.variant,
   indicator: props.indicator
 }))
 
@@ -179,43 +179,43 @@ function onUpdate(value: any) {
   <RadioGroupRoot
     :id="id"
     v-bind="rootProps"
-    :model-value="(modelValue as Exclude<RadioGroupItem, boolean> | Exclude<RadioGroupItem, boolean>[])"
-    :default-value="(defaultValue as Exclude<RadioGroupItem, boolean> | Exclude<RadioGroupItem, boolean>[])"
-    :orientation="orientation"
+    :model-value="(props.modelValue as Exclude<RadioGroupItem, boolean> | Exclude<RadioGroupItem, boolean>[])"
+    :default-value="(props.defaultValue as Exclude<RadioGroupItem, boolean> | Exclude<RadioGroupItem, boolean>[])"
+    :orientation="props.orientation"
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: uiProp?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="props.legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
-          {{ legend }}
+          {{ props.legend }}
         </slot>
       </legend>
 
-      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })">
-        <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
+      <component :is="(!props.variant || props.variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled || disabled"
             data-slot="base"
-            :class="ui.base({ class: [uiProp?.base, item.ui?.base], disabled: item.disabled || disabled })"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled || disabled })"
           >
-            <RadioGroupIndicator data-slot="indicator" :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })" />
+            <RadioGroupIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
           </RRadioGroupItem>
         </div>
 
-        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
-          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label], disabled: item.disabled || disabled })">
-            <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
+        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
+            <slot name="label" :item="item" :model-value="(props.modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>
           </component>
-          <p v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description], disabled: item.disabled || disabled })">
-            <slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
+          <p v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled || disabled })">
+            <slot name="description" :item="item" :model-value="(props.modelValue as RadioGroupValue)">
               {{ item.description }}
             </slot>
           </p>
diff --git a/src/runtime/components/ScrollArea.vue b/src/runtime/components/ScrollArea.vue
index 43e396af99..0b4c79a14d 100644
--- a/src/runtime/components/ScrollArea.vue
+++ b/src/runtime/components/ScrollArea.vue
@@ -86,21 +86,24 @@ import { Primitive } from 'reka-ui'
 import { defu } from 'defu'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import { useLocale } from '../composables/useLocale'
 
-const props = withDefaults(defineProps<ScrollAreaProps<T>>(), {
+const _props = withDefaults(defineProps<ScrollAreaProps<T>>(), {
   orientation: 'vertical',
   virtualize: false
 })
+
 defineSlots<ScrollAreaSlots<T>>()
 const emits = defineEmits<ScrollAreaEmits>()
 
+const props = useComponentProps<ScrollAreaProps<T>>('scrollArea', _props)
+
 const { dir } = useLocale()
 const appConfig = useAppConfig() as ScrollArea['AppConfig']
-const uiProp = useComponentUI('scrollArea', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.scrollArea || {}) })({
   orientation: props.orientation
 }))
@@ -267,15 +270,15 @@ defineExpose({
 <template>
   <Primitive
     ref="rootRef"
-    :as="as"
+    :as="props.as"
     data-slot="root"
-    :data-orientation="orientation"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :data-orientation="props.orientation"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <template v-if="virtualizer">
       <div
         data-slot="viewport"
-        :class="ui.viewport({ class: uiProp?.viewport })"
+        :class="ui.viewport({ class: props.ui?.viewport })"
         :style="virtualViewportStyle"
       >
         <div
@@ -284,11 +287,11 @@ defineExpose({
           :ref="measureElement"
           :data-index="virtualItem.index"
           data-slot="item"
-          :class="ui.item({ class: uiProp?.item })"
+          :class="ui.item({ class: props.ui?.item })"
           :style="getVirtualItemStyle(virtualItem)"
         >
           <slot
-            :item="(items?.[virtualItem.index] as T)"
+            :item="(props.items?.[virtualItem.index] as T)"
             :index="virtualItem.index"
             :virtual-item="virtualItem"
           />
@@ -297,13 +300,13 @@ defineExpose({
     </template>
 
     <template v-else>
-      <div data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-        <template v-if="items">
+      <div data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+        <template v-if="props.items">
           <div
-            v-for="(item, index) in items"
+            v-for="(item, index) in props.items"
             :key="getItemKey(item, index)"
             data-slot="item"
-            :class="ui.item({ class: uiProp?.item })"
+            :class="ui.item({ class: props.ui?.item })"
           >
             <slot :item="item" :index="index" />
           </div>
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index c5eb2e06d1..fb16027a7d 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -149,12 +149,12 @@ export interface SelectSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>">
 import { useTemplateRef, computed, onMounted, toRef } from 'vue'
-import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectValue as RSelectValue, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
+import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectValue as RSelectValue, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
-import { useResolvedVariants } from '../composables/useResolvedVariants'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useFieldGroup, FieldGroupReset } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -167,7 +167,7 @@ import UChip from './Chip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<SelectProps<T, VK, M, Mod>>(), {
+const _props = withDefaults(defineProps<SelectProps<T, VK, M, Mod>>(), {
   valueKey: 'value' as never,
   labelKey: 'label',
   descriptionKey: 'description',
@@ -177,31 +177,31 @@ const props = withDefaults(defineProps<SelectProps<T, VK, M, Mod>>(), {
 const emits = defineEmits<SelectEmits<T, VK, M, Mod>>()
 const slots = defineSlots<SelectSlots<T, VK, M, Mod>>()
 
+const props = useComponentProps<SelectProps<T, VK, M, Mod>>('select', _props)
+
 const appConfig = useAppConfig() as Select['AppConfig']
-const uiProp = useComponentUI('select', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
-const { position } = useResolvedVariants('select', props, theme, ['position'], {
-  position: () => props.content?.position
-})
+const position = computed(() => props.content?.position ?? appConfig.ui?.select?.defaultVariants?.position ?? theme.defaultVariants?.position)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: position.value }) as SelectContentProps)
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }) as SelectArrowProps)
 
-const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
+const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
 const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value)
 
 const isItemAligned = computed(() => position.value === 'item-aligned')
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.select || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: selectSize?.value,
+  size: selectSize.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -309,9 +309,9 @@ defineExpose({
     v-slot="{ modelValue, open }"
     :name="name"
     v-bind="rootProps"
-    :autocomplete="autocomplete"
+    :autocomplete="props.autocomplete"
     :disabled="disabled"
-    :default-value="(defaultValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
+    :default-value="(props.defaultValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
     :model-value="(modelValue as Exclude<SelectItem, boolean> | Exclude<SelectItem, boolean>[])"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
@@ -320,90 +320,90 @@ defineExpose({
       :id="id"
       ref="triggerRef"
       data-slot="base"
-      :class="ui.base({ class: [uiProp?.base, props.class] })"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
       v-bind="{ ...$attrs, ...ariaAttrs }"
     >
-      <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+      <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: uiProp?.itemLeadingAvatar })" />
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
         </slot>
       </span>
 
       <template v-for="displayedModelValue in [displayValue(modelValue as any)]" :key="displayedModelValue">
         <RSelectValue
           :data-slot="displayedModelValue != null ? 'value' : 'placeholder'"
-          :class="displayedModelValue != null ? ui.value({ class: uiProp?.value }) : ui.placeholder({ class: uiProp?.placeholder })"
+          :class="displayedModelValue != null ? ui.value({ class: props.ui?.value }) : ui.placeholder({ class: props.ui?.placeholder })"
         >
           <slot :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-            {{ displayedModelValue ?? (placeholder ?? '&nbsp;') }}
+            {{ displayedModelValue ?? (props.placeholder ?? '&nbsp;') }}
           </slot>
         </RSelectValue>
       </template>
 
-      <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+      <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
         <slot name="trailing" :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-          <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+          <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
         </slot>
       </span>
     </SelectTrigger>
 
     <SelectPortal v-bind="portalProps">
       <FieldGroupReset>
-        <SelectContent data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps">
+        <SelectContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
           <slot name="content-top" />
 
-          <component :is="isItemAligned ? SelectViewport : 'div'" ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-            <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+          <component :is="isItemAligned ? SelectViewport : 'div'" ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+            <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
               <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-                <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+                <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
                   {{ get(item, props.labelKey as string) }}
                 </SelectLabel>
 
-                <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+                <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
                 <RSelectItem
                   v-else
                   data-slot="item"
-                  :class="ui.item({ class: [uiProp?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
+                  :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
                   :disabled="isSelectItem(item) && item.disabled"
                   :value="isSelectItem(item) ? get(item, props.valueKey as string) : item"
                   @select="isSelectItem(item) && item.onSelect?.($event)"
                 >
                   <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
                     <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-                      <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                      <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                      <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                      <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
                       <UChip
                         v-else-if="isSelectItem(item) && item.chip"
-                        :size="((item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                        :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
                         inset
                         standalone
                         v-bind="item.chip"
                         data-slot="itemLeadingChip"
-                        :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
                       />
                     </slot>
 
-                    <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
-                      <SelectItemText data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+                    <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+                      <SelectItemText data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
                         <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
                           {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
                         </slot>
                       </SelectItemText>
 
-                      <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+                      <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
                         <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
                           {{ get(item, props.descriptionKey as string) }}
                         </slot>
                       </span>
                     </span>
 
-                    <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+                    <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
                       <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
                       <SelectItemIndicator as-child>
-                        <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+                        <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
                       </SelectItemIndicator>
                     </span>
                   </slot>
@@ -414,7 +414,7 @@ defineExpose({
 
           <slot name="content-bottom" />
 
-          <SelectArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+          <SelectArrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
         </SelectContent>
       </FieldGroupReset>
     </SelectPortal>
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 052f1ff8fc..68fda03a6f 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -226,11 +226,12 @@ export interface SelectMenuSlots<
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false">
 import { useTemplateRef, computed, onMounted, toRef, toRaw } from 'vue'
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits } from 'reka-ui'
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFieldGroup, FieldGroupReset } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
@@ -248,7 +249,7 @@ import UInput from './Input.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<SelectMenuProps<T, VK, M, Mod, C>>(), {
+const _props = withDefaults(defineProps<SelectMenuProps<T, VK, M, Mod, C>>(), {
   portal: true,
   searchInput: true,
   labelKey: 'label',
@@ -262,13 +263,14 @@ const props = withDefaults(defineProps<SelectMenuProps<T, VK, M, Mod, C>>(), {
 const emits = defineEmits<SelectMenuEmits<T, VK, M, Mod, C>>()
 const slots = defineSlots<SelectMenuSlots<T, VK, M, Mod, C>>()
 
+const props = useComponentProps<SelectMenuProps<T, VK, M, Mod, C>>('selectMenu', _props)
+
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as SelectMenu['AppConfig']
-const uiProp = useComponentUI('selectMenu', props)
 const { filterGroups } = useFilter()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'highlightOnHover', 'by'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'highlightOnHover', 'by'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }) as ComboboxArrowProps)
@@ -283,8 +285,8 @@ const virtualizerProps = toRef(() => {
 })
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('selectMenu.search'), variant: 'none' }) as Omit<InputProps, 'modelValue' | 'defaultValue'>)
 
-const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(_props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(_props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
 const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value)
@@ -303,12 +305,13 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: S
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.selectMenu || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: selectSize?.value,
+  size: selectSize?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -359,6 +362,7 @@ const filteredGroups = computed(() => {
 })
 const filteredItems = computed(() => filteredGroups.value.flatMap(group => group))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const createItem = computed(() => {
   if (!props.createItem || !searchTerm.value) {
     return false
@@ -496,11 +500,11 @@ defineExpose({
   <DefineCreateItemTemplate>
     <ComboboxItem
       data-slot="item"
-      :class="ui.item({ class: uiProp?.item })"
+      :class="ui.item({ class: props.ui?.item })"
       :value="searchTerm"
       @select="onCreate"
     >
-      <span data-slot="itemLabel" :class="ui.itemLabel({ class: uiProp?.itemLabel })">
+      <span data-slot="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
           {{ t('selectMenu.create', { label: searchTerm }) }}
         </slot>
@@ -509,54 +513,54 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <DefineItemTemplate v-slot="{ item, index }">
-    <ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+    <ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
       {{ get(item, props.labelKey as string) }}
     </ComboboxLabel>
 
-    <ComboboxSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+    <ComboboxSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
     <ComboboxItem
       v-else
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
+      :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
       :disabled="isSelectItem(item) && item.disabled"
       :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey as string) : item"
       @select="onSelect($event, item)"
     >
       <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
         <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
-          <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-          <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
             v-else-if="isSelectItem(item) && item.chip"
-            :size="((item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+            :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
             inset
             standalone
             v-bind="item.chip"
             data-slot="itemLeadingChip"
-            :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+            :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
           />
         </slot>
 
-        <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
-          <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+        <span data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+          <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
             <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
               {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }}
             </slot>
           </span>
 
-          <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+          <span v-if="isSelectItem(item) && (get(item, props.descriptionKey as string) || !!slots['item-description'])" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
             <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
               {{ get(item, props.descriptionKey as string) }}
             </slot>
           </span>
         </span>
 
-        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
           <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
           <ComboboxItemIndicator as-child>
-            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+            <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
           </ComboboxItemIndicator>
         </span>
       </slot>
@@ -566,7 +570,7 @@ defineExpose({
   <ComboboxRoot
     :id="id"
     v-slot="{ modelValue, open }"
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    v-bind="({ ...rootProps, ...$attrs, ...ariaAttrs } as any)"
     ignore-filter
     as-child
     :name="name"
@@ -575,43 +579,43 @@ defineExpose({
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })" tabindex="0">
-        <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+      <ComboboxTrigger ref="triggerRef" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
+        <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-            <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-            <UAvatar v-else-if="!!avatar" :size="((uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: uiProp?.itemLeadingAvatar })" />
+            <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
           </slot>
         </span>
 
         <slot :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
           <template v-for="displayedModelValue in [displayValue(modelValue as any)]" :key="displayedModelValue">
-            <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" data-slot="value" :class="ui.value({ class: uiProp?.value })">
+            <span v-if="displayedModelValue !== undefined && displayedModelValue !== null" data-slot="value" :class="ui.value({ class: props.ui?.value })">
               {{ displayedModelValue }}
             </span>
-            <span v-else data-slot="placeholder" :class="ui.placeholder({ class: uiProp?.placeholder })">
-              {{ placeholder ?? '&nbsp;' }}
+            <span v-else data-slot="placeholder" :class="ui.placeholder({ class: props.ui?.placeholder })">
+              {{ props.placeholder ?? '&nbsp;' }}
             </span>
           </template>
         </slot>
 
-        <span v-if="isTrailing || !!slots.trailing || !!clear" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+        <span v-if="isTrailing || !!slots.trailing || !!props.clear" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :model-value="(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" :open="open" :ui="ui">
-            <ComboboxCancel v-if="!!clear && !isModelValueEmpty(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" as-child>
+            <ComboboxCancel v-if="!!props.clear && !isModelValueEmpty(modelValue as ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>)" as-child>
               <UButton
                 as="span"
-                :icon="clearIcon || appConfig.ui.icons.close"
+                :icon="props.clearIcon || appConfig.ui.icons.close"
                 :size="selectSize"
                 variant="link"
                 color="neutral"
                 tabindex="-1"
                 v-bind="clearProps"
                 data-slot="trailingClear"
-                :class="ui.trailingClear({ class: uiProp?.trailingClear })"
+                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
                 @click.stop="onClear"
               />
             </ComboboxCancel>
 
-            <UIcon v-else-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+            <UIcon v-else-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
           </slot>
         </span>
       </ComboboxTrigger>
@@ -619,33 +623,33 @@ defineExpose({
 
     <ComboboxPortal v-bind="portalProps">
       <FieldGroupReset>
-        <ComboboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps">
-          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: uiProp?.focusScope })">
+        <ComboboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })">
             <slot name="content-top" />
 
-            <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
+            <ComboboxInput v-if="!!props.searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
               <UInput
                 autofocus
                 autocomplete="off"
                 :size="selectSize"
                 v-bind="searchInputProps"
                 :model-modifiers="{
-                  trim: modelModifiers?.trim
+                  trim: props.modelModifiers?.trim
                 }"
                 data-slot="input"
-                :class="ui.input({ class: uiProp?.input })"
+                :class="ui.input({ class: props.ui?.input })"
                 @change.stop
               />
             </ComboboxInput>
 
-            <ComboboxEmpty data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+            <ComboboxEmpty data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
               <slot name="empty" :search-term="searchTerm">
                 {{ searchTerm ? t('selectMenu.noMatch', { searchTerm }) : t('selectMenu.noData') }}
               </slot>
             </ComboboxEmpty>
 
-            <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-              <template v-if="!!virtualize">
+            <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+              <template v-if="!!props.virtualize">
                 <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
                 <ComboboxVirtualizer
@@ -661,15 +665,15 @@ defineExpose({
               </template>
 
               <template v-else>
-                <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                <ComboboxGroup v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                   <ReuseCreateItemTemplate />
                 </ComboboxGroup>
 
-                <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                   <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
                 </ComboboxGroup>
 
-                <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: props.ui?.group })">
                   <ReuseCreateItemTemplate />
                 </ComboboxGroup>
               </template>
@@ -678,7 +682,7 @@ defineExpose({
             <slot name="content-bottom" />
           </FocusScope>
 
-          <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+          <ComboboxArrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
         </ComboboxContent>
       </FieldGroupReset>
     </ComboboxPortal>
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index d065190f65..338191aa62 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -51,24 +51,27 @@ export interface SeparatorSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Separator, useForwardProps } from 'reka-ui'
+import { Separator } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 
-const props = withDefaults(defineProps<SeparatorProps>(), {
+const _props = withDefaults(defineProps<SeparatorProps>(), {
   orientation: 'horizontal'
 })
 const slots = defineSlots<SeparatorSlots>()
 
+const props = useComponentProps('separator', _props)
+
 const appConfig = useAppConfig() as Separator['AppConfig']
-const uiProp = useComponentUI('separator', props)
 
 const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })({
   color: props.color,
   orientation: props.orientation,
@@ -78,19 +81,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.separator ||
 </script>
 
 <template>
-  <Separator v-bind="rootProps" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="border" :class="ui.border({ class: uiProp?.border })" />
+  <Separator v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="border" :class="ui.border({ class: props.ui?.border })" />
 
-    <template v-if="label || icon || avatar || !!slots.default">
-      <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+    <template v-if="props.label || props.icon || props.avatar || !!slots.default">
+      <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
         <slot :ui="ui">
-          <span v-if="label" data-slot="label" :class="ui.label({ class: uiProp?.label })">{{ label }}</span>
-          <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-          <UAvatar v-else-if="avatar" :size="((uiProp?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+          <span v-if="props.label" data-slot="label" :class="ui.label({ class: props.ui?.label })">{{ props.label }}</span>
+          <UIcon v-else-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UAvatar v-else-if="props.avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
       </div>
 
-      <div data-slot="border" :class="ui.border({ class: uiProp?.border })" />
+      <div data-slot="border" :class="ui.border({ class: props.ui?.border })" />
     </template>
   </Separator>
 </template>
diff --git a/src/runtime/components/Sidebar.vue b/src/runtime/components/Sidebar.vue
index 4f6641da07..64acb33c83 100644
--- a/src/runtime/components/Sidebar.vue
+++ b/src/runtime/components/Sidebar.vue
@@ -94,7 +94,7 @@ import { Primitive } from 'reka-ui'
 import { defu } from 'defu'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
@@ -104,7 +104,7 @@ import UDrawer from './Drawer.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<SidebarProps<T>>(), {
+const _props = withDefaults(defineProps<SidebarProps<T>>(), {
   as: 'aside',
   variant: 'sidebar',
   collapsible: 'offcanvas',
@@ -115,6 +115,8 @@ const props = withDefaults(defineProps<SidebarProps<T>>(), {
 })
 const slots = defineSlots<SidebarSlots>()
 
+const props = useComponentProps<SidebarProps<T>>('sidebar', _props)
+
 const [DefineInnerTemplate, ReuseInnerTemplate] = createReusableTemplate()
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate()
 
@@ -171,7 +173,6 @@ watch(openMobile, (value) => {
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as Sidebar['AppConfig']
-const uiProp = useComponentUI('sidebar', props)
 
 const state = computed<SidebarState>(() => open.value ? 'expanded' : 'collapsed')
 
@@ -184,6 +185,7 @@ function closeSidebar() {
 
 const hasHeader = computed(() => !!slots.header || props.title || !!slots.title || props.description || !!slots.description || !!slots.actions || canClose.value || !!slots.close)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.sidebar || {}) })({
   side: props.side,
   variant: props.variant,
@@ -206,35 +208,35 @@ const menuProps = toRef(() => defu(props.menu, {
 
 <template>
   <DefineContentTemplate>
-    <div v-if="hasHeader" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+    <div v-if="hasHeader" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :state="state" :open="open" :close="closeSidebar">
-        <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-          <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title || props.description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <p v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
             <slot name="title" :state="state">
-              {{ title }}
+              {{ props.title }}
             </slot>
           </p>
 
-          <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+          <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
             <slot name="description" :state="state">
-              {{ description }}
+              {{ props.description }}
             </slot>
           </p>
         </div>
 
-        <div v-if="!!slots.actions || canClose" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+        <div v-if="!!slots.actions || canClose" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions" :state="state" />
 
           <slot name="close" :state="state" :ui="ui">
             <UButton
               v-if="canClose"
-              :icon="closeIcon || appConfig.ui.icons.close"
+              :icon="props.closeIcon || appConfig.ui.icons.close"
               color="neutral"
               variant="ghost"
               :aria-label="t('sidebar.close')"
               v-bind="(typeof props.close === 'object' ? props.close : {})"
               data-slot="close"
-              :class="ui.close({ class: uiProp?.close })"
+              :class="ui.close({ class: props.ui?.close })"
               @click="closeSidebar"
             />
           </slot>
@@ -242,29 +244,29 @@ const menuProps = toRef(() => defu(props.menu, {
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot :state="state" :open="open" :close="closeSidebar" />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :state="state" :open="open" :close="closeSidebar" />
     </div>
   </DefineContentTemplate>
 
   <DefineInnerTemplate>
-    <div data-slot="inner" :class="ui.inner({ class: uiProp?.inner })">
+    <div data-slot="inner" :class="ui.inner({ class: props.ui?.inner })">
       <ReuseContentTemplate />
     </div>
   </DefineInnerTemplate>
 
   <!-- Non-collapsible: simple inline sidebar -->
   <Primitive
-    v-if="collapsible === 'none'"
-    :as="as"
+    v-if="props.collapsible === 'none'"
+    :as="props.as"
     v-bind="$attrs"
     data-slot="root"
-    :data-variant="variant"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :data-variant="props.variant"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <ReuseInnerTemplate />
   </Primitive>
@@ -272,37 +274,37 @@ const menuProps = toRef(() => defu(props.menu, {
   <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
   <template v-else>
     <Primitive
-      :as="as"
+      :as="props.as"
       v-bind="$attrs"
       data-slot="root"
       :data-state="state"
-      :data-collapsible="state === 'collapsed' ? collapsible : undefined"
-      :data-variant="variant"
-      :data-side="side"
-      :class="ui.root({ class: [uiProp?.root, props.class] })"
+      :data-collapsible="state === 'collapsed' ? props.collapsible : undefined"
+      :data-variant="props.variant"
+      :data-side="props.side"
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
     >
       <!-- Gap spacer: reserves layout space for the fixed sidebar -->
       <div
         data-slot="gap"
         :data-state="state"
-        :class="ui.gap({ class: uiProp?.gap })"
+        :class="ui.gap({ class: props.ui?.gap })"
       />
 
       <!-- Fixed container: the actual visible sidebar -->
       <div
         data-slot="container"
         :data-state="state"
-        :class="ui.container({ class: uiProp?.container })"
+        :class="ui.container({ class: props.ui?.container })"
       >
         <ReuseInnerTemplate />
 
-        <slot v-if="rail" name="rail" :state="state" :ui="ui">
+        <slot v-if="props.rail" name="rail" :state="state" :ui="ui">
           <button
             data-slot="rail"
             :data-state="state"
             :aria-label="t('sidebar.toggle')"
             :tabindex="-1"
-            :class="ui.rail({ class: uiProp?.rail })"
+            :class="ui.rail({ class: props.ui?.rail })"
             @click="open = !open"
           />
         </slot>
diff --git a/src/runtime/components/Skeleton.vue b/src/runtime/components/Skeleton.vue
index 3ec6805f0e..991b05f028 100644
--- a/src/runtime/components/Skeleton.vue
+++ b/src/runtime/components/Skeleton.vue
@@ -21,12 +21,13 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 
-const props = defineProps<SkeletonProps>()
+const _props = defineProps<SkeletonProps>()
+
+const props = useComponentProps('skeleton', _props)
 
 const appConfig = useAppConfig() as Skeleton['AppConfig']
-const uiProp = useComponentUI('skeleton', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.skeleton || {}) }))
@@ -34,12 +35,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.skeleton ||
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     aria-busy="true"
     aria-label="loading"
     aria-live="polite"
     role="alert"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
   >
     <slot />
   </Primitive>
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index bccef2c972..0af81c4d37 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -81,10 +81,11 @@ export interface SlideoverSlots {
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { FieldGroupReset } from '../composables/useFieldGroup'
 import { useLocale } from '../composables/useLocale'
 import { usePortal } from '../composables/usePortal'
@@ -92,7 +93,7 @@ import { pointerDownOutside } from '../utils/overlay'
 import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<SlideoverProps>(), {
+const _props = withDefaults(defineProps<SlideoverProps>(), {
   close: true,
   portal: true,
   overlay: true,
@@ -104,11 +105,12 @@ const props = withDefaults(defineProps<SlideoverProps>(), {
 const emits = defineEmits<SlideoverEmits>()
 const slots = defineSlots<SlideoverSlots>()
 
+const props = useComponentProps('slideover', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Slideover['AppConfig']
-const uiProp = useComponentUI('slideover', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
@@ -129,6 +131,7 @@ const contentEvents = computed(() => {
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover || {}) })({
   transition: props.transition,
   side: props.side,
@@ -145,46 +148,46 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
 
     <DialogPortal v-bind="portalProps">
       <FieldGroupReset>
-        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+        <DialogOverlay v-if="props.overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
         <DialogContent
-          :data-side="side"
+          :data-side="props.side"
           data-slot="content"
-          :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+          :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
           v-bind="contentProps"
           @after-enter="emits('after:enter')"
           @after-leave="emits('after:leave')"
           v-on="contentEvents"
         >
-          <VisuallyHidden v-if="(!title && !slots.title) || (!description && !slots.description) || !!slots.content">
-            <DialogTitle v-if="!title && !slots.title" />
+          <VisuallyHidden v-if="(!props.title && !slots.title) || (!props.description && !slots.description) || !!slots.content">
+            <DialogTitle v-if="!props.title && !slots.title" />
             <DialogTitle v-else-if="!!slots.content">
               <slot name="title">
-                {{ title }}
+                {{ props.title }}
               </slot>
             </DialogTitle>
 
-            <DialogDescription v-if="!description && !slots.description" />
+            <DialogDescription v-if="!props.description && !slots.description" />
             <DialogDescription v-else-if="!!slots.content">
               <slot name="description">
-                {{ description }}
+                {{ props.description }}
               </slot>
             </DialogDescription>
           </VisuallyHidden>
 
           <slot name="content" :close="close">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+            <div v-if="!!slots.header || (props.title || !!slots.title) || (props.description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
               <slot name="header" :close="close">
-                <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-                  <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+                <div v-if="props.title || !!slots.title || props.description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+                  <DialogTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
                     <slot name="title">
-                      {{ title }}
+                      {{ props.title }}
                     </slot>
                   </DialogTitle>
 
-                  <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                  <DialogDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
                     <slot name="description">
-                      {{ description }}
+                      {{ props.description }}
                     </slot>
                   </DialogDescription>
                 </div>
@@ -195,24 +198,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
                   <slot name="close" :ui="ui">
                     <UButton
                       v-if="props.close"
-                      :icon="closeIcon || appConfig.ui.icons.close"
+                      :icon="props.closeIcon || appConfig.ui.icons.close"
                       color="neutral"
                       variant="ghost"
                       :aria-label="t('slideover.close')"
                       v-bind="(typeof props.close === 'object' ? props.close : {})"
                       data-slot="close"
-                      :class="ui.close({ class: uiProp?.close })"
+                      :class="ui.close({ class: props.ui?.close })"
                     />
                   </slot>
                 </DialogClose>
               </slot>
             </div>
 
-            <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+            <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
               <slot name="body" :close="close" />
             </div>
 
-            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
               <slot name="footer" :close="close" />
             </div>
           </slot>
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 01b372b2ec..3865a5b7ac 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -45,15 +45,16 @@ export interface SliderEmits {
 
 <script setup lang="ts" generic="T extends number | number[]">
 import { computed } from 'vue'
-import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'reka-ui'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
 import UTooltip from './Tooltip.vue'
 
-const props = withDefaults(defineProps<SliderProps>(), {
+const _props = withDefaults(defineProps<SliderProps>(), {
   min: 0,
   max: 100,
   step: 1,
@@ -61,14 +62,15 @@ const props = withDefaults(defineProps<SliderProps>(), {
 })
 const emits = defineEmits<SliderEmits>()
 
+const props = useComponentProps<SliderProps>('slider', _props)
+
 const modelValue = defineModel<T>()
 
 const appConfig = useAppConfig() as Slider['AppConfig']
-const uiProp = useComponentUI('slider', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
 
-const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SliderProps>(props)
+const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SliderProps>(_props)
 
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === 'number') {
@@ -91,10 +93,11 @@ const sliderValue = computed({
 
 const thumbs = computed(() => sliderValue.value?.length ?? 1)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })({
   disabled: disabled.value,
-  size: size.value,
-  color: color.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
   orientation: props.orientation
 }))
 
@@ -114,25 +117,25 @@ function onChange(value: any) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack data-slot="track" :class="ui.track({ class: uiProp?.track })">
-      <SliderRange data-slot="range" :class="ui.range({ class: uiProp?.range })" />
+    <SliderTrack data-slot="track" :class="ui.track({ class: props.ui?.track })">
+      <SliderRange data-slot="range" :class="ui.range({ class: props.ui?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
       <UTooltip
-        v-if="!!tooltip"
+        v-if="!!props.tooltip"
         :text="thumbs > 1 ? String(sliderValue?.[thumb - 1]) : String(sliderValue)"
         disable-closing-trigger
-        v-bind="(typeof tooltip === 'object' ? tooltip : {})"
+        v-bind="(typeof props.tooltip === 'object' ? props.tooltip : {})"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index f4ab19d7b5..c78727ea44 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -79,15 +79,16 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
 
 <script setup lang="ts" generic="T extends StepperItem">
 import { computed } from 'vue'
-import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from 'reka-ui'
+import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { tv } from '../utils/tv'
 import { get } from '../utils'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<StepperProps<T>>(), {
+const _props = withDefaults(defineProps<StepperProps<T>>(), {
   orientation: 'horizontal',
   linear: true,
   valueKey: 'value'
@@ -95,13 +96,15 @@ const props = withDefaults(defineProps<StepperProps<T>>(), {
 const emits = defineEmits<StepperEmits<T>>()
 const slots = defineSlots<StepperSlots<T>>()
 
+const props = useComponentProps<StepperProps<T>>('stepper', _props)
+
 const modelValue = defineModel<string | number>()
 
 const appConfig = useAppConfig() as Stepper['AppConfig']
-const uiProp = useComponentUI('stepper', props)
 
 const rootProps = useForwardProps(reactivePick(props, 'as', 'linear'))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.stepper || {}) })({
   orientation: props.orientation,
   size: props.size,
@@ -144,21 +147,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <StepperItem
-        v-for="(item, count) in items"
+        v-for="(item, count) in props.items"
         :key="count"
         :step="count"
         :disabled="item.disabled || props.disabled"
         data-slot="item"
-        :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
-        <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
-          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger] })">
-            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })">
+        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [uiProp?.icon, item.ui?.icon] })" />
+                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -167,20 +170,20 @@ defineExpose({
           </StepperTrigger>
 
           <StepperSeparator
-            v-if="count < items.length - 1"
+            v-if="count < props.items.length - 1"
             data-slot="separator"
-            :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
+        <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
           <slot :name="((item.slot ? `${item.slot}-wrapper` : 'wrapper') as keyof StepperSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
-            <StepperTitle v-if="item.title || !!slots[(item.slot ? `${item.slot}-title` : 'title') as keyof StepperSlots<T>]" as="div" data-slot="title" :class="ui.title({ class: [uiProp?.title, item.ui?.title] })">
+            <StepperTitle v-if="item.title || !!slots[(item.slot ? `${item.slot}-title` : 'title') as keyof StepperSlots<T>]" as="div" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
               <slot :name="((item.slot ? `${item.slot}-title` : 'title') as keyof StepperSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
                 {{ item.title }}
               </slot>
             </StepperTitle>
-            <StepperDescription v-if="item.description || !!slots[(item.slot ? `${item.slot}-description` : 'description') as keyof StepperSlots<T>]" as="div" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description] })">
+            <StepperDescription v-if="item.description || !!slots[(item.slot ? `${item.slot}-description` : 'description') as keyof StepperSlots<T>]" as="div" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
               <slot :name="((item.slot ? `${item.slot}-description` : 'description') as keyof StepperSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
                 {{ item.description }}
               </slot>
@@ -190,7 +193,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || (currentStep?.slot && !!slots[currentStep.slot as keyof StepperSlots<T>])" data-slot="content" :class="ui.content({ class: uiProp?.content })">
+    <div v-if="currentStep?.content || !!slots.content || (currentStep?.slot && !!slots[currentStep.slot as keyof StepperSlots<T>])" data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot
         :name="((currentStep?.slot || 'content') as keyof StepperSlots<T>)"
         :item="(currentStep as Extract<T, { slot: string }>)"
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index d5753b2baa..fe46285156 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -59,26 +59,28 @@ export interface SwitchSlots {
 
 <script setup lang="ts" generic="T = boolean">
 import { computed, useAttrs, useId } from 'vue'
-import { Primitive, SwitchRoot, SwitchThumb, useForwardPropsEmits, Label } from 'reka-ui'
+import { Primitive, SwitchRoot, SwitchThumb, Label } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<SwitchProps<T>>()
+const _props = defineProps<SwitchProps<T>>()
 const slots = defineSlots<SwitchSlots>()
 const emits = defineEmits<SwitchEmits<T>>()
 
+const props = useComponentProps<SwitchProps<T>>('switch', _props)
+
 const appConfig = useAppConfig() as Switch['AppConfig']
-const uiProp = useComponentUI('switch', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'required', 'value', 'defaultValue', 'modelValue', 'trueValue', 'falseValue'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue', 'modelValue', 'trueValue', 'falseValue'), emits)
 
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SwitchProps<T>>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SwitchProps<T>>(_props)
 const id = _id.value ?? useId()
 
 const attrs = useAttrs()
@@ -88,9 +90,10 @@ const forwardedAttrs = computed(() => {
   return rest
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })({
-  size: size.value,
-  color: color.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
   required: props.required,
   loading: props.loading,
   disabled: disabled.value || props.loading
@@ -106,35 +109,35 @@ function onUpdate(value: any) {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         :name="name"
-        :disabled="disabled || loading"
+        :disabled="disabled || props.loading"
         data-slot="base"
-        :class="ui.base({ class: uiProp?.base })"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })">
-          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, checked: true, unchecked: true })" />
+        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="props.loading" :name="props.loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <UIcon v-if="checkedIcon" :name="checkedIcon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, checked: true })" />
-            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, unchecked: true })" />
+            <UIcon v-if="props.checkedIcon" :name="props.checkedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="props.uncheckedIcon" :name="props.uncheckedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="(label || !!slots.label) || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-        <slot name="label" :label="label">
-          {{ label }}
+    <div v-if="(props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">
+          {{ props.label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
+      <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
         </slot>
       </p>
     </div>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 5e508c02aa..53852a1629 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -225,20 +225,21 @@ export type TableSlots<T extends TableData = TableData> = {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed, useTemplateRef, watch, toRef } from 'vue'
-import { Primitive, useForwardProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { reactivePick, createReusableTemplate, createRef } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<TableProps<T>>(), {
+const _props = withDefaults(defineProps<TableProps<T>>(), {
   watchOptions: () => ({
     deep: true
   }),
@@ -246,12 +247,16 @@ const props = withDefaults(defineProps<TableProps<T>>(), {
 })
 const slots = defineSlots<TableSlots<T>>()
 
+const props = useComponentProps<TableProps<T>>('table', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Table['AppConfig']
-const uiProp = useComponentUI('table', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const data = createRef(props.data ?? [], props.watchOptions?.deep !== false)
+// eslint-disable-next-line vue/no-dupe-keys
 const meta = computed(() => props.meta ?? {})
+// eslint-disable-next-line vue/no-dupe-keys
 const columns = computed<TableColumn<T>[]>(() => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) }))))
 
 function processColumns(columns: TableColumn<T>[]): TableColumn<T>[] {
@@ -276,6 +281,7 @@ function processColumns(columns: TableColumn<T>[]): TableColumn<T>[] {
   })
 }
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })({
   sticky: props.sticky,
   loading: props.loading,
@@ -530,7 +536,7 @@ defineExpose({
       data-slot="tr"
       :class="ui.tr({
         class: [
-          uiProp?.tr,
+          props.ui?.tr,
           resolveValue(tableApi.options.meta?.class?.tr, row)
         ]
       })"
@@ -549,7 +555,7 @@ defineExpose({
         data-slot="td"
         :class="ui.td({
           class: [
-            uiProp?.td,
+            props.ui?.td,
             resolveValue(cell.column.columnDef.meta?.class?.td, cell)
           ],
           pinned: !!cell.column.getIsPinned()
@@ -565,23 +571,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
-      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [uiProp?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [uiProp?.base] })">
-      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [uiProp?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="props.caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
-          {{ caption }}
+          {{ props.caption }}
         </slot>
       </caption>
 
-      <thead data-slot="thead" :class="ui.thead({ class: [uiProp?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
+      <thead data-slot="thead" :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -592,7 +598,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
               class: [
-                uiProp?.th,
+                props.ui?.th,
                 resolveValue(header.column.columnDef.meta?.class?.th, header)
               ],
               pinned: !!header.column.getIsPinned()
@@ -608,10 +614,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
       </thead>
 
-      <tbody data-slot="tbody" :class="ui.tbody({ class: [uiProp?.tbody] })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -640,16 +646,16 @@ defineExpose({
           <ReuseRowTemplate v-for="row in bottomRows" :key="row.id" :row="row" />
         </template>
 
-        <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+        <tr v-else-if="props.loading && !!slots['loading']">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              {{ empty || t('table.noData') }}
+              {{ props.empty || t('table.noData') }}
             </slot>
           </td>
         </tr>
@@ -660,11 +666,11 @@ defineExpose({
       <tfoot
         v-if="hasFooter"
         data-slot="tfoot"
-        :class="ui.tfoot({ class: [uiProp?.tfoot] })"
+        :class="ui.tfoot({ class: [props.ui?.tfoot] })"
       >
-        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
@@ -674,7 +680,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
               class: [
-                uiProp?.th,
+                props.ui?.th,
                 resolveValue(header.column.columnDef.meta?.class?.th, header)
               ],
               pinned: !!header.column.getIsPinned()
@@ -693,7 +699,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive ref="rootRef" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseTableTemplate />
   </Primitive>
 </template>
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index f94bec325c..3ec9724610 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -96,17 +96,18 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
 
 <script setup lang="ts" generic="T extends TabsItem">
 import { ref, computed } from 'vue'
-import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UBadge from './Badge.vue'
 
-const props = withDefaults(defineProps<TabsProps<T>>(), {
+const _props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
   orientation: 'horizontal',
@@ -117,11 +118,13 @@ const props = withDefaults(defineProps<TabsProps<T>>(), {
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
 
+const props = useComponentProps<TabsProps<T>>('tabs', _props)
+
 const appConfig = useAppConfig() as Tabs['AppConfig']
-const uiProp = useComponentUI('tabs', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'unmountOnHide'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'unmountOnHide'), emits)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })({
   color: props.color,
   variant: props.variant,
@@ -144,33 +147,33 @@ defineExpose({
 <template>
   <TabsRoot
     v-bind="rootProps"
-    :model-value="modelValue"
-    :default-value="defaultValue"
-    :orientation="orientation"
-    :activation-mode="activationMode"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :activation-mode="props.activationMode"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <TabsList data-slot="list" :class="ui.list({ class: uiProp?.list })">
-      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" />
+    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
       <slot name="list-leading" />
 
       <TabsTrigger
-        v-for="(item, index) of items"
+        v-for="(item, index) of props.items"
         :key="get(item, props.valueKey as string) ?? index"
         :ref="el => setTriggerRef(index, el)"
         :value="get(item, props.valueKey as string) ?? String(index)"
         :disabled="item.disabled"
         data-slot="trigger"
-        :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger] })"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [uiProp?.leadingAvatar, item.ui?.leadingAvatar] })" />
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
+        <span v-if="get(item, props.labelKey as string) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
@@ -179,10 +182,10 @@ defineExpose({
             v-if="item.badge || item.badge === 0"
             color="neutral"
             variant="outline"
-            :size="((item.ui?.trailingBadgeSize || uiProp?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
+            :size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
             v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
             data-slot="trailingBadge"
-            :class="ui.trailingBadge({ class: [uiProp?.trailingBadge, item.ui?.trailingBadge] })"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -190,8 +193,8 @@ defineExpose({
       <slot name="list-trailing" />
     </TabsList>
 
-    <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="get(item, props.valueKey as string) ?? index" :value="get(item, props.valueKey as string) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
+    <template v-if="!!props.content">
+      <TabsContent v-for="(item, index) of props.items" :key="get(item, props.valueKey as string) ?? index" :value="get(item, props.valueKey as string) ?? String(index)" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
         <slot :name="((item.slot || 'content') as keyof TabsSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :ui="ui">
           {{ item.content }}
         </slot>
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index dc37343963..9cba25e5d7 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -71,7 +71,7 @@ import { useTemplateRef, computed, onMounted, nextTick, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
@@ -81,7 +81,7 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<TextareaProps<T, Mod>>(), {
+const _props = withDefaults(defineProps<TextareaProps<T, Mod>>(), {
   rows: 3,
   maxrows: 0,
   autofocusDelay: 0,
@@ -90,20 +90,23 @@ const props = withDefaults(defineProps<TextareaProps<T, Mod>>(), {
 const emits = defineEmits<TextareaEmits<T, Mod>>()
 const slots = defineSlots<TextareaSlots>()
 
+const props = useComponentProps<TextareaProps<T, Mod>>('textarea', _props)
+
+// eslint-disable-next-line vue/no-dupe-keys
 const modelValue = useVModel<TextareaProps<T, Mod>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
 
 const appConfig = useAppConfig() as Textarea['AppConfig']
-const uiProp = useComponentUI('textarea', props)
 
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps<T>>(props, { deferInputValidation: true })
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps<T>>(_props, { deferInputValidation: true })
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: size?.value,
+  size: size?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   autoresize: props.autoresize,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -171,7 +174,7 @@ function autoFocus() {
 
 function autoResize() {
   if (props.autoresize && textareaRef.value) {
-    textareaRef.value.rows = props.rows
+    textareaRef.value.rows = props.rows!
     const overflow = textareaRef.value.style.overflow
     textareaRef.value.style.overflow = 'hidden'
 
@@ -183,7 +186,7 @@ function autoResize() {
     const { scrollHeight } = textareaRef.value
     const newRows = (scrollHeight - padding) / lineHeight
 
-    if (newRows > props.rows) {
+    if (newRows > props.rows!) {
       textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
     }
 
@@ -212,18 +215,18 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <textarea
       :id="id"
       ref="textareaRef"
       :value="modelValue"
       :name="name"
-      :rows="rows"
-      :placeholder="placeholder"
+      :rows="props.rows"
+      :placeholder="props.placeholder"
       data-slot="base"
-      :class="ui.base({ class: uiProp?.base })"
+      :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
-      :required="required"
+      :required="props.required"
       v-bind="{ ...$attrs, ...ariaAttrs }"
       @input="onInput"
       @blur="onBlur"
@@ -233,16 +236,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((uiProp?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>
diff --git a/src/runtime/components/Theme.vue b/src/runtime/components/Theme.vue
index 2ce4277329..97afd2ea9d 100644
--- a/src/runtime/components/Theme.vue
+++ b/src/runtime/components/Theme.vue
@@ -1,10 +1,21 @@
 <script lang="ts">
 import { type VNode, computed } from 'vue'
-import { provideThemeContext } from '../composables/useComponentUI'
-import type { ThemeUI } from '../composables/useComponentUI'
+import defu from 'defu'
+import { injectThemeContext, provideThemeContext } from '../composables/useComponentProps'
+import type { ThemeContextDefaults, ThemeDefaults, ThemeUI } from '../composables/useComponentProps'
 
 export interface ThemeProps {
-  ui: ThemeUI
+  /**
+   * Per-component prop defaults that flow through `useComponentProps` to
+   * every descendant. Each key maps to a partial of that component's props.
+   * @example `{ button: { color: 'warning' }, tooltip: { delayDuration: 0 } }`
+   */
+  props?: ThemeDefaults
+  /**
+   * Per-component slot class overrides (flat shorthand for `:props.<name>.ui`).
+   * @example `{ button: { base: 'rounded-full' } }`
+   */
+  ui?: ThemeUI
 }
 
 export interface ThemeSlots {
@@ -13,10 +24,49 @@ export interface ThemeSlots {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<ThemeProps>()
+const _props = defineProps<ThemeProps>()
+defineSlots<ThemeSlots>()
+
+const parent = injectThemeContext()
+
+const NAMESPACES = new Set(['prose'])
+
+/**
+ * Lift the flat `ThemeUI` shape (`{ button: { base: '...' } }`) into the
+ * per-component defaults shape (`{ button: { ui: { base: '...' } } }`) so
+ * `useComponentProps('button', ...)` reads slot classes from the same
+ * `ThemeContext.defaults` map as every other prop default.
+ *
+ * Namespaced maps like `{ prose: { p: { base: '...' } } }` preserve their
+ * nesting so prose components' `useComponentProps('prose.p', ...)` lookup still
+ * resolves: `{ prose: { p: { ui: { base: '...' } } } }`.
+ */
+function normalizeUi(ui?: ThemeUI): ThemeContextDefaults {
+  if (!ui) return {}
+  const result: ThemeContextDefaults = {}
+  for (const [key, value] of Object.entries(ui)) {
+    if (!value || typeof value !== 'object') continue
+    if (NAMESPACES.has(key)) {
+      const nested: Record<string, any> = {}
+      for (const [childKey, childValue] of Object.entries(value)) {
+        if (childValue && typeof childValue === 'object') {
+          nested[childKey] = { ui: childValue }
+        }
+      }
+      result[key] = nested
+    } else {
+      result[key] = { ui: value }
+    }
+  }
+  return result
+}
 
 provideThemeContext({
-  ui: computed(() => props.ui)
+  defaults: computed(() => defu(
+    (_props.props ?? {}) as ThemeContextDefaults,
+    normalizeUi(_props.ui),
+    parent.defaults.value
+  ))
 })
 </script>
 
diff --git a/src/runtime/components/Timeline.vue b/src/runtime/components/Timeline.vue
index d4a918091f..135af0d575 100644
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -73,23 +73,25 @@ export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
 import { computed } from 'vue'
 import { Primitive, Separator } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import { get } from '../utils'
 import UAvatar from './Avatar.vue'
 
-const props = withDefaults(defineProps<TimelineProps<T>>(), {
+const _props = withDefaults(defineProps<TimelineProps<T>>(), {
   orientation: 'vertical',
   valueKey: 'value'
 })
 const emits = defineEmits<TimelineEmits<T>>()
 const slots = defineSlots<TimelineSlots<T>>()
 
+const props = useComponentProps<TimelineProps<T>>('timeline', _props)
+
 const modelValue = defineModel<string | number>()
 
 const appConfig = useAppConfig() as Timeline['AppConfig']
-const uiProp = useComponentUI('timeline', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeline || {}) })({
   orientation: props.orientation,
   size: props.size,
@@ -128,48 +130,48 @@ function onSelect(event: Event, item: T) {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div
-      v-for="(item, index) in items"
+      v-for="(item, index) in props.items"
       :key="index"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
       @click="onSelect($event, item)"
     >
-      <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
+      <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
         <UAvatar
-          :size="size"
+          :size="props.size"
           :icon="item.icon"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           data-slot="indicator"
-          :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
           :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
         >
           <slot :name="((item.slot ? `${item.slot}-indicator` : 'indicator') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" />
         </UAvatar>
 
         <Separator
-          v-if="index < items.length - 1"
+          v-if="index < props.items.length - 1"
           data-slot="separator"
-          :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })"
+          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
           :orientation="props.orientation"
         />
       </div>
 
-      <div data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
+      <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
         <slot :name="((item.slot ? `${item.slot}-wrapper` : 'wrapper') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
-          <div v-if="item.date || !!slots[(item.slot ? `${item.slot}-date` : 'date') as keyof TimelineSlots<T>]" data-slot="date" :class="ui.date({ class: [uiProp?.date, item.ui?.date] })">
+          <div v-if="item.date || !!slots[(item.slot ? `${item.slot}-date` : 'date') as keyof TimelineSlots<T>]" data-slot="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
             <slot :name="((item.slot ? `${item.slot}-date` : 'date') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
               {{ item.date }}
             </slot>
           </div>
-          <div v-if="item.title || !!slots[(item.slot ? `${item.slot}-title` : 'title') as keyof TimelineSlots<T>]" data-slot="title" :class="ui.title({ class: [uiProp?.title, item.ui?.title] })">
+          <div v-if="item.title || !!slots[(item.slot ? `${item.slot}-title` : 'title') as keyof TimelineSlots<T>]" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
             <slot :name="((item.slot ? `${item.slot}-title` : 'title') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
               {{ item.title }}
             </slot>
           </div>
-          <div v-if="item.description || !!slots[(item.slot ? `${item.slot}-description` : 'description') as keyof TimelineSlots<T>]" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description] })">
+          <div v-if="item.description || !!slots[(item.slot ? `${item.slot}-description` : 'description') as keyof TimelineSlots<T>]" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot :name="((item.slot ? `${item.slot}-description` : 'description') as keyof TimelineSlots<T>)" :item="(item as Extract<T, { slot: string; }>)">
               {{ item.description }}
             </slot>
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index d9fc14564e..c19d0d10ce 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -73,10 +73,11 @@ export interface ToastSlots {
 
 <script setup lang="ts">
 import { ref, computed, onMounted, useTemplateRef } from 'vue'
-import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'reka-ui'
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
@@ -84,7 +85,7 @@ import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
 import UProgress from './Progress.vue'
 
-const props = withDefaults(defineProps<ToastProps>(), {
+const _props = withDefaults(defineProps<ToastProps>(), {
   orientation: 'vertical',
   close: true,
   progress: true
@@ -92,12 +93,14 @@ const props = withDefaults(defineProps<ToastProps>(), {
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
 
+const props = useComponentProps('toast', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as Toast['AppConfig']
-const uiProp = useComponentUI('toast', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.toast || {}) })({
   color: props.color,
   orientation: props.orientation,
@@ -125,65 +128,65 @@ defineExpose({
     ref="rootRef"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
-    :data-orientation="orientation"
+    :data-orientation="props.orientation"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="((uiProp?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+      <UAvatar v-if="props.avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <ToastTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ToastTitle v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
-          <component :is="title()" v-if="typeof title === 'function'" />
-          <component :is="title" v-else-if="typeof title === 'object'" />
+          <component :is="props.title()" v-if="typeof props.title === 'function'" />
+          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
           <template v-else>
-            {{ title }}
+            {{ props.title }}
           </template>
         </slot>
       </ToastTitle>
-      <ToastDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+      <ToastDescription v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
-          <component :is="description()" v-if="typeof description === 'function'" />
-          <component :is="description" v-else-if="typeof description === 'object'" />
+          <component :is="props.description()" v-if="typeof props.description === 'function'" />
+          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
           <template v-else>
-            {{ description }}
+            {{ props.description }}
           </template>
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
-          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <UButton size="xs" :color="color" v-bind="action" />
+          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <UButton size="xs" :color="props.color" v-bind="action" />
           </ToastAction>
         </slot>
       </div>
     </div>
 
-    <div v-if="(orientation === 'horizontal' && (actions?.length || !!slots.actions)) || close" data-slot="actions" :class="ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
+    <div v-if="(props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)) || props.close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)">
         <slot name="actions">
-          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <UButton size="xs" :color="color" v-bind="action" />
+          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <UButton size="xs" :color="props.color" v-bind="action" />
           </ToastAction>
         </slot>
       </template>
 
-      <ToastClose v-if="close || !!slots.close" as-child>
+      <ToastClose v-if="props.close || !!slots.close" as-child>
         <slot name="close" :ui="ui">
           <UButton
-            v-if="close"
-            :icon="closeIcon || appConfig.ui.icons.close"
+            v-if="props.close"
+            :icon="props.closeIcon || appConfig.ui.icons.close"
             color="neutral"
             variant="link"
             :aria-label="t('toast.close')"
-            v-bind="(typeof close === 'object' ? close : {})"
+            v-bind="(typeof props.close === 'object' ? props.close : {})"
             data-slot="close"
-            :class="ui.close({ class: uiProp?.close })"
+            :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />
         </slot>
@@ -191,13 +194,13 @@ defineExpose({
     </div>
 
     <UProgress
-      v-if="progress && open && remaining > 0 && duration"
+      v-if="props.progress && open && remaining > 0 && duration"
       :model-value="remaining / duration * 100"
-      :color="color"
-      v-bind="(typeof progress === 'object' ? progress as Partial<ProgressProps> : {})"
+      :color="props.color"
+      v-bind="(typeof props.progress === 'object' ? props.progress as Partial<ProgressProps> : {})"
       size="sm"
       data-slot="progress"
-      :class="ui.progress({ class: uiProp?.progress })"
+      :class="ui.progress({ class: props.ui?.progress })"
     />
   </ToastRoot>
 </template>
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index dac9cb1f9c..8c6292f2a3 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -48,28 +48,31 @@ export default {
 
 <script setup lang="ts">
 import { ref, computed, toRef, provide } from 'vue'
-import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'reka-ui'
+import { ToastProvider, ToastViewport, ToastPortal } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { useToast, toastMaxInjectionKey } from '../composables/useToast'
 import { usePortal } from '../composables/usePortal'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UToast from './Toast.vue'
 
-const props = withDefaults(defineProps<ToasterProps>(), {
+const _props = withDefaults(defineProps<ToasterProps>(), {
   expand: true,
   portal: true,
   duration: 5000,
   progress: true,
   max: 5
 })
+
 defineSlots<ToasterSlots>()
 
+const props = useComponentProps('toaster', _props)
+
 const { toasts, remove } = useToast()
 const appConfig = useAppConfig() as Toaster['AppConfig']
-const uiProp = useComponentUI('toaster', props)
 
 provide(toastMaxInjectionKey, toRef(() => props.max))
 
@@ -92,6 +95,7 @@ const swipeDirection = computed(() => {
   return 'right'
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.toaster || {}) })({
   position: props.position,
   swipeDirection: swipeDirection.value
@@ -126,7 +130,7 @@ function getOffset(index: number) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
-      :progress="progress"
+      :progress="props.progress"
       v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
       :close="(toast.close as boolean)"
       :data-expanded="expanded"
@@ -141,7 +145,7 @@ function getOffset(index: number) {
         '--transform': 'translateY(var(--translate)) scale(var(--scale))'
       }"
       data-slot="base"
-      :class="ui.base({ class: [uiProp?.base, toast.onClick ? 'cursor-pointer' : undefined] })"
+      :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : undefined] })"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -150,11 +154,11 @@ function getOffset(index: number) {
       <ToastViewport
         :data-expanded="expanded"
         data-slot="viewport"
-        :class="ui.viewport({ class: [uiProp?.viewport, props.class] })"
+        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
         :style="{
           '--scale-factor': '0.05',
-          '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
-          '--gap': position?.startsWith('top') ? '16px' : '-16px',
+          '--translate-factor': props.position?.startsWith('top') ? '1px' : '-1px',
+          '--gap': props.position?.startsWith('top') ? '16px' : '-16px',
           '--front-height': `${frontHeight}px`,
           '--height': `${height}px`
         }"
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 3b8d22ab9f..986f40332f 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -53,27 +53,29 @@ export interface TooltipSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits, injectTooltipProviderContext } from 'reka-ui'
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, injectTooltipProviderContext } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
+import { useForwardProps } from '../composables/useForwardProps'
 import { FieldGroupReset } from '../composables/useFieldGroup'
 import { usePortal } from '../composables/usePortal'
 import { tv } from '../utils/tv'
 import UKbd from './Kbd.vue'
 
-const props = withDefaults(defineProps<TooltipProps>(), {
+const _props = withDefaults(defineProps<TooltipProps>(), {
   portal: true
 })
 const emits = defineEmits<TooltipEmits>()
 const slots = defineSlots<TooltipSlots>()
 
+const props = useComponentProps('tooltip', _props)
+
 const appConfig = useAppConfig() as Tooltip['AppConfig']
-const uiProp = useComponentUI('tooltip', props)
 
 const providerContext = injectTooltipProviderContext()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'ignoreNonKeyboardFocus'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'ignoreNonKeyboardFocus'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, providerContext.content.value, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }) as TooltipArrowProps)
@@ -85,23 +87,23 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {
 </script>
 
 <template>
-  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(text || kbds?.length || !!slots.content) || props.disabled">
-    <TooltipTrigger v-if="!!slots.default || !!reference" v-bind="$attrs" as-child :reference="reference" :class="props.class">
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps" :disabled="!(props.text || props.kbds?.length || !!slots.content) || props.disabled">
+    <TooltipTrigger v-if="!!slots.default || !!props.reference" v-bind="$attrs" as-child :reference="props.reference" :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
       <FieldGroupReset>
-        <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
+        <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
           <slot name="content" :ui="ui">
-            <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
+            <span v-if="props.text" data-slot="text" :class="ui.text({ class: props.ui?.text })">{{ props.text }}</span>
 
-            <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
-              <UKbd v-for="(kbd, index) in kbds" :key="index" :size="((uiProp?.kbdsSize || ui.kbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <span v-if="props.kbds?.length" data-slot="kbds" :class="ui.kbds({ class: props.ui?.kbds })">
+              <UKbd v-for="(kbd, index) in props.kbds" :key="index" :size="((props.ui?.kbdsSize || ui.kbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </span>
           </slot>
 
-          <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+          <TooltipArrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
         </TooltipContent>
       </FieldGroupReset>
     </TooltipPortal>
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index 2f71830aba..63bf07e60d 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -143,11 +143,12 @@ export type TreeSlots<
 
 <script setup lang="ts" generic="T extends TreeItem[], M extends boolean = false">
 import { computed, toRef, useTemplateRef } from 'vue'
-import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from 'reka-ui'
+import { TreeRoot, TreeItem, TreeVirtualizer } from 'reka-ui'
+import { useForwardProps } from '../composables/useForwardProps'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { defu } from 'defu'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { get } from '../utils'
 import { getEstimateSize } from '../utils/virtualizer'
 import { tv } from '../utils/tv'
@@ -155,7 +156,7 @@ import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<TreeProps<T, M>>(), {
+const _props = withDefaults(defineProps<TreeProps<T, M>>(), {
   labelKey: 'label',
   nested: true,
   virtualize: false
@@ -163,11 +164,13 @@ const props = withDefaults(defineProps<TreeProps<T, M>>(), {
 const emits = defineEmits<TreeEmits<T, M>>()
 const slots = defineSlots<TreeSlots<T>>()
 
+const props = useComponentProps<TreeProps<T, M>>('tree', _props)
+
 const appConfig = useAppConfig() as Tree['AppConfig']
-const uiProp = useComponentUI('tree', props)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect', 'bubbleSelect'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect', 'bubbleSelect'), emits)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const as = computed(() => {
   if (typeof props.as === 'string' || typeof props.as?.render === 'function') {
     return { root: props.as, link: 'button' }
@@ -176,6 +179,7 @@ const as = computed(() => {
   return defu(props.as, { root: 'ul', link: 'button' })
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const nested = computed(() => props.virtualize ? false : props.nested)
 
 const flattenedPaddingFormula = computed(() => {
@@ -216,6 +220,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: T
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })({
   color: props.color,
   size: props.size,
@@ -255,7 +260,7 @@ defineExpose({
   <DefineItemTemplate v-slot="{ item, index, level }">
     <li
       role="presentation"
-      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [uiProp?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [uiProp?.item, item.ui?.item] })"
+      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
@@ -273,9 +278,9 @@ defineExpose({
           <component
             :is="as.link"
             :type="as.link === 'button' ? 'button' : undefined"
-            :disabled="item.disabled || disabled"
+            :disabled="item.disabled || props.disabled"
             data-slot="link"
-            :class="ui.link({ class: [uiProp?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || props.disabled })"
             :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : undefined"
           >
             <slot
@@ -292,20 +297,20 @@ defineExpose({
                   v-if="item.icon"
                   :name="item.icon"
                   data-slot="linkLeadingIcon"
-                  :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
-                  :name="isExpanded ? (expandedIcon ?? appConfig.ui.icons.folderOpen) : (collapsedIcon ?? appConfig.ui.icons.folder)"
+                  :name="isExpanded ? (props.expandedIcon ?? appConfig.ui.icons.folderOpen) : (props.collapsedIcon ?? appConfig.ui.icons.folder)"
                   data-slot="linkLeadingIcon"
-                  :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
 
               <span
                 v-if="getItemLabel(item) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof TreeSlots<T>]"
                 data-slot="linkLabel"
-                :class="ui.linkLabel({ class: [uiProp?.linkLabel, item.ui?.linkLabel] })"
+                :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
               >
                 <slot
                   :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof TreeSlots<T>)"
@@ -319,7 +324,7 @@ defineExpose({
               <span
                 v-if="item.trailingIcon || item.children?.length || !!slots[(item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof TreeSlots<T>]"
                 data-slot="linkTrailing"
-                :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, item.ui?.linkTrailing] })"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
               >
                 <slot
                   :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof TreeSlots<T>)"
@@ -330,13 +335,13 @@ defineExpose({
                     v-if="item.trailingIcon"
                     :name="item.trailingIcon"
                     data-slot="linkTrailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                   <UIcon
                     v-else-if="item.children?.length"
-                    :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    :name="props.trailingIcon ?? appConfig.ui.icons.chevronDown"
                     data-slot="linkTrailingIcon"
-                    :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
                   />
                 </slot>
               </span>
@@ -348,7 +353,7 @@ defineExpose({
           v-if="nested && item.children?.length && isExpanded"
           role="group"
           data-slot="listWithChildren"
-          :class="ui.listWithChildren({ class: [uiProp?.listWithChildren, item.ui?.listWithChildren] })"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -365,16 +370,16 @@ defineExpose({
     v-slot="{ flattenItems }"
     v-bind="{ ...rootProps, ...$attrs }"
     :as="as.root"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemKey"
     :default-expanded="defaultExpanded"
-    :selection-behavior="selectionBehavior"
+    :selection-behavior="props.selectionBehavior"
   >
     <TreeVirtualizer
-      v-if="!!virtualize"
+      v-if="!!props.virtualize"
       v-slot="{ item, virtualItem }"
       :text-content="item => getItemLabel(item.value)"
       v-bind="virtualizerProps"
@@ -392,6 +397,6 @@ defineExpose({
       />
     </template>
 
-    <ReuseTreeTemplate v-else :items="items" :level="1" />
+    <ReuseTreeTemplate v-else :items="props.items" :level="1" />
   </TreeRoot>
 </template>
diff --git a/src/runtime/components/User.vue b/src/runtime/components/User.vue
index 332e7a16f2..3bb9aa538b 100644
--- a/src/runtime/components/User.vue
+++ b/src/runtime/components/User.vue
@@ -45,7 +45,7 @@ export interface UserSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentProps } from '../composables/useComponentProps'
 import { tv } from '../utils/tv'
 import UChip from './Chip.vue'
 import UAvatar from './Avatar.vue'
@@ -53,14 +53,16 @@ import ULink from './Link.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<UserProps>(), {
+const _props = withDefaults(defineProps<UserProps>(), {
   orientation: 'horizontal'
 })
 const slots = defineSlots<UserSlots>()
 
+const props = useComponentProps('user', _props)
+
 const appConfig = useAppConfig() as User['AppConfig']
-const uiProp = useComponentUI('user', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.user || {}) })({
   size: props.size,
   orientation: props.orientation,
@@ -69,26 +71,26 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.user || {})
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @click="onClick">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
     <slot name="avatar" :ui="ui">
-      <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
-        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+      <UChip v-if="props.chip && props.avatar" inset v-bind="typeof props.chip === 'object' ? props.chip : {}" :size="props.size">
+        <UAvatar :alt="props.name" v-bind="props.avatar" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>
       <UAvatar
-        v-else-if="avatar"
-        :alt="name"
-        v-bind="avatar"
-        :size="size"
+        v-else-if="props.avatar"
+        :alt="props.name"
+        v-bind="props.avatar"
+        :size="props.size"
         data-slot="avatar"
-        :class="ui.avatar({ class: uiProp?.avatar })"
+        :class="ui.avatar({ class: props.ui?.avatar })"
       />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
-        v-if="to"
-        :aria-label="name"
-        v-bind="{ to, target, ...$attrs }"
+        v-if="props.to"
+        :aria-label="props.name"
+        v-bind="{ to: props.to, target: props.target, ...$attrs }"
         class="focus:outline-none peer"
         raw
       >
@@ -96,14 +98,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.user || {})
       </ULink>
 
       <slot>
-        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: uiProp?.name })">
+        <p v-if="props.name || !!slots.name" data-slot="name" :class="ui.name({ class: props.ui?.name })">
           <slot name="name">
-            {{ name }}
+            {{ props.name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </p>
       </slot>
diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index 1b93478824..16c70fdc27 100644
--- a/src/runtime/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/components/color-mode/ColorModeButton.vue
@@ -15,25 +15,26 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useColorMode, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
+import { useForwardProps } from '../../composables/useForwardProps'
 import { useLocale } from '../../composables/useLocale'
 import UButton from '../Button.vue'
 import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ColorModeButtonProps>(), {
+const _props = withDefaults(defineProps<ColorModeButtonProps>(), {
   color: 'neutral',
   variant: 'ghost'
 })
 
+const props = useComponentProps('button', _props)
+
 const { t } = useLocale()
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
-const uiProp = useComponentUI('button', props)
 
 const buttonProps = useForwardProps(reactiveOmit(props, 'icon'))
 
@@ -57,8 +58,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>
diff --git a/src/runtime/components/content/ContentNavigation.vue b/src/runtime/components/content/ContentNavigation.vue
index 413a39f923..ded50284b6 100644
--- a/src/runtime/components/content/ContentNavigation.vue
+++ b/src/runtime/components/content/ContentNavigation.vue
@@ -93,10 +93,11 @@ export interface ContentNavigationSlots<T extends ContentNavigationLink = Conten
 
 <script setup lang="ts" generic="T extends ContentNavigationLink">
 import { computed } from 'vue'
-import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
+import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from 'reka-ui'
+import { useForwardProps } from '../../composables/useForwardProps'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useRoute, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { pickLinkProps } from '../../utils/link'
 import { tv } from '../../utils/tv'
 import { mapContentNavigationItem } from '../../utils/content'
@@ -108,7 +109,7 @@ import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ContentNavigationProps<T>>(), {
+const _props = withDefaults(defineProps<ContentNavigationProps<T>>(), {
   as: 'nav',
   defaultOpen: undefined,
   level: 0,
@@ -120,14 +121,16 @@ const props = withDefaults(defineProps<ContentNavigationProps<T>>(), {
 const emits = defineEmits<ContentNavigationEmits>()
 const slots = defineSlots<ContentNavigationSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'collapsible', 'type', 'unmountOnHide'), emits)
+const props = useComponentProps<ContentNavigationProps<T>>('contentNavigation', _props)
+
+const rootProps = useForwardProps(reactivePick(props, 'collapsible', 'type', 'unmountOnHide'), emits)
 
 const route = useRoute()
 const appConfig = useAppConfig() as ContentNavigation['AppConfig']
-const uiProp = useComponentUI('contentNavigation', props)
 
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link: ContentNavigationLink, active: boolean }>()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentNavigation || {}) })({
   color: props.color,
   variant: props.variant,
@@ -169,68 +172,68 @@ const defaultValue = computed(() => {
   <DefineLinkTemplate v-slot="{ link, active }">
     <slot name="link" :link="(link as T)" :active="active" :ui="ui">
       <slot name="link-leading" :link="(link as T)" :active="active" :ui="ui">
-        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
       </slot>
 
-      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle], active })">
+      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
         <slot name="link-title" :link="(link as T)" :active="active" :ui="ui">
           {{ link.title }}
         </slot>
 
-        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [uiProp?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
       </span>
 
-      <span v-if="(link.badge || link.badge === 0) || (link.children?.length && !disabled) || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, link.ui?.linkTrailing] })">
+      <span v-if="(link.badge || link.badge === 0) || (link.children?.length && !disabled) || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
         <slot name="link-trailing" :link="(link as T)" :active="active" :ui="ui">
           <UBadge
             v-if="link.badge || link.badge === 0"
             color="neutral"
             variant="outline"
-            :size="((uiProp?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+            :size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
             v-bind="(typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge"
             data-slot="linkTrailingBadge"
-            :class="ui.linkTrailingBadge({ class: uiProp?.linkTrailingBadge })"
+            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
           />
-          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
-          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
         </slot>
       </span>
     </slot>
   </DefineLinkTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
-      <template v-for="(link, index) in navigation" :key="index">
+  <Primitive :as="props.as" v-bind="$attrs" :as-child="props.level! > 0" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="props.level! > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <template v-for="(link, index) in props.navigation" :key="index">
         <AccordionItem
           v-if="link.children?.length"
           as="li"
           :disabled="!!link.disabled"
           data-slot="itemWithChildren"
-          :class="ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })"
+          :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: props.level! > 0 })"
           :value="String(index)"
         >
           <AccordionTrigger
             as="button"
             :class="[
-              ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
-              ui.trigger({ class: [uiProp?.trigger, link.ui?.trigger], disabled: !!link.disabled || disabled })
+              ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
+              ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger], disabled: !!link.disabled || disabled })
             ]"
           >
             <ReuseLinkTemplate :link="link" :active="link.active || false" />
           </AccordionTrigger>
 
-          <AccordionContent data-slot="content" :class="ui.content({ class: [uiProp?.content, link.ui?.content] })">
+          <AccordionContent data-slot="content" :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
             <UContentNavigation
               v-bind="rootProps"
               :navigation="link.children"
-              :default-open="defaultOpen"
-              :level="level + 1"
-              :trailing-icon="trailingIcon"
-              :color="color"
-              :variant="variant"
-              :highlight="highlight"
-              :highlight-color="highlightColor"
-              :ui="uiProp"
+              :default-open="props.defaultOpen"
+              :level="props.level! + 1"
+              :trailing-icon="props.trailingIcon"
+              :color="props.color"
+              :variant="props.variant"
+              :highlight="props.highlight"
+              :highlight-color="props.highlightColor"
+              :ui="props.ui"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
                 <slot :name="name" v-bind="{ ...slotData, link: slotData.link as T }" />
@@ -239,9 +242,9 @@ const defaultValue = computed(() => {
           </AccordionContent>
         </AccordionItem>
 
-        <li v-else data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item], level: level > 0 })">
+        <li v-else data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: props.level! > 0 })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
-            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: props.level! > 0 })">
               <ReuseLinkTemplate :link="link" :active="active" />
             </ULinkBase>
           </ULink>
diff --git a/src/runtime/components/content/ContentSearch.vue b/src/runtime/components/content/ContentSearch.vue
index b3dc99dea2..6147f7052e 100644
--- a/src/runtime/components/content/ContentSearch.vue
+++ b/src/runtime/components/content/ContentSearch.vue
@@ -95,11 +95,11 @@ export type ContentSearchSlots = CommandPaletteSlots<ContentSearchItem> & {
 
 <script setup lang="ts" generic="T extends ContentSearchLink">
 import { computed, useTemplateRef } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig, useColorMode, defineShortcuts } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
+import { useForwardProps } from '../../composables/useForwardProps'
 import { useContentSearch } from '../../composables/useContentSearch'
 import { useLocale } from '../../composables/useLocale'
 import { omit, transformUI } from '../../utils'
@@ -107,7 +107,7 @@ import { tv } from '../../utils/tv'
 import UModal from '../Modal.vue'
 import UCommandPalette from '../CommandPalette.vue'
 
-const props = withDefaults(defineProps<ContentSearchProps<T>>(), {
+const _props = withDefaults(defineProps<ContentSearchProps<T>>(), {
   shortcut: 'meta_k',
   colorMode: true,
   close: true,
@@ -116,6 +116,8 @@ const props = withDefaults(defineProps<ContentSearchProps<T>>(), {
 })
 const slots = defineSlots<ContentSearchSlots>()
 
+const props = useComponentProps<ContentSearchProps<T>>('contentSearch', _props)
+
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
 const { t } = useLocale()
@@ -123,19 +125,20 @@ const { open, mapNavigationItems, postFilter } = useContentSearch()
 // eslint-disable-next-line vue/no-dupe-keys
 const colorMode = useColorMode()
 const appConfig = useAppConfig() as ContentSearch['AppConfig']
-const uiProp = useComponentUI('contentSearch', props)
 
 const commandPaletteProps = useForwardProps(reactivePick(props, 'size', 'icon', 'placeholder', 'autofocus', 'loading', 'loadingIcon', 'close', 'closeIcon', 'searchDelay'))
 const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal'))
 
 const getProxySlots = () => omit(slots, ['content'])
 
+// eslint-disable-next-line vue/no-dupe-keys
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     includeMatches: true
   }
 } as UseFuseOptions<T>))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearch || {}) })({
   size: props.size,
   fullscreen: props.fullscreen
@@ -243,7 +246,7 @@ function onSelect(item: ContentSearchItem) {
 }
 
 defineShortcuts({
-  [props.shortcut]: {
+  [props.shortcut!]: {
     usingInput: true,
     handler: () => open.value = !open.value
   }
@@ -257,11 +260,11 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="title || t('contentSearch.title')"
-    :description="description || t('contentSearch.description')"
+    :title="props.title || t('contentSearch.title')"
+    :description="props.description || t('contentSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
+    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -272,7 +275,7 @@ defineExpose({
           :groups="groups"
           :fuse="fuse"
           :input="{ fixed: true }"
-          :ui="transformUI(omit(ui, ['modal']), uiProp)"
+          :ui="transformUI(omit(ui, ['modal']), props.ui)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >
diff --git a/src/runtime/components/content/ContentSearchButton.vue b/src/runtime/components/content/ContentSearchButton.vue
index 60edc33ca6..2083aee084 100644
--- a/src/runtime/components/content/ContentSearchButton.vue
+++ b/src/runtime/components/content/ContentSearchButton.vue
@@ -51,11 +51,11 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
-import { useForwardProps } from 'reka-ui'
 import { defu } from 'defu'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
+import { useForwardProps } from '../../composables/useForwardProps'
 import { useContentSearch } from '../../composables/useContentSearch'
 import { useLocale } from '../../composables/useLocale'
 import { omit, transformUI } from '../../utils'
@@ -66,7 +66,7 @@ import UTooltip from '../Tooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ContentSearchButtonProps>(), {
+const _props = withDefaults(defineProps<ContentSearchButtonProps>(), {
   color: 'neutral',
   collapsed: true,
   tooltip: false,
@@ -74,6 +74,8 @@ const props = withDefaults(defineProps<ContentSearchButtonProps>(), {
 })
 const slots = defineSlots<ButtonSlots>()
 
+const props = useComponentProps('contentSearchButton', _props)
+
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate()
 
 const getProxySlots = () => omit(slots, ['trailing'])
@@ -84,8 +86,8 @@ const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} :
 const { t } = useLocale()
 const { open } = useContentSearch()
 const appConfig = useAppConfig() as ContentSearchButton['AppConfig']
-const uiProp = useComponentUI('contentSearchButton', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearchButton || {}) })({
   collapsed: props.collapsed
 }))
@@ -94,19 +96,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearc
 <template>
   <DefineButtonTemplate>
     <UButton
-      :icon="icon || appConfig.ui.icons.search"
-      :label="label || t('contentSearchButton.label')"
-      :variant="variant || (collapsed ? 'ghost' : 'outline')"
+      :icon="props.icon || appConfig.ui.icons.search"
+      :label="props.label || t('contentSearchButton.label')"
+      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
       v-bind="{
         ...buttonProps,
-        ...(collapsed ? {
+        ...(props.collapsed ? {
           'square': true,
-          'aria-label': label || t('contentSearchButton.label')
+          'aria-label': props.label || t('contentSearchButton.label')
         } : {}),
         ...$attrs
       }"
-      :class="ui.base({ class: [uiProp?.base, props.class] })"
-      :ui="transformUI(ui, uiProp)"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(ui, props.ui)"
       @click="open = true"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -114,10 +116,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearc
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <div data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :ui="uiProxy">
-            <template v-if="kbds?.length">
-              <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <template v-if="props.kbds?.length">
+              <UKbd v-for="(kbd, index) in props.kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </template>
           </slot>
         </div>
@@ -125,7 +127,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearc
     </UButton>
   </DefineButtonTemplate>
 
-  <UTooltip v-if="collapsed && tooltip" :text="label || t('contentSearchButton.label')" v-bind="tooltipProps">
+  <UTooltip v-if="props.collapsed && props.tooltip" :text="props.label || t('contentSearchButton.label')" v-bind="tooltipProps">
     <ReuseButtonTemplate />
   </UTooltip>
   <ReuseButtonTemplate v-else />
diff --git a/src/runtime/components/content/ContentSurround.vue b/src/runtime/components/content/ContentSurround.vue
index 9c90aa0251..f875d31ce2 100644
--- a/src/runtime/components/content/ContentSurround.vue
+++ b/src/runtime/components/content/ContentSurround.vue
@@ -56,7 +56,7 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { useLocale } from '../../composables/useLocale'
 import { tv } from '../../utils/tv'
 import ULink from '../Link.vue'
@@ -64,12 +64,14 @@ import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<ContentSurroundProps<T>>()
+const _props = defineProps<ContentSurroundProps<T>>()
+
 defineSlots<ContentSurroundSlots<T>>()
 
+const props = useComponentProps<ContentSurroundProps<T>>('contentSurround', _props)
+
 const { dir } = useLocale()
 const appConfig = useAppConfig() as ContentSurround['AppConfig']
-const uiProp = useComponentUI('contentSurround', props)
 
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?: ContentSurroundLink, icon: IconProps['name'], direction: 'left' | 'right' }>({
   props: {
@@ -82,27 +84,29 @@ const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?:
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSurround || {}) })())
 
+// eslint-disable-next-line vue/no-dupe-keys
 const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft))
+// eslint-disable-next-line vue/no-dupe-keys
 const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight))
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], direction })">
+    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
       <slot name="link" :link="(link as T)" :ui="ui">
-        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [uiProp?.linkLeading, link.ui?.linkLeading] })">
+        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
           <slot name="link-leading" :link="(link as T)" :ui="ui">
-            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 
-        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle] })">
+        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
           <slot name="link-title" :link="(link as T)" :ui="ui">
             {{ link.title }}
           </slot>
         </p>
 
-        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [uiProp?.linkDescription, link.ui?.linkDescription] })">
+        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
           <slot name="link-description" :link="(link as T)" :ui="ui">
             {{ link.description }}
           </slot>
@@ -112,8 +116,8 @@ const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConf
     <span v-else class="hidden sm:block">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon" direction="left" />
-    <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon" direction="right" />
+  <Primitive v-if="props.surround" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ReuseLinkTemplate :link="props.surround[0]" :icon="prevIcon" direction="left" />
+    <ReuseLinkTemplate :link="props.surround[1]" :icon="nextIcon" direction="right" />
   </Primitive>
 </template>
diff --git a/src/runtime/components/content/ContentToc.vue b/src/runtime/components/content/ContentToc.vue
index e986a7b1c7..e6a300fb0b 100644
--- a/src/runtime/components/content/ContentToc.vue
+++ b/src/runtime/components/content/ContentToc.vue
@@ -73,11 +73,11 @@ export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
 
 <script setup lang="ts" generic="T extends ContentTocLink">
 import { computed, onUnmounted } from 'vue'
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useRouter, useAppConfig, useNuxtApp } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
-import { useResolvedVariants } from '../../composables/useResolvedVariants'
+import { useComponentProps } from '../../composables/useComponentProps'
+import { useForwardProps } from '../../composables/useForwardProps'
 import { useScrollspy } from '../../composables/useScrollspy'
 import { useLocale } from '../../composables/useLocale'
 import { tv } from '../../utils/tv'
@@ -85,19 +85,19 @@ import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ContentTocProps<T>>(), {
+const _props = withDefaults(defineProps<ContentTocProps<T>>(), {
   as: 'nav'
 })
 const emits = defineEmits<ContentTocEmits>()
 const slots = defineSlots<ContentTocSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'open', 'defaultOpen'), emits)
+const props = useComponentProps<ContentTocProps<T>>('contentToc', _props)
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'open', 'defaultOpen'), emits)
 
 const { t } = useLocale()
 const router = useRouter()
 const appConfig = useAppConfig() as ContentToc['AppConfig']
-const uiProp = useComponentUI('contentToc', props)
-const { highlightVariant } = useResolvedVariants('contentToc', props, theme, ['highlightVariant'])
 const { activeHeadings, updateHeadings } = useScrollspy()
 
 const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate<{ links: T[], level: number }>({
@@ -109,10 +109,11 @@ const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate<{ links:
 const [DefineTriggerTemplate, ReuseTriggerTemplate] = createReusableTemplate<{ open: boolean }>()
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate()
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentToc || {}) })({
   color: props.color,
   highlight: props.highlight,
-  highlightVariant: highlightVariant.value,
+  highlightVariant: props.highlightVariant,
   highlightColor: props.highlightColor || props.color
 }))
 
@@ -151,7 +152,7 @@ const indicatorStyle = computed(() => {
 
 // Generate SVG path for the circuit line structure
 const circuitMaskStyle = computed(() => {
-  if (!props.highlight || highlightVariant.value !== 'circuit' || !props.links?.length) {
+  if (!props.highlight || props.highlightVariant !== 'circuit' || !props.links?.length) {
     return
   }
 
@@ -218,11 +219,11 @@ onUnmounted(() => {
 <template>
   <!-- eslint-disable-next-line vue/no-template-shadow -->
   <DefineListTemplate v-slot="{ links, level }">
-    <ul :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [uiProp?.item, link.ui?.item] })">
-        <a :href="`#${link.id}`" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
+        <a :href="`#${link.id}`" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
           <slot name="link" :link="link">
-            <span data-slot="linkText" :class="ui.linkText({ class: [uiProp?.linkText, link.ui?.linkText] })">
+            <span data-slot="linkText" :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
               {{ link.text }}
             </span>
           </slot>
@@ -236,40 +237,40 @@ onUnmounted(() => {
   <DefineTriggerTemplate v-slot="{ open }">
     <slot name="leading" :open="open" :ui="ui" />
 
-    <span data-slot="title" :class="ui.title({ class: uiProp?.title })">
-      <slot :open="open">{{ title || t('contentToc.title') }}</slot>
+    <span data-slot="title" :class="ui.title({ class: props.ui?.title })">
+      <slot :open="open">{{ props.title || t('contentToc.title') }}</slot>
     </span>
 
-    <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :open="open" :ui="ui">
-        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon :name="props.trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </DefineTriggerTemplate>
 
   <DefineContentTemplate>
-    <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="{ ...indicatorStyle, ...(circuitMaskStyle || {}) }">
-      <div data-slot="indicatorLine" :class="ui.indicatorLine({ class: uiProp?.indicatorLine })" />
-      <div v-if="indicatorStyle" data-slot="indicatorActive" :class="ui.indicatorActive({ class: uiProp?.indicatorActive })" />
+    <div v-if="props.highlight" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="{ ...indicatorStyle, ...(circuitMaskStyle || {}) }">
+      <div data-slot="indicatorLine" :class="ui.indicatorLine({ class: props.ui?.indicatorLine })" />
+      <div v-if="indicatorStyle" data-slot="indicatorActive" :class="ui.indicatorActive({ class: props.ui?.indicatorActive })" />
     </div>
 
-    <slot name="content" :links="links!">
-      <ReuseListTemplate :links="links!" :level="0" />
+    <slot name="content" :links="props.links!">
+      <ReuseListTemplate :links="props.links!" :level="0" />
     </slot>
   </DefineContentTemplate>
 
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
-        <slot name="top" :links="links" />
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="props.defaultOpen" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
+        <slot name="top" :links="props.links" />
       </div>
 
-      <template v-if="links?.length">
+      <template v-if="props.links?.length">
         <CollapsibleTrigger data-slot="trigger" :class="ui.trigger({ class: 'lg:hidden' })">
           <ReuseTriggerTemplate :open="open" />
         </CollapsibleTrigger>
 
-        <CollapsibleContent data-slot="content" :class="ui.content({ class: [uiProp?.content, 'lg:hidden'] })">
+        <CollapsibleContent data-slot="content" :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
           <ReuseContentTemplate />
         </CollapsibleContent>
 
@@ -277,13 +278,13 @@ onUnmounted(() => {
           <ReuseTriggerTemplate :open="open" />
         </p>
 
-        <div data-slot="content" :class="ui.content({ class: [uiProp?.content, 'hidden lg:flex'] })">
+        <div data-slot="content" :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
           <ReuseContentTemplate />
         </div>
       </template>
 
-      <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: uiProp?.bottom, body: !!slots.top || !!links?.length })">
-        <slot name="bottom" :links="links" />
+      <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!props.links?.length })">
+        <slot name="bottom" :links="props.links" />
       </div>
     </div>
   </CollapsibleRoot>
diff --git a/src/runtime/components/prose/A.vue b/src/runtime/components/prose/A.vue
index 9079a1f420..04105f48ce 100644
--- a/src/runtime/components/prose/A.vue
+++ b/src/runtime/components/prose/A.vue
@@ -21,22 +21,24 @@ export interface ProseASlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import ULink from '../Link.vue'
 
-const props = defineProps<ProseAProps>()
+const _props = defineProps<ProseAProps>()
+
 defineSlots<ProseASlots>()
 
+const props = useComponentProps('prose.a', _props)
+
 const appConfig = useAppConfig() as ProseA['AppConfig']
-const uiProp = useComponentUI('prose.a', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.a || {}) }))
 </script>
 
 <template>
-  <ULink :href="href" :target="target" :class="ui({ class: [uiProp?.base, props.class] })" raw>
+  <ULink :href="props.href" :target="props.target" :class="ui({ class: [props.ui?.base, props.class] })" raw>
     <slot />
   </ULink>
 </template>
diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index 9d5ab3f368..75f7215d71 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -21,18 +21,19 @@ export interface ProseAccordionSlots {
 <script setup lang="ts">
 import { computed, ref, onBeforeUpdate } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
 import UAccordion from '../Accordion.vue'
 
-const props = withDefaults(defineProps<ProseAccordionProps>(), {
+const _props = withDefaults(defineProps<ProseAccordionProps>(), {
   type: 'multiple'
 })
 const slots = defineSlots<ProseAccordionSlots>()
 
+const props = useComponentProps('prose.accordion', _props)
+
 const appConfig = useAppConfig() as ProseAccordion['AppConfig']
-const uiProp = useComponentUI('prose.accordion', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.accordion || {}) }))
@@ -68,7 +69,7 @@ onBeforeUpdate(() => rerenderCount.value++)
 </script>
 
 <template>
-  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), uiProp)">
+  <UAccordion :type="props.type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), props.ui)">
     <template #content="{ item }">
       <component :is="item.component" />
     </template>
diff --git a/src/runtime/components/prose/AccordionItem.vue b/src/runtime/components/prose/AccordionItem.vue
index dd598a3dec..94a14ed0cb 100644
--- a/src/runtime/components/prose/AccordionItem.vue
+++ b/src/runtime/components/prose/AccordionItem.vue
@@ -21,23 +21,25 @@ export interface ProseAccordionItemSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseAccordionItemProps>()
+const _props = defineProps<ProseAccordionItemProps>()
+
 defineSlots<ProseAccordionItemSlots>()
 
+const props = useComponentProps('prose.accordionItem', _props)
+
 const appConfig = useAppConfig() as ProseAccordionItem['AppConfig']
-const uiProp = useComponentUI('prose.accordionItem', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.accordionItem || {}) }))
 </script>
 
 <template>
-  <div :class="ui({ class: [uiProp?.base, props.class] })">
+  <div :class="ui({ class: [props.ui?.base, props.class] })">
     <slot>
-      {{ description }}
+      {{ props.description }}
     </slot>
   </div>
 </template>
diff --git a/src/runtime/components/prose/Badge.vue b/src/runtime/components/prose/Badge.vue
index 1d8876256b..26144cd909 100644
--- a/src/runtime/components/prose/Badge.vue
+++ b/src/runtime/components/prose/Badge.vue
@@ -19,22 +19,24 @@ export interface ProseBadgeSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UBadge from '../Badge.vue'
 
-const props = defineProps<ProseBadgeProps>()
+const _props = defineProps<ProseBadgeProps>()
+
 defineSlots<ProseBadgeSlots>()
 
+const props = useComponentProps('prose.badge', _props)
+
 const appConfig = useAppConfig() as ProseBadge['AppConfig']
-const uiProp = useComponentUI('prose.badge', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.badge || {}) }))
 </script>
 
 <template>
-  <UBadge color="primary" variant="subtle" :class="ui({ class: [uiProp?.base, props.class] })">
+  <UBadge color="primary" variant="subtle" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot mdc-unwrap="p" />
   </UBadge>
 </template>
diff --git a/src/runtime/components/prose/Blockquote.vue b/src/runtime/components/prose/Blockquote.vue
index 38bfcccf23..2cc2834181 100644
--- a/src/runtime/components/prose/Blockquote.vue
+++ b/src/runtime/components/prose/Blockquote.vue
@@ -19,21 +19,23 @@ export interface ProseBlockquoteSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseBlockquoteProps>()
+const _props = defineProps<ProseBlockquoteProps>()
+
 defineSlots<ProseBlockquoteSlots>()
 
+const props = useComponentProps('prose.blockquote', _props)
+
 const appConfig = useAppConfig() as ProseBlockquote['AppConfig']
-const uiProp = useComponentUI('prose.blockquote', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.blockquote || {}) }))
 </script>
 
 <template>
-  <blockquote :class="ui({ class: [uiProp?.base, props.class] })">
+  <blockquote :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </blockquote>
 </template>
diff --git a/src/runtime/components/prose/Callout.vue b/src/runtime/components/prose/Callout.vue
index d894f4f214..d4dcc019fd 100644
--- a/src/runtime/components/prose/Callout.vue
+++ b/src/runtime/components/prose/Callout.vue
@@ -27,40 +27,44 @@ export interface ProseCalloutSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import ULink from '../Link.vue'
 import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<ProseCalloutProps>()
+const _props = defineProps<ProseCalloutProps>()
+
 defineSlots<ProseCalloutSlots>()
 
+const props = useComponentProps('prose.callout', _props)
+
 const appConfig = useAppConfig() as ProseCallout['AppConfig']
-const uiProp = useComponentUI('prose.callout', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.callout || {}) })({
   color: props.color,
   to: !!props.to
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const target = computed(() => props.target || (!!props.to && typeof props.to === 'string' && props.to.startsWith('http') ? '_blank' : undefined))
 </script>
 
 <template>
-  <div :class="ui.base({ class: [uiProp?.base, props.class] })">
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
     <ULink
-      v-if="to"
-      v-bind="{ to, target, ...$attrs }"
+      v-if="props.to"
+      v-bind="{ to: props.to, target, ...$attrs }"
       class="focus:outline-none"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: uiProp?.icon })" />
-    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: uiProp?.externalIcon })" />
+    <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" />
+    <UIcon v-if="!!props.to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
 
     <slot mdc-unwrap="p" />
   </div>
diff --git a/src/runtime/components/prose/Card.vue b/src/runtime/components/prose/Card.vue
index 0c3c274688..8aaec27d17 100644
--- a/src/runtime/components/prose/Card.vue
+++ b/src/runtime/components/prose/Card.vue
@@ -30,54 +30,57 @@ export interface ProseCardSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import ULink from '../Link.vue'
 import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<ProseCardProps>()
+const _props = defineProps<ProseCardProps>()
 const slots = defineSlots<ProseCardSlots>()
 
+const props = useComponentProps('prose.card', _props)
+
 const appConfig = useAppConfig() as ProseCard['AppConfig']
-const uiProp = useComponentUI('prose.card', props)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.card || {}) })({
   color: props.color,
   to: !!props.to,
   title: !!props.title
 }))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const target = computed(() => props.target || (!!props.to && typeof props.to === 'string' && props.to.startsWith('http') ? '_blank' : undefined))
 
 const ariaLabel = computed(() => (props.title || 'Card link').trim())
 </script>
 
 <template>
-  <div :class="ui.base({ class: [uiProp?.base, props.class] })">
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
     <ULink
-      v-if="to"
+      v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to, target, ...$attrs }"
+      v-bind="{ to: props.to, target, ...$attrs }"
       class="focus:outline-none"
       raw
     >
       <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
-    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: uiProp?.icon })" />
-    <UIcon v-if="!!to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: uiProp?.externalIcon })" />
+    <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" />
+    <UIcon v-if="!!props.to && target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.externalIcon({ class: props.ui?.externalIcon })" />
 
-    <p v-if="title || !!slots.title" :class="ui.title({ class: uiProp?.title })">
+    <p v-if="props.title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
       <slot name="title" mdc-unwrap="p">
-        {{ title }}
+        {{ props.title }}
       </slot>
     </p>
 
-    <div v-if="!!slots.default" :class="ui.description({ class: uiProp?.description })">
+    <div v-if="!!slots.default" :class="ui.description({ class: props.ui?.description })">
       <slot>
-        {{ description }}
+        {{ props.description }}
       </slot>
     </div>
   </div>
diff --git a/src/runtime/components/prose/CardGroup.vue b/src/runtime/components/prose/CardGroup.vue
index a75010a443..8cb9b83566 100644
--- a/src/runtime/components/prose/CardGroup.vue
+++ b/src/runtime/components/prose/CardGroup.vue
@@ -19,21 +19,23 @@ export interface ProseCardGroupSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseCardGroupProps>()
+const _props = defineProps<ProseCardGroupProps>()
+
 defineSlots<ProseCardGroupSlots>()
 
+const props = useComponentProps('prose.cardGroup', _props)
+
 const appConfig = useAppConfig() as ProseCardGroup['AppConfig']
-const uiProp = useComponentUI('prose.cardGroup', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.cardGroup || {}) }))
 </script>
 
 <template>
-  <div :class="ui({ class: [uiProp?.base, props.class] })">
+  <div :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </div>
 </template>
diff --git a/src/runtime/components/prose/Code.vue b/src/runtime/components/prose/Code.vue
index 7ad31d9065..0653c3d622 100644
--- a/src/runtime/components/prose/Code.vue
+++ b/src/runtime/components/prose/Code.vue
@@ -24,21 +24,23 @@ export interface ProseCodeSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseCodeProps>()
+const _props = defineProps<ProseCodeProps>()
+
 defineSlots<ProseCodeSlots>()
 
+const props = useComponentProps('prose.code', _props)
+
 const appConfig = useAppConfig() as ProseCode['AppConfig']
-const uiProp = useComponentUI('prose.code', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.code || {}) }))
 </script>
 
 <template>
-  <code :class="ui({ class: [uiProp?.base, (props.class || '').split(',').join(' ')], color: props.color })">
+  <code :class="ui({ class: [props.ui?.base, (props.class || '').split(',').join(' ')], color: props.color })">
     <slot />
   </code>
 </template>
diff --git a/src/runtime/components/prose/CodeCollapse.vue b/src/runtime/components/prose/CodeCollapse.vue
index 1b61c6365d..9d2c042e5c 100644
--- a/src/runtime/components/prose/CodeCollapse.vue
+++ b/src/runtime/components/prose/CodeCollapse.vue
@@ -40,19 +40,21 @@ export interface ProseCodeCollapseSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { useLocale } from '../../composables/useLocale'
 import { tv } from '../../utils/tv'
 import UButton from '../Button.vue'
 
-const props = defineProps<ProseCodeCollapseProps>()
+const _props = defineProps<ProseCodeCollapseProps>()
+
 defineSlots<ProseCodeCollapseSlots>()
 
+const props = useComponentProps('prose.codeCollapse', _props)
+
 const open = defineModel<boolean>('open', { default: false })
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as ProseCodeCollapse['AppConfig']
-const uiProp = useComponentUI('prose.codeCollapse', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeCollapse || {}) })({
@@ -61,18 +63,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeC
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
 
-    <div :class="ui.footer({ class: uiProp?.footer })">
+    <div :class="ui.footer({ class: props.ui?.footer })">
       <UButton
-        :icon="icon || appConfig.ui.icons.chevronDown"
+        :icon="props.icon || appConfig.ui.icons.chevronDown"
         color="neutral"
         variant="outline"
         :data-state="open ? 'open' : 'closed'"
         :label="`${open ? (props.closeText || t('prose.codeCollapse.closeText')) : (props.openText || t('prose.codeCollapse.openText'))} ${props.name || t('prose.codeCollapse.name')}`"
-        :class="ui.trigger({ class: uiProp?.trigger })"
-        :ui="{ leadingIcon: ui.triggerIcon({ class: uiProp?.triggerIcon }) }"
+        :class="ui.trigger({ class: props.ui?.trigger })"
+        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
         @click="open = !open"
       />
     </div>
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index 36176edf9b..cfe3bca1dd 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -29,19 +29,20 @@ export interface ProseCodeGroupSlots {
 import { computed, watch, onMounted, ref, onBeforeUpdate } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'reka-ui'
 import { useState, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UCodeIcon from './CodeIcon.vue'
 
-const props = withDefaults(defineProps<ProseCodeGroupProps>(), {
+const _props = withDefaults(defineProps<ProseCodeGroupProps>(), {
   defaultValue: '0'
 })
 const slots = defineSlots<ProseCodeGroupSlots>()
 
+const props = useComponentProps('prose.codeGroup', _props)
+
 const model = defineModel<string>()
 
 const appConfig = useAppConfig() as ProseCodeGroup['AppConfig']
-const uiProp = useComponentUI('prose.codeGroup', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeGroup || {}) })())
@@ -95,14 +96,14 @@ onBeforeUpdate(() => rerenderCount.value++)
 </script>
 
 <template>
-  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <TabsList :class="ui.list({ class: uiProp?.list })">
-      <TabsIndicator :class="ui.indicator({ class: uiProp?.indicator })" />
+  <TabsRoot v-model="model" :default-value="props.defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
 
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: uiProp?.trigger })">
-        <UCodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: uiProp?.triggerIcon })" />
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: props.ui?.trigger })">
+        <UCodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
 
-        <span :class="ui.triggerLabel({ class: uiProp?.triggerLabel })">{{ item.label }}</span>
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
       </TabsTrigger>
     </TabsList>
 
diff --git a/src/runtime/components/prose/CodePreview.vue b/src/runtime/components/prose/CodePreview.vue
index 2920f5f23f..c4841d0156 100644
--- a/src/runtime/components/prose/CodePreview.vue
+++ b/src/runtime/components/prose/CodePreview.vue
@@ -20,26 +20,27 @@ export interface ProseCodePreviewSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseCodePreviewProps>()
+const _props = defineProps<ProseCodePreviewProps>()
 const slots = defineSlots<ProseCodePreviewSlots>()
 
+const props = useComponentProps('prose.codePreview', _props)
+
 const appConfig = useAppConfig() as ProseCodePreview['AppConfig']
-const uiProp = useComponentUI('prose.codePreview', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codePreview || {}) })({ code: !!slots.code }))
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div :class="ui.preview({ class: [uiProp?.preview] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.preview({ class: [props.ui?.preview] })">
       <slot />
     </div>
 
-    <div v-if="!!slots.code" :class="ui.code({ class: [uiProp?.code] })">
+    <div v-if="!!slots.code" :class="ui.code({ class: [props.ui?.code] })">
       <slot name="code" />
     </div>
   </div>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index f31b9f0d0d..f9bd3935cc 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -53,19 +53,20 @@ import { computed, watch, onBeforeUpdate, ref } from 'vue'
 import { TreeRoot, TreeItem } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UCodeIcon from './CodeIcon.vue'
 import UIcon from '../Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<ProseCodeTreeProps>()
+const _props = defineProps<ProseCodeTreeProps>()
 const emits = defineEmits<ProseCodeTreeEmits>()
 const slots = defineSlots<ProseCodeTreeSlots>()
 
+const props = useComponentProps('prose.codeTree', _props)
+
 const appConfig = useAppConfig() as ProseCodeTree['AppConfig']
-const uiProp = useComponentUI('prose.codeTree', props)
 
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items: TreeNode[], level: number }>()
 
@@ -200,7 +201,7 @@ onBeforeUpdate(() => rerenderCount.value++)
       v-for="(item, index) in items"
       :key="`${level}-${index}`"
       role="presentation"
-      :class="level > 1 ? ui.itemWithChildren({ class: uiProp?.itemWithChildren }) : ui.item({ class: uiProp?.item })"
+      :class="level > 1 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
     >
       <TreeItem
         v-slot="{ isExpanded, isSelected }"
@@ -210,27 +211,27 @@ onBeforeUpdate(() => rerenderCount.value++)
       >
         <button
           type="button"
-          :class="ui.link({ class: uiProp?.link, active: isSelected })"
+          :class="ui.link({ class: props.ui?.link, active: isSelected })"
         >
           <UIcon
             v-if="item.children?.length"
             :name="isExpanded ? appConfig.ui.icons.folderOpen : appConfig.ui.icons.folder"
-            :class="ui.linkLeadingIcon({ class: uiProp?.linkLeadingIcon })"
+            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
           />
           <UCodeIcon
             v-else
             :filename="item.label"
-            :class="ui.linkLeadingIcon({ class: uiProp?.linkLeadingIcon })"
+            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
           />
 
-          <span :class="ui.linkLabel({ class: uiProp?.linkLabel })">
+          <span :class="ui.linkLabel({ class: props.ui?.linkLabel })">
             {{ item.label }}
           </span>
 
-          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: uiProp?.linkTrailing })">
+          <span v-if="item.children?.length" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
             <UIcon
               :name="appConfig.ui.icons.chevronDown"
-              :class="ui.linkTrailingIcon({ class: uiProp?.linkTrailingIcon })"
+              :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })"
             />
           </span>
         </button>
@@ -238,7 +239,7 @@ onBeforeUpdate(() => rerenderCount.value++)
         <ul
           v-if="item.children?.length && isExpanded"
           role="group"
-          :class="ui.listWithChildren({ class: uiProp?.listWithChildren })"
+          :class="ui.listWithChildren({ class: props.ui?.listWithChildren })"
         >
           <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
@@ -246,18 +247,18 @@ onBeforeUpdate(() => rerenderCount.value++)
     </li>
   </DefineTreeTemplate>
 
-  <div v-bind="$attrs" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <div v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <TreeRoot
       v-model="model"
       v-model:expanded="expanded"
-      :class="ui.list({ class: uiProp?.list })"
+      :class="ui.list({ class: props.ui?.list })"
       :items="items"
       :get-key="(item) => item.path"
     >
       <ReuseTreeTemplate :items="items" :level="1" />
     </TreeRoot>
 
-    <div :class="ui.content({ class: uiProp?.content })">
+    <div :class="ui.content({ class: props.ui?.content })">
       <component :is="lastSelectedItem?.component" />
     </div>
   </div>
diff --git a/src/runtime/components/prose/Collapsible.vue b/src/runtime/components/prose/Collapsible.vue
index 99e9f69bce..c52351e005 100644
--- a/src/runtime/components/prose/Collapsible.vue
+++ b/src/runtime/components/prose/Collapsible.vue
@@ -40,31 +40,33 @@ export interface ProseCollapsibleSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { useLocale } from '../../composables/useLocale'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
 import UCollapsible from '../Collapsible.vue'
 import UIcon from '../Icon.vue'
 
-const props = defineProps<ProseCollapsibleProps>()
+const _props = defineProps<ProseCollapsibleProps>()
+
 defineSlots<ProseCollapsibleSlots>()
 
+const props = useComponentProps('prose.collapsible', _props)
+
 const { t } = useLocale()
 const appConfig = useAppConfig() as ProseCollapsible['AppConfig']
-const uiProp = useComponentUI('prose.collapsible', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.collapsible || {}) })())
 </script>
 
 <template>
-  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui, uiProp)">
+  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui, props.ui)">
     <template #default="{ open }">
-      <button :class="ui.trigger({ class: uiProp?.trigger })">
-        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: uiProp?.triggerIcon })" />
+      <button :class="ui.trigger({ class: props.ui?.trigger })">
+        <UIcon :name="props.icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
 
-        <span :class="ui.triggerLabel({ class: uiProp?.triggerLabel })">
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">
           {{ open ? (props.closeText || t('prose.collapsible.closeText')) : (props.openText || t('prose.collapsible.openText')) }} {{ props.name || t('prose.collapsible.name') }}
         </span>
       </button>
diff --git a/src/runtime/components/prose/Em.vue b/src/runtime/components/prose/Em.vue
index 9cdeb10633..d273a316b6 100644
--- a/src/runtime/components/prose/Em.vue
+++ b/src/runtime/components/prose/Em.vue
@@ -19,19 +19,21 @@ export interface ProseEmSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseEmProps>()
+const _props = defineProps<ProseEmProps>()
+
 defineSlots<ProseEmSlots>()
 
+const props = useComponentProps('prose.em', _props)
+
 const appConfig = useAppConfig() as ProseEm['AppConfig']
-const uiProp = useComponentUI('prose.em', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.em || {}) }))
 </script>
 
 <template>
-  <em :class="ui({ class: [uiProp?.base, props.class] })"><slot /></em>
+  <em :class="ui({ class: [props.ui?.base, props.class] })"><slot /></em>
 </template>
diff --git a/src/runtime/components/prose/Field.vue b/src/runtime/components/prose/Field.vue
index 12126ac587..64fb2fc3ca 100644
--- a/src/runtime/components/prose/Field.vue
+++ b/src/runtime/components/prose/Field.vue
@@ -41,40 +41,41 @@ export interface ProseFieldSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseFieldProps>()
+const _props = defineProps<ProseFieldProps>()
 const slots = defineSlots<ProseFieldSlots>()
 
+const props = useComponentProps('prose.field', _props)
+
 const appConfig = useAppConfig() as ProseField['AppConfig']
-const uiProp = useComponentUI('prose.field', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.field || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div :class="ui.container({ class: uiProp?.container })">
-      <span v-if="name" :class="ui.name({ class: uiProp?.name })">
-        {{ name }}
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <span v-if="props.name" :class="ui.name({ class: props.ui?.name })">
+        {{ props.name }}
       </span>
 
-      <div v-if="type || required" :class="ui.wrapper({ class: uiProp?.wrapper })">
-        <span v-if="type" :class="ui.type({ class: uiProp?.type })">
-          {{ type }}
+      <div v-if="props.type || props.required" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <span v-if="props.type" :class="ui.type({ class: props.ui?.type })">
+          {{ props.type }}
         </span>
 
-        <span v-if="required" :class="ui.required({ class: uiProp?.required })">
+        <span v-if="props.required" :class="ui.required({ class: props.ui?.required })">
           required
         </span>
       </div>
     </div>
 
-    <div v-if="!!slots.default || description" :class="ui.description({ class: uiProp?.description })">
+    <div v-if="!!slots.default || props.description" :class="ui.description({ class: props.ui?.description })">
       <slot mdc-unwrap="p">
-        {{ description }}
+        {{ props.description }}
       </slot>
     </div>
   </Primitive>
diff --git a/src/runtime/components/prose/FieldGroup.vue b/src/runtime/components/prose/FieldGroup.vue
index c3ca27ec9b..2203e0eae1 100644
--- a/src/runtime/components/prose/FieldGroup.vue
+++ b/src/runtime/components/prose/FieldGroup.vue
@@ -25,21 +25,23 @@ export interface ProseFieldGroupSlots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseFieldGroupProps>()
+const _props = defineProps<ProseFieldGroupProps>()
+
 defineSlots<ProseFieldGroupSlots>()
 
+const props = useComponentProps('prose.fieldGroup', _props)
+
 const appConfig = useAppConfig() as ProseFieldGroup['AppConfig']
-const uiProp = useComponentUI('prose.fieldGroup', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.fieldGroup || {}) }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>
diff --git a/src/runtime/components/prose/H1.vue b/src/runtime/components/prose/H1.vue
index eed492d2bf..4df9a95540 100644
--- a/src/runtime/components/prose/H1.vue
+++ b/src/runtime/components/prose/H1.vue
@@ -20,14 +20,16 @@ export interface ProseH1Slots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig, useRuntimeConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseH1Props>()
+const _props = defineProps<ProseH1Props>()
+
 defineSlots<ProseH1Slots>()
 
+const props = useComponentProps('prose.h1', _props)
+
 const appConfig = useAppConfig() as ProseH1['AppConfig']
-const uiProp = useComponentUI('prose.h1', props)
 const { headings } = useRuntimeConfig().public?.mdc || {}
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -37,8 +39,8 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === 'ob
 </script>
 
 <template>
-  <h1 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
+  <h1 :id="props.id" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <a v-if="props.id && generate" :href="`#${props.id}`" :class="ui.link({ class: props.ui?.link })">
       <slot />
     </a>
     <slot v-else />
diff --git a/src/runtime/components/prose/H2.vue b/src/runtime/components/prose/H2.vue
index f26fbcafb5..be28822f1a 100644
--- a/src/runtime/components/prose/H2.vue
+++ b/src/runtime/components/prose/H2.vue
@@ -20,15 +20,17 @@ export interface ProseH2Slots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRuntimeConfig, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UIcon from '../Icon.vue'
 
-const props = defineProps<ProseH2Props>()
+const _props = defineProps<ProseH2Props>()
+
 defineSlots<ProseH2Slots>()
 
+const props = useComponentProps('prose.h2', _props)
+
 const appConfig = useAppConfig() as ProseH2['AppConfig']
-const uiProp = useComponentUI('prose.h2', props)
 const { headings } = useRuntimeConfig().public?.mdc || {}
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -38,10 +40,10 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === 'ob
 </script>
 
 <template>
-  <h2 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
-      <span :class="ui.leading({ class: uiProp?.leading })">
-        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+  <h2 :id="props.id" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <a v-if="props.id && generate" :href="`#${props.id}`" :class="ui.link({ class: props.ui?.link })">
+      <span :class="ui.leading({ class: props.ui?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       </span>
 
       <slot />
diff --git a/src/runtime/components/prose/H3.vue b/src/runtime/components/prose/H3.vue
index 918ccec4f8..c17ad6b468 100644
--- a/src/runtime/components/prose/H3.vue
+++ b/src/runtime/components/prose/H3.vue
@@ -20,15 +20,17 @@ export interface ProseH3Slots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRuntimeConfig, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UIcon from '../Icon.vue'
 
-const props = defineProps<ProseH3Props>()
+const _props = defineProps<ProseH3Props>()
+
 defineSlots<ProseH3Slots>()
 
+const props = useComponentProps('prose.h3', _props)
+
 const appConfig = useAppConfig() as ProseH3['AppConfig']
-const uiProp = useComponentUI('prose.h3', props)
 const { headings } = useRuntimeConfig().public?.mdc || {}
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -38,10 +40,10 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === 'ob
 </script>
 
 <template>
-  <h3 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
-      <span :class="ui.leading({ class: uiProp?.leading })">
-        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+  <h3 :id="props.id" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <a v-if="props.id && generate" :href="`#${props.id}`" :class="ui.link({ class: props.ui?.link })">
+      <span :class="ui.leading({ class: props.ui?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       </span>
 
       <slot />
diff --git a/src/runtime/components/prose/H4.vue b/src/runtime/components/prose/H4.vue
index 0b644a1b7d..5c7055a526 100644
--- a/src/runtime/components/prose/H4.vue
+++ b/src/runtime/components/prose/H4.vue
@@ -20,14 +20,16 @@ export interface ProseH4Slots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRuntimeConfig, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseH4Props>()
+const _props = defineProps<ProseH4Props>()
+
 defineSlots<ProseH4Slots>()
 
+const props = useComponentProps('prose.h4', _props)
+
 const appConfig = useAppConfig() as ProseH4['AppConfig']
-const uiProp = useComponentUI('prose.h4', props)
 const { headings } = useRuntimeConfig().public?.mdc || {}
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -37,8 +39,8 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === 'ob
 </script>
 
 <template>
-  <h4 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
+  <h4 :id="props.id" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <a v-if="props.id && generate" :href="`#${props.id}`" :class="ui.link({ class: props.ui?.link })">
       <slot />
     </a>
     <slot v-else />
diff --git a/src/runtime/components/prose/Hr.vue b/src/runtime/components/prose/Hr.vue
index 627a18f187..703e0f31c4 100644
--- a/src/runtime/components/prose/Hr.vue
+++ b/src/runtime/components/prose/Hr.vue
@@ -14,18 +14,19 @@ export interface ProseHrProps {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseHrProps>()
+const _props = defineProps<ProseHrProps>()
+
+const props = useComponentProps('prose.hr', _props)
 
 const appConfig = useAppConfig() as ProseHr['AppConfig']
-const uiProp = useComponentUI('prose.hr', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.hr || {}) }))
 </script>
 
 <template>
-  <hr :class="ui({ class: [uiProp?.base, props.class] })">
+  <hr :class="ui({ class: [props.ui?.base, props.class] })">
 </template>
diff --git a/src/runtime/components/prose/Icon.vue b/src/runtime/components/prose/Icon.vue
index d2970ad94c..a88f29ea03 100644
--- a/src/runtime/components/prose/Icon.vue
+++ b/src/runtime/components/prose/Icon.vue
@@ -15,19 +15,20 @@ export interface ProseIconProps {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UIcon from '../Icon.vue'
 
-const props = defineProps<ProseIconProps>()
+const _props = defineProps<ProseIconProps>()
+
+const props = useComponentProps('prose.icon', _props)
 
 const appConfig = useAppConfig() as ProseIcon['AppConfig']
-const uiProp = useComponentUI('prose.icon', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.icon || {}) }))
 </script>
 
 <template>
-  <UIcon :name="name" :class="ui({ class: [uiProp?.base, props.class] })" />
+  <UIcon :name="props.name" :class="ui({ class: [props.ui?.base, props.class] })" />
 </template>
diff --git a/src/runtime/components/prose/Img.vue b/src/runtime/components/prose/Img.vue
index 9db77b7a2e..9392d16671 100644
--- a/src/runtime/components/prose/Img.vue
+++ b/src/runtime/components/prose/Img.vue
@@ -27,24 +27,26 @@ import { AnimatePresence, Motion } from 'motion-v'
 import { useEventListener, createReusableTemplate } from '@vueuse/core'
 import { useRuntimeConfig, useAppConfig } from '#imports'
 import ImageComponent from '#build/ui-image-component'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { resolveBaseURL } from '../../utils'
 import { tv } from '../../utils/tv'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ProseImgProps>(), {
+const _props = withDefaults(defineProps<ProseImgProps>(), {
   zoom: true
 })
 
+const props = useComponentProps('prose.img', _props)
+
 const appConfig = useAppConfig() as ProseImg['AppConfig']
-const uiProp = useComponentUI('prose.img', props)
 
 const [DefineImageTemplate, ReuseImageTemplate] = createReusableTemplate()
 const [DefineZoomedImageTemplate, ReuseZoomedImageTemplate] = createReusableTemplate()
 
 const open = ref(false)
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.img || {}) })({
   zoom: props.zoom,
   open: open.value,
@@ -73,11 +75,11 @@ if (props.zoom) {
     <component
       :is="ImageComponent"
       :src="refinedSrc"
-      :alt="alt"
-      :width="width"
-      :height="height"
+      :alt="props.alt"
+      :width="props.width"
+      :height="props.height"
       v-bind="$attrs"
-      :class="ui.base({ class: [uiProp?.base, props.class] })"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
     />
   </DefineImageTemplate>
 
@@ -85,13 +87,13 @@ if (props.zoom) {
     <component
       :is="ImageComponent"
       :src="refinedSrc"
-      :alt="alt"
+      :alt="props.alt"
       v-bind="$attrs"
-      :class="ui.zoomedImage({ class: [uiProp?.zoomedImage] })"
+      :class="ui.zoomedImage({ class: [props.ui?.zoomedImage] })"
     />
   </DefineZoomedImageTemplate>
 
-  <DialogRoot v-if="zoom" v-slot="{ close }" v-model:open="open" :modal="false">
+  <DialogRoot v-if="props.zoom" v-slot="{ close }" v-model:open="open" :modal="false">
     <DialogTrigger as-child>
       <Motion :layout-id="layoutId" as-child :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
         <ReuseImageTemplate />
@@ -100,9 +102,9 @@ if (props.zoom) {
 
     <DialogPortal>
       <AnimatePresence>
-        <Motion v-if="open" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :class="ui.overlay({ class: [uiProp?.overlay] })" />
+        <Motion v-if="open" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :class="ui.overlay({ class: [props.ui?.overlay] })" />
 
-        <div v-if="open" :class="ui.content({ class: [uiProp?.content] })" @click="close">
+        <div v-if="open" :class="ui.content({ class: [props.ui?.content] })" @click="close">
           <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
             <ReuseZoomedImageTemplate />
           </Motion>
diff --git a/src/runtime/components/prose/Kbd.vue b/src/runtime/components/prose/Kbd.vue
index acb04f8ba2..8f4392217d 100644
--- a/src/runtime/components/prose/Kbd.vue
+++ b/src/runtime/components/prose/Kbd.vue
@@ -15,19 +15,20 @@ export interface ProseKbdProps {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 import UKbd from '../Kbd.vue'
 
-const props = defineProps<ProseKbdProps>()
+const _props = defineProps<ProseKbdProps>()
+
+const props = useComponentProps('prose.kbd', _props)
 
 const appConfig = useAppConfig() as ProseKbd['AppConfig']
-const uiProp = useComponentUI('prose.kbd', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.kbd || {}) }))
 </script>
 
 <template>
-  <UKbd :value="value" :class="ui({ class: [uiProp?.base, props.class] })" />
+  <UKbd :value="props.value" :class="ui({ class: [props.ui?.base, props.class] })" />
 </template>
diff --git a/src/runtime/components/prose/Li.vue b/src/runtime/components/prose/Li.vue
index 7be6d84903..1a61fd2b51 100644
--- a/src/runtime/components/prose/Li.vue
+++ b/src/runtime/components/prose/Li.vue
@@ -19,21 +19,23 @@ export interface ProseLiSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseLiProps>()
+const _props = defineProps<ProseLiProps>()
+
 defineSlots<ProseLiSlots>()
 
+const props = useComponentProps('prose.li', _props)
+
 const appConfig = useAppConfig() as ProseLi['AppConfig']
-const uiProp = useComponentUI('prose.li', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.li || {}) }))
 </script>
 
 <template>
-  <li :class="ui({ class: [uiProp?.base, props.class] })">
+  <li :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </li>
 </template>
diff --git a/src/runtime/components/prose/Ol.vue b/src/runtime/components/prose/Ol.vue
index fd4d18978d..cb270e60c9 100644
--- a/src/runtime/components/prose/Ol.vue
+++ b/src/runtime/components/prose/Ol.vue
@@ -19,21 +19,23 @@ export interface ProseOlSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseOlProps>()
+const _props = defineProps<ProseOlProps>()
+
 defineSlots<ProseOlSlots>()
 
+const props = useComponentProps('prose.ol', _props)
+
 const appConfig = useAppConfig() as ProseOl['AppConfig']
-const uiProp = useComponentUI('prose.ol', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.ol || {}) }))
 </script>
 
 <template>
-  <ol :class="ui({ class: [uiProp?.base, props.class] })">
+  <ol :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </ol>
 </template>
diff --git a/src/runtime/components/prose/P.vue b/src/runtime/components/prose/P.vue
index 41786cd67f..710e4d118b 100644
--- a/src/runtime/components/prose/P.vue
+++ b/src/runtime/components/prose/P.vue
@@ -19,21 +19,23 @@ export interface ProsePSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProsePProps>()
+const _props = defineProps<ProsePProps>()
+
 defineSlots<ProsePSlots>()
 
+const props = useComponentProps('prose.p', _props)
+
 const appConfig = useAppConfig() as ProseP['AppConfig']
-const uiProp = useComponentUI('prose.p', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.p || {}) }))
 </script>
 
 <template>
-  <p :class="ui({ class: [uiProp?.base, props.class] })">
+  <p :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </p>
 </template>
diff --git a/src/runtime/components/prose/Pre.vue b/src/runtime/components/prose/Pre.vue
index e0d004dc4d..8c085e6a29 100644
--- a/src/runtime/components/prose/Pre.vue
+++ b/src/runtime/components/prose/Pre.vue
@@ -28,19 +28,21 @@ export interface ProsePreSlots {
 import { computed, useTemplateRef } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { useLocale } from '../../composables/useLocale'
 import { tv } from '../../utils/tv'
 import UCodeIcon from './CodeIcon.vue'
 import UButton from '../Button.vue'
 
-const props = defineProps<ProsePreProps>()
+const _props = defineProps<ProsePreProps>()
+
 defineSlots<ProsePreSlots>()
 
+const props = useComponentProps('prose.pre', _props)
+
 const { t } = useLocale()
 const { copy, copied } = useClipboard()
 const appConfig = useAppConfig() as ProsePre['AppConfig']
-const uiProp = useComponentUI('prose.pre', props)
 
 const baseRef = useTemplateRef('baseRef')
 
@@ -55,11 +57,11 @@ function copyCode() {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root], filename: !!filename })">
-    <div v-if="filename && !hideHeader" :class="ui.header({ class: uiProp?.header })">
-      <UCodeIcon :icon="icon" :filename="filename" :class="ui.icon({ class: uiProp?.icon })" />
+  <div :class="ui.root({ class: [props.ui?.root], filename: !!props.filename })">
+    <div v-if="props.filename && !props.hideHeader" :class="ui.header({ class: props.ui?.header })">
+      <UCodeIcon :icon="props.icon" :filename="props.filename" :class="ui.icon({ class: props.ui?.icon })" />
 
-      <span :class="ui.filename({ class: uiProp?.filename })">{{ filename }}</span>
+      <span :class="ui.filename({ class: props.ui?.filename })">{{ props.filename }}</span>
     </div>
 
     <UButton
@@ -68,11 +70,11 @@ function copyCode() {
       variant="outline"
       size="sm"
       :aria-label="t('prose.pre.copy')"
-      :class="ui.copy({ class: uiProp?.copy })"
+      :class="ui.copy({ class: props.ui?.copy })"
       tabindex="-1"
       @click="copyCode"
     />
 
-    <pre ref="baseRef" :class="ui.base({ class: [uiProp?.base, props.class] })" v-bind="$attrs"><slot /></pre>
+    <pre ref="baseRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="$attrs"><slot /></pre>
   </div>
 </template>
diff --git a/src/runtime/components/prose/Prompt.vue b/src/runtime/components/prose/Prompt.vue
index 62f681b066..9e16277cd5 100644
--- a/src/runtime/components/prose/Prompt.vue
+++ b/src/runtime/components/prose/Prompt.vue
@@ -30,7 +30,7 @@ export interface ProsePromptSlots {
 import { computed } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { useLocale } from '../../composables/useLocale'
 import { getSlotChildrenText } from '../../utils'
 import { tv } from '../../utils/tv'
@@ -39,15 +39,16 @@ import UButton from '../Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<ProsePromptProps>(), {
+const _props = withDefaults(defineProps<ProsePromptProps>(), {
   actions: () => ['copy']
 })
 const slots = defineSlots<ProsePromptSlots>()
 
+const props = useComponentProps('prose.prompt', _props)
+
 const { t } = useLocale()
 const { copy, copied } = useClipboard()
 const appConfig = useAppConfig() as ProsePrompt['AppConfig']
-const uiProp = useComponentUI('prose.prompt', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.prompt || {}) })())
@@ -77,18 +78,18 @@ function openInWindsurf() {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root, props.class] })" v-bind="$attrs">
-    <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: uiProp?.icon })" />
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })" v-bind="$attrs">
+    <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" />
 
-    <div :class="ui.content({ class: uiProp?.content })">
-      <p v-if="description" :class="ui.description({ class: uiProp?.description })">
-        {{ description }}
+    <div :class="ui.content({ class: props.ui?.content })">
+      <p v-if="props.description" :class="ui.description({ class: props.ui?.description })">
+        {{ props.description }}
       </p>
     </div>
 
-    <div :class="ui.actions({ class: uiProp?.actions })">
+    <div :class="ui.actions({ class: props.ui?.actions })">
       <UButton
-        v-if="actions.includes('copy')"
+        v-if="props.actions.includes('copy')"
         :icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
         size="sm"
         :label="t('prose.prompt.copy')"
@@ -96,7 +97,7 @@ function openInWindsurf() {
       />
 
       <UButton
-        v-if="actions.includes('cursor')"
+        v-if="props.actions.includes('cursor')"
         icon="i-simple-icons-cursor"
         color="neutral"
         variant="outline"
@@ -106,7 +107,7 @@ function openInWindsurf() {
       />
 
       <UButton
-        v-if="actions.includes('windsurf')"
+        v-if="props.actions.includes('windsurf')"
         icon="i-simple-icons-windsurf"
         color="neutral"
         variant="outline"
diff --git a/src/runtime/components/prose/Steps.vue b/src/runtime/components/prose/Steps.vue
index a7c9800c8c..902463b1c2 100644
--- a/src/runtime/components/prose/Steps.vue
+++ b/src/runtime/components/prose/Steps.vue
@@ -24,21 +24,23 @@ export interface ProseStepsSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseStepsProps>()
+const _props = defineProps<ProseStepsProps>()
+
 defineSlots<ProseStepsSlots>()
 
+const props = useComponentProps('prose.steps', _props)
+
 const appConfig = useAppConfig() as ProseSteps['AppConfig']
-const uiProp = useComponentUI('prose.steps', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.steps || {}) }))
 </script>
 
 <template>
-  <div :class="ui({ class: [uiProp?.base, props.class], level: props.level })">
+  <div :class="ui({ class: [props.ui?.base, props.class], level: props.level })">
     <slot />
   </div>
 </template>
diff --git a/src/runtime/components/prose/Strong.vue b/src/runtime/components/prose/Strong.vue
index 2c3372aa3b..c8383335a5 100644
--- a/src/runtime/components/prose/Strong.vue
+++ b/src/runtime/components/prose/Strong.vue
@@ -19,21 +19,23 @@ export interface ProseStrongSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseStrongProps>()
+const _props = defineProps<ProseStrongProps>()
+
 defineSlots<ProseStrongSlots>()
 
+const props = useComponentProps('prose.strong', _props)
+
 const appConfig = useAppConfig() as ProseStrong['AppConfig']
-const uiProp = useComponentUI('prose.strong', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.strong || {}) }))
 </script>
 
 <template>
-  <strong :class="ui({ class: [uiProp?.base, props.class] })">
+  <strong :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </strong>
 </template>
diff --git a/src/runtime/components/prose/Table.vue b/src/runtime/components/prose/Table.vue
index b44fd01fb0..d5895ce32b 100644
--- a/src/runtime/components/prose/Table.vue
+++ b/src/runtime/components/prose/Table.vue
@@ -19,22 +19,24 @@ export interface ProseTableSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseTableProps>()
+const _props = defineProps<ProseTableProps>()
+
 defineSlots<ProseTableSlots>()
 
+const props = useComponentProps('prose.table', _props)
+
 const appConfig = useAppConfig() as ProseTable['AppConfig']
-const uiProp = useComponentUI('prose.table', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.table || {}) })())
 </script>
 
 <template>
-  <div :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <table :class="ui.base({ class: uiProp?.base })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table :class="ui.base({ class: props.ui?.base })">
       <slot />
     </table>
   </div>
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index 74093f2850..5575fa02bd 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -33,20 +33,21 @@ export interface ProseTabsSlots {
 <script setup lang="ts">
 import { computed, watch, onMounted, ref, onBeforeUpdate } from 'vue'
 import { useState, useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { transformUI } from '../../utils'
 import { tv } from '../../utils/tv'
 import UTabs from '../Tabs.vue'
 
-const props = withDefaults(defineProps<ProseTabsProps>(), {
+const _props = withDefaults(defineProps<ProseTabsProps>(), {
   defaultValue: '0'
 })
 const slots = defineSlots<ProseTabsSlots>()
 
+const props = useComponentProps('prose.tabs', _props)
+
 const model = defineModel<string>()
 
 const appConfig = useAppConfig() as ProseTabs['AppConfig']
-const uiProp = useComponentUI('prose.tabs', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tabs || {}) }))
@@ -118,7 +119,7 @@ onBeforeUpdate(() => rerenderCount.value++)
     :items="items"
     :class="props.class"
     :unmount-on-hide="false"
-    :ui="transformUI(ui(), uiProp)"
+    :ui="transformUI(ui(), props.ui)"
     @update:model-value="onUpdateModelValue"
   >
     <template #content="{ item }">
diff --git a/src/runtime/components/prose/TabsItem.vue b/src/runtime/components/prose/TabsItem.vue
index ead7dd5ea0..7a9e86ca48 100644
--- a/src/runtime/components/prose/TabsItem.vue
+++ b/src/runtime/components/prose/TabsItem.vue
@@ -21,23 +21,25 @@ export interface ProseTabsItemSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseTabsItemProps>()
+const _props = defineProps<ProseTabsItemProps>()
+
 defineSlots<ProseTabsItemSlots>()
 
+const props = useComponentProps('prose.tabsItem', _props)
+
 const appConfig = useAppConfig() as ProseTabsItem['AppConfig']
-const uiProp = useComponentUI('prose.tabsItem', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tabsItem || {}) }))
 </script>
 
 <template>
-  <div :class="ui({ class: [uiProp?.base, props.class] })">
+  <div :class="ui({ class: [props.ui?.base, props.class] })">
     <slot>
-      {{ description }}
+      {{ props.description }}
     </slot>
   </div>
 </template>
diff --git a/src/runtime/components/prose/Tbody.vue b/src/runtime/components/prose/Tbody.vue
index fee16fed01..396fd6ff79 100644
--- a/src/runtime/components/prose/Tbody.vue
+++ b/src/runtime/components/prose/Tbody.vue
@@ -19,21 +19,23 @@ export interface ProseTbodySlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseTbodyProps>()
+const _props = defineProps<ProseTbodyProps>()
+
 defineSlots<ProseTbodySlots>()
 
+const props = useComponentProps('prose.tbody', _props)
+
 const appConfig = useAppConfig() as ProseTbody['AppConfig']
-const uiProp = useComponentUI('prose.tbody', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tbody || {}) }))
 </script>
 
 <template>
-  <tbody :class="ui({ class: [uiProp?.base, props.class] })">
+  <tbody :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </tbody>
 </template>
diff --git a/src/runtime/components/prose/Td.vue b/src/runtime/components/prose/Td.vue
index c08ae0549e..1fb13eb815 100644
--- a/src/runtime/components/prose/Td.vue
+++ b/src/runtime/components/prose/Td.vue
@@ -20,21 +20,23 @@ export interface ProseTdSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseTdProps>()
+const _props = defineProps<ProseTdProps>()
+
 defineSlots<ProseTdSlots>()
 
+const props = useComponentProps('prose.td', _props)
+
 const appConfig = useAppConfig() as ProseTd['AppConfig']
-const uiProp = useComponentUI('prose.td', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.td || {}) }))
 </script>
 
 <template>
-  <td :class="ui({ align: props.align, class: [uiProp?.base, props.class] })">
+  <td :class="ui({ align: props.align, class: [props.ui?.base, props.class] })">
     <slot />
   </td>
 </template>
diff --git a/src/runtime/components/prose/Th.vue b/src/runtime/components/prose/Th.vue
index 67480741ed..0d809ebcbe 100644
--- a/src/runtime/components/prose/Th.vue
+++ b/src/runtime/components/prose/Th.vue
@@ -20,21 +20,23 @@ export interface ProseThSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseThProps>()
+const _props = defineProps<ProseThProps>()
+
 defineSlots<ProseThSlots>()
 
+const props = useComponentProps('prose.th', _props)
+
 const appConfig = useAppConfig() as ProseTh['AppConfig']
-const uiProp = useComponentUI('prose.th', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.th || {}) }))
 </script>
 
 <template>
-  <th :class="ui({ align: props.align, class: [uiProp?.base, props.class] })">
+  <th :class="ui({ align: props.align, class: [props.ui?.base, props.class] })">
     <slot />
   </th>
 </template>
diff --git a/src/runtime/components/prose/Thead.vue b/src/runtime/components/prose/Thead.vue
index baad73f0d7..8a6a3e6f79 100644
--- a/src/runtime/components/prose/Thead.vue
+++ b/src/runtime/components/prose/Thead.vue
@@ -19,21 +19,23 @@ export interface ProseTheadSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseTheadProps>()
+const _props = defineProps<ProseTheadProps>()
+
 defineSlots<ProseTheadSlots>()
 
+const props = useComponentProps('prose.thead', _props)
+
 const appConfig = useAppConfig() as ProseThead['AppConfig']
-const uiProp = useComponentUI('prose.thead', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.thead || {}) }))
 </script>
 
 <template>
-  <thead :class="ui({ class: [uiProp?.base, props.class] })">
+  <thead :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </thead>
 </template>
diff --git a/src/runtime/components/prose/Tr.vue b/src/runtime/components/prose/Tr.vue
index 089dd00571..58860a8cd2 100644
--- a/src/runtime/components/prose/Tr.vue
+++ b/src/runtime/components/prose/Tr.vue
@@ -19,21 +19,23 @@ export interface ProseTrSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseTrProps>()
+const _props = defineProps<ProseTrProps>()
+
 defineSlots<ProseTrSlots>()
 
+const props = useComponentProps('prose.tr', _props)
+
 const appConfig = useAppConfig() as ProseTr['AppConfig']
-const uiProp = useComponentUI('prose.tr', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tr || {}) }))
 </script>
 
 <template>
-  <tr :class="ui({ class: [uiProp?.base, props.class] })">
+  <tr :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </tr>
 </template>
diff --git a/src/runtime/components/prose/Ul.vue b/src/runtime/components/prose/Ul.vue
index c8a18f7531..74d48b3476 100644
--- a/src/runtime/components/prose/Ul.vue
+++ b/src/runtime/components/prose/Ul.vue
@@ -19,21 +19,23 @@ export interface ProseUlSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import { useComponentUI } from '../../composables/useComponentUI'
+import { useComponentProps } from '../../composables/useComponentProps'
 import { tv } from '../../utils/tv'
 
-const props = defineProps<ProseUlProps>()
+const _props = defineProps<ProseUlProps>()
+
 defineSlots<ProseUlSlots>()
 
+const props = useComponentProps('prose.ul', _props)
+
 const appConfig = useAppConfig() as ProseUl['AppConfig']
-const uiProp = useComponentUI('prose.ul', props)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.ul || {}) }))
 </script>
 
 <template>
-  <ul :class="ui({ class: [uiProp?.base, props.class] })">
+  <ul :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </ul>
 </template>
diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 62bbe36141..be6e87cc72 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -2,7 +2,7 @@ export * from './defineLocale'
 export * from './defineShortcuts'
 export * from './useAvatarGroup'
 export * from './useComponentIcons'
-export * from './useComponentUI'
+export * from './useComponentProps'
 export * from './useContentSearch'
 export * from './useEditorMenu'
 export * from './useFieldGroup'
@@ -15,7 +15,6 @@ export * from './useLocale'
 export * from './useOverlay'
 export * from './usePortal'
 export * from './useResizable'
-export * from './useResolvedVariants'
 export * from './useScrollShadow'
 export * from './useScrollspy'
 export * from './useToast'
diff --git a/src/runtime/composables/useAvatarGroup.ts b/src/runtime/composables/useAvatarGroup.ts
index 1448f34ffd..f142164728 100644
--- a/src/runtime/composables/useAvatarGroup.ts
+++ b/src/runtime/composables/useAvatarGroup.ts
@@ -4,6 +4,14 @@ import type { AvatarGroupProps } from '../types'
 
 export const avatarGroupInjectionKey: InjectionKey<ComputedRef<{ size: AvatarGroupProps['size'] }>> = Symbol('nuxt-ui.avatar-group')
 
+/**
+ * Reads `size` from a wrapping `<UAvatarGroup>`.
+ *
+ * **Always pass the raw `_props`, never the `useComponentProps` proxy** — the
+ * fallback `props.size ?? avatarGroup?.value.size` must keep the wrapping group
+ * winning over `<UTheme :props>`. To still apply theme defaults on bare avatars,
+ * fall back to the proxy at the `tv()` call site: `size: size.value ?? props.size`.
+ */
 export function useAvatarGroup(props: { size: AvatarGroupProps['size'] }) {
   const avatarGroup = inject(avatarGroupInjectionKey, undefined)
 
diff --git a/src/runtime/composables/useComponentProps.ts b/src/runtime/composables/useComponentProps.ts
new file mode 100644
index 0000000000..1ea5b395f4
--- /dev/null
+++ b/src/runtime/composables/useComponentProps.ts
@@ -0,0 +1,272 @@
+import type { ComputedRef, VNode } from 'vue'
+import type { ClassValue } from 'tailwind-variants'
+import { computed, getCurrentInstance } from 'vue'
+import defu from 'defu'
+import { createContext } from 'reka-ui'
+import { useAppConfig } from '#imports'
+import type * as ComponentTypes from '../types'
+import type * as ui from '#build/ui'
+import { get } from '../utils'
+
+type ThemeSlotOverrides<T> = T extends { slots: infer S extends Record<string, any> }
+  ? { [K in keyof S]?: ClassValue }
+  : { [K in keyof T]?: T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : ClassValue }
+
+/**
+ * Flat slot-class override shape: `{ button: { base: '...' }, modal: {...} }`.
+ * Powers the `:ui` prop on `<UTheme>`, which remains the recommended way to
+ * scope class overrides without touching component prop defaults.
+ */
+export type ThemeUI = {
+  [K in keyof typeof ui]?: ThemeSlotOverrides<(typeof ui)[K]>
+}
+
+/**
+ * Strict per-component defaults shape used by `<UTheme :props>`. Authored as
+ * a flat interface with literal keys (rather than a mapped type) so editors —
+ * Volar in particular — surface key completions inside template inline
+ * objects (`:props="{ button: { … } }"`). Volar reliably iterates interface
+ * members but not mapped-type members in this position.
+ *
+ * Keys mirror the theme registry exposed by `#build/ui` (see
+ * `src/templates.ts`): every themable component gets one camelCase entry
+ * whose value is a `Partial` of that component's `<PascalCase>Props`.
+ */
+export interface ThemeDefaults {
+  accordion?: Partial<ComponentTypes.AccordionProps>
+  alert?: Partial<ComponentTypes.AlertProps>
+  authForm?: Partial<ComponentTypes.AuthFormProps>
+  avatar?: Partial<ComponentTypes.AvatarProps>
+  avatarGroup?: Partial<ComponentTypes.AvatarGroupProps>
+  badge?: Partial<ComponentTypes.BadgeProps>
+  banner?: Partial<ComponentTypes.BannerProps>
+  blogPost?: Partial<ComponentTypes.BlogPostProps>
+  blogPosts?: Partial<ComponentTypes.BlogPostsProps>
+  breadcrumb?: Partial<ComponentTypes.BreadcrumbProps>
+  button?: Partial<ComponentTypes.ButtonProps>
+  calendar?: Partial<ComponentTypes.CalendarProps>
+  card?: Partial<ComponentTypes.CardProps>
+  carousel?: Partial<ComponentTypes.CarouselProps>
+  changelogVersion?: Partial<ComponentTypes.ChangelogVersionProps>
+  changelogVersions?: Partial<ComponentTypes.ChangelogVersionsProps>
+  chatMessage?: Partial<ComponentTypes.ChatMessageProps>
+  chatMessages?: Partial<ComponentTypes.ChatMessagesProps>
+  chatPalette?: Partial<ComponentTypes.ChatPaletteProps>
+  chatPrompt?: Partial<ComponentTypes.ChatPromptProps>
+  chatPromptSubmit?: Partial<ComponentTypes.ChatPromptSubmitProps>
+  chatReasoning?: Partial<ComponentTypes.ChatReasoningProps>
+  chatShimmer?: Partial<ComponentTypes.ChatShimmerProps>
+  chatTool?: Partial<ComponentTypes.ChatToolProps>
+  checkbox?: Partial<ComponentTypes.CheckboxProps>
+  checkboxGroup?: Partial<ComponentTypes.CheckboxGroupProps>
+  chip?: Partial<ComponentTypes.ChipProps>
+  collapsible?: Partial<ComponentTypes.CollapsibleProps>
+  colorPicker?: Partial<ComponentTypes.ColorPickerProps>
+  commandPalette?: Partial<ComponentTypes.CommandPaletteProps>
+  container?: Partial<ComponentTypes.ContainerProps>
+  contentNavigation?: Partial<ComponentTypes.ContentNavigationProps>
+  contentSearch?: Partial<ComponentTypes.ContentSearchProps>
+  contentSearchButton?: Partial<ComponentTypes.ContentSearchButtonProps>
+  contentSurround?: Partial<ComponentTypes.ContentSurroundProps>
+  contentToc?: Partial<ComponentTypes.ContentTocProps>
+  contextMenu?: Partial<ComponentTypes.ContextMenuProps>
+  dashboardGroup?: Partial<ComponentTypes.DashboardGroupProps>
+  dashboardNavbar?: Partial<ComponentTypes.DashboardNavbarProps>
+  dashboardPanel?: Partial<ComponentTypes.DashboardPanelProps>
+  dashboardResizeHandle?: Partial<ComponentTypes.DashboardResizeHandleProps>
+  dashboardSearch?: Partial<ComponentTypes.DashboardSearchProps>
+  dashboardSearchButton?: Partial<ComponentTypes.DashboardSearchButtonProps>
+  dashboardSidebar?: Partial<ComponentTypes.DashboardSidebarProps>
+  dashboardSidebarCollapse?: Partial<ComponentTypes.DashboardSidebarCollapseProps>
+  dashboardSidebarToggle?: Partial<ComponentTypes.DashboardSidebarToggleProps>
+  dashboardToolbar?: Partial<ComponentTypes.DashboardToolbarProps>
+  drawer?: Partial<ComponentTypes.DrawerProps>
+  dropdownMenu?: Partial<ComponentTypes.DropdownMenuProps>
+  editor?: Partial<ComponentTypes.EditorProps>
+  editorDragHandle?: Partial<ComponentTypes.EditorDragHandleProps>
+  editorToolbar?: Partial<ComponentTypes.EditorToolbarProps>
+  empty?: Partial<ComponentTypes.EmptyProps>
+  error?: Partial<ComponentTypes.ErrorProps>
+  fieldGroup?: Partial<ComponentTypes.FieldGroupProps>
+  fileUpload?: Partial<ComponentTypes.FileUploadProps>
+  footer?: Partial<ComponentTypes.FooterProps>
+  footerColumns?: Partial<ComponentTypes.FooterColumnsProps>
+  // TODO: `FormProps` carries three generics for state, schema, and fields —
+  // none of which are themable defaults. Loosened to `any` so this entry stays
+  // assignable from any concrete `Form` instance.
+  form?: Partial<ComponentTypes.FormProps<any, any, any>>
+  formField?: Partial<ComponentTypes.FormFieldProps>
+  header?: Partial<ComponentTypes.HeaderProps>
+  input?: Partial<ComponentTypes.InputProps>
+  inputDate?: Partial<ComponentTypes.InputDateProps>
+  inputMenu?: Partial<ComponentTypes.InputMenuProps>
+  inputNumber?: Partial<ComponentTypes.InputNumberProps>
+  inputTags?: Partial<ComponentTypes.InputTagsProps>
+  inputTime?: Partial<ComponentTypes.InputTimeProps>
+  kbd?: Partial<ComponentTypes.KbdProps>
+  listbox?: Partial<ComponentTypes.ListboxProps>
+  main?: Partial<ComponentTypes.MainProps>
+  marquee?: Partial<ComponentTypes.MarqueeProps>
+  modal?: Partial<ComponentTypes.ModalProps>
+  navigationMenu?: Partial<ComponentTypes.NavigationMenuProps>
+  page?: Partial<ComponentTypes.PageProps>
+  pageAnchors?: Partial<ComponentTypes.PageAnchorsProps>
+  pageAside?: Partial<ComponentTypes.PageAsideProps>
+  pageBody?: Partial<ComponentTypes.PageBodyProps>
+  pageCTA?: Partial<ComponentTypes.PageCTAProps>
+  pageCard?: Partial<ComponentTypes.PageCardProps>
+  pageColumns?: Partial<ComponentTypes.PageColumnsProps>
+  pageFeature?: Partial<ComponentTypes.PageFeatureProps>
+  pageGrid?: Partial<ComponentTypes.PageGridProps>
+  pageHeader?: Partial<ComponentTypes.PageHeaderProps>
+  pageHero?: Partial<ComponentTypes.PageHeroProps>
+  pageLinks?: Partial<ComponentTypes.PageLinksProps>
+  pageList?: Partial<ComponentTypes.PageListProps>
+  pageLogos?: Partial<ComponentTypes.PageLogosProps>
+  pageSection?: Partial<ComponentTypes.PageSectionProps>
+  pagination?: Partial<ComponentTypes.PaginationProps>
+  pinInput?: Partial<ComponentTypes.PinInputProps>
+  popover?: Partial<ComponentTypes.PopoverProps>
+  pricingPlan?: Partial<ComponentTypes.PricingPlanProps>
+  pricingPlans?: Partial<ComponentTypes.PricingPlansProps>
+  pricingTable?: Partial<ComponentTypes.PricingTableProps>
+  progress?: Partial<ComponentTypes.ProgressProps>
+  radioGroup?: Partial<ComponentTypes.RadioGroupProps>
+  scrollArea?: Partial<ComponentTypes.ScrollAreaProps>
+  select?: Partial<ComponentTypes.SelectProps>
+  selectMenu?: Partial<ComponentTypes.SelectMenuProps>
+  separator?: Partial<ComponentTypes.SeparatorProps>
+  sidebar?: Partial<ComponentTypes.SidebarProps>
+  skeleton?: Partial<ComponentTypes.SkeletonProps>
+  slideover?: Partial<ComponentTypes.SlideoverProps>
+  slider?: Partial<ComponentTypes.SliderProps>
+  stepper?: Partial<ComponentTypes.StepperProps>
+  switch?: Partial<ComponentTypes.SwitchProps>
+  table?: Partial<ComponentTypes.TableProps>
+  tabs?: Partial<ComponentTypes.TabsProps>
+  textarea?: Partial<ComponentTypes.TextareaProps>
+  timeline?: Partial<ComponentTypes.TimelineProps>
+  toast?: Partial<ComponentTypes.ToastProps>
+  toaster?: Partial<ComponentTypes.ToasterProps>
+  tooltip?: Partial<ComponentTypes.TooltipProps>
+  tree?: Partial<ComponentTypes.TreeProps>
+  user?: Partial<ComponentTypes.UserProps>
+}
+
+/**
+ * Loose internal shape stored on the injected `ThemeContext`. Allows the
+ * `prose` namespace (lifted by `normalizeUi`) and any unknown keys to flow
+ * through without polluting the user-facing `ThemeDefaults` type.
+ */
+export type ThemeContextDefaults = ThemeDefaults & {
+  [name: string]: Record<string, any> | undefined
+}
+
+export type ThemeContext = {
+  defaults: ComputedRef<ThemeContextDefaults>
+}
+
+const [_injectThemeContext, provideThemeContext] = createContext<ThemeContext>('UTheme', 'RootContext')
+
+/**
+ * Module-level fallback so components can call `useComponentProps` outside any
+ * `<UTheme>` wrapper without crashing.
+ */
+export const defaultThemeContext: ThemeContext = {
+  defaults: computed(() => ({}))
+}
+
+export function injectThemeContext(fallback: ThemeContext = defaultThemeContext): ThemeContext {
+  return _injectThemeContext(fallback)
+}
+
+export { provideThemeContext }
+
+function camelCase(str: string): string {
+  return str.replace(/-(\w)/g, (_, c: string) => c.toUpperCase())
+}
+
+function kebabCase(str: string): string {
+  return str.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`)
+}
+
+/**
+ * Vuetify-style detection for whether a prop was explicitly passed by the parent,
+ * distinguishing "user set it" from "got the `withDefaults` fallback".
+ * Checks both camelCase and kebab-case names to cover both template conventions.
+ */
+function propIsDefined(vnode: VNode | null | undefined, prop: string): boolean {
+  if (!vnode || !vnode.props) return false
+  return vnode.props[camelCase(prop)] !== undefined
+    || vnode.props[kebabCase(prop)] !== undefined
+}
+
+/**
+ * Resolve a component's props with the priority chain:
+ *   explicit prop > nearest UTheme > withDefaults
+ *     > app.config.ui.<name>.defaultVariants
+ *
+ * The returned proxy transparently reads from `props`, falling through to the
+ * injected `ThemeContext` and `app.config.ui.<name>.defaultVariants` for
+ * defaults. The component's tv() `defaultVariants` are intentionally left out
+ * of the proxy fallback — they continue to drive `tv()`-internal class
+ * resolution (the original semantics) without leaking into prop reads. The
+ * `ui` prop is deep-merged (explicit slot classes override theme slot classes)
+ * instead of being replaced.
+ */
+export function useComponentProps<T extends object>(name: string, props: T): T {
+  const vm = getCurrentInstance()
+  const { defaults } = injectThemeContext()
+  const appConfig = useAppConfig() as { ui?: Record<string, any> }
+
+  return new Proxy(props, {
+    get(target, prop, receiver) {
+      // Advertise as a Vue reactive proxy so `toRefs`, `reactiveOmit`,
+      // `reactivePick`, and similar utilities don't warn when given the proxy.
+      // Reads still flow through to the underlying reactive `props` object
+      // returned by `defineProps`, so reactivity tracking works normally.
+      if (prop === '__v_isReactive') return true
+      if (prop === '__v_raw') return target
+
+      const raw = Reflect.get(target, prop, receiver)
+      if (typeof prop !== 'string') return raw
+
+      // Support dotted-path names (e.g. `prose.p`, `prose.code`) so prose
+      // components can pull from the same nested `ThemeContext.defaults` shape
+      // that `normalizeUi` produces in `<UTheme>`.
+      const themeEntry = name.includes('.') ? get(defaults.value, name) : defaults.value[name]
+
+      if (prop === 'ui') {
+        const themeUi = themeEntry?.ui
+        if (!raw && !themeUi) return raw
+        return defu(raw ?? {}, themeUi ?? {})
+      }
+
+      if (vm && propIsDefined(vm.vnode, prop)) return raw
+
+      const themeValue = themeEntry?.[prop]
+      if (themeValue !== undefined) return themeValue
+
+      // Only fall back to `raw` when `withDefaults` set an explicit default for
+      // this prop. Otherwise Vue's runtime would auto-cast unset Boolean props
+      // to `false` (and other typed props to their normalized fallback), which
+      // would override defaults baked into the underlying primitive when those
+      // props are forwarded downstream.
+      const propDef = (vm?.type as any)?.props?.[prop]
+      if (propDef && Object.prototype.hasOwnProperty.call(propDef, 'default')) {
+        return raw
+      }
+
+      const appConfigEntry = name.includes('.') ? get(appConfig.ui ?? {}, name) : appConfig.ui?.[name]
+      return appConfigEntry?.defaultVariants?.[prop]
+    },
+    // `has`, `ownKeys`, and `getOwnPropertyDescriptor` reflect the underlying
+    // `defineProps` schema only — theme defaults are NOT enumerable. As a
+    // result, `Object.keys(props)`, `for…in`, and `{ ...props }` see only the
+    // declared prop keys, but each value lookup still flows through the proxy.
+    // This is the contract our internal `useForwardProps` relies on.
+    has: (t, p) => Reflect.has(t, p),
+    ownKeys: t => Reflect.ownKeys(t),
+    getOwnPropertyDescriptor: (t, p) => Reflect.getOwnPropertyDescriptor(t, p)
+  })
+}
diff --git a/src/runtime/composables/useComponentUI.ts b/src/runtime/composables/useComponentUI.ts
deleted file mode 100644
index 43140438c1..0000000000
--- a/src/runtime/composables/useComponentUI.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { ComputedRef } from 'vue'
-import type { ClassValue } from 'tailwind-variants'
-import { computed } from 'vue'
-import defu from 'defu'
-import { createContext } from 'reka-ui'
-import type { TVConfig } from '../types/tv'
-import type * as ui from '#build/ui'
-import { get } from '../utils'
-
-type UIConfig = TVConfig<typeof ui>
-type ExtractUISlots<C> = C extends { slots?: infer S } ? NonNullable<S> : never
-type UIConfigSlots<T extends keyof UIConfig>
-  = 'slots' extends keyof NonNullable<UIConfig[T]>
-    ? ExtractUISlots<NonNullable<UIConfig[T]>>
-    : { base?: ClassValue }
-
-type ThemeSlotOverrides<T> = T extends { slots: infer S extends Record<string, any> }
-  ? { [K in keyof S]?: ClassValue }
-  : { [K in keyof T]?: T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : ClassValue }
-
-export type ThemeUI = {
-  [K in keyof typeof ui]?: ThemeSlotOverrides<(typeof ui)[K]>
-}
-
-export type ThemeRootContext = {
-  ui: ComputedRef<ThemeUI>
-}
-
-const [injectThemeContext, provideThemeContext] = createContext<ThemeRootContext>('UTheme', 'RootContext')
-
-export { provideThemeContext }
-
-type ComponentUIProps<T extends keyof UIConfig> = {
-  ui?: UIConfigSlots<T>
-}
-
-export function useComponentUI<T extends keyof UIConfig>(name: T, props: ComponentUIProps<T>): ComputedRef<UIConfigSlots<T>>
-export function useComponentUI(name: string, props: { ui?: any }): ComputedRef<any>
-export function useComponentUI(name: string, props: { ui?: any }): ComputedRef<any> {
-  const { ui } = injectThemeContext({ ui: computed(() => ({})) })
-
-  return computed(() => {
-    const themeOverrides = (get(ui.value, name as string) || {})
-
-    return defu(props.ui ?? {}, themeOverrides)
-  })
-}
diff --git a/src/runtime/composables/useFieldGroup.ts b/src/runtime/composables/useFieldGroup.ts
index 67fe17e45b..fbc9698a53 100644
--- a/src/runtime/composables/useFieldGroup.ts
+++ b/src/runtime/composables/useFieldGroup.ts
@@ -12,6 +12,14 @@ type Props<T> = {
   size?: GetObjectField<T, 'size'>
 }
 
+/**
+ * Reads `size` / `orientation` from a wrapping `<UFieldGroup>` (or `<UButtonGroup>`, etc.).
+ *
+ * **Always pass the raw `_props`, never the `useComponentProps` proxy** — the
+ * fallback `props?.size ?? fieldGroup?.value.size` must keep the closer context
+ * winning over `<UTheme :props>`. To still apply theme defaults on bare inputs,
+ * fall back to the proxy at the `tv()` call site: `size: groupSize.value ?? props.size`.
+ */
 export function useFieldGroup<T>(props: Props<T>) {
   const fieldGroup = inject(fieldGroupInjectionKey, undefined)
   return {
diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts
index 354c6772ec..9951af4c5a 100644
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -24,6 +24,26 @@ export const formInputsInjectionKey: InjectionKey<Ref<Record<string, { id?: stri
 export const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('nuxt-ui.form-loading')
 export const formErrorsInjectionKey: InjectionKey<Readonly<Ref<FormErrorWithId[]>>> = Symbol('nuxt-ui.form-errors')
 
+/**
+ * Wires an input to its wrapping `<UFormField>` (id/name/aria, validation events, error-driven color).
+ *
+ * **Always pass the raw `_props`, never the `useComponentProps` proxy.**
+ * The internal fallback `props?.x ?? formField?.value.x` must distinguish
+ * "explicit prop" from "theme default" — passing the proxy would leak
+ * `<UTheme :props>` defaults into the explicit slot and let theme size/color
+ * silently override the wrapping field (regression-tested in `Theme.spec.ts`).
+ *
+ * To get `<UTheme :props>` to apply when no `<UFormField>` wraps the input,
+ * fall back to the proxy at the `tv()` call site:
+ *
+ * ```ts
+ * size: size.value ?? props.size,
+ * color: color.value ?? props.color,
+ * highlight: highlight.value ?? props.highlight
+ * ```
+ *
+ * Final precedence: `explicit > FormField > <UTheme :props> > withDefaults > app.config > tv defaults`.
+ */
 export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, deferInputValidation?: boolean }) {
   const formOptions = inject(formOptionsInjectionKey, undefined)
   const formBus = inject(formBusInjectionKey, undefined)
diff --git a/src/runtime/composables/useForwardProps.ts b/src/runtime/composables/useForwardProps.ts
new file mode 100644
index 0000000000..8efc547e5f
--- /dev/null
+++ b/src/runtime/composables/useForwardProps.ts
@@ -0,0 +1,30 @@
+import type { ComputedRef, MaybeRef } from 'vue'
+import { computed, isRef } from 'vue'
+import { useEmitAsProps } from 'reka-ui'
+
+/**
+ * Proxy-aware replacement for reka-ui's `useForwardProps` / `useForwardPropsEmits`.
+ * Forwards every enumerable key of `source` whose value is not `undefined`, and
+ * — when `emits` is provided — merges the emit handlers as `onUpdate:open`-style
+ * props on the resulting object.
+ *
+ * Unlike reka-ui's version, this does NOT filter by `vm.vnode.props` or
+ * `vm.type.props.<key>.default`, so values supplied by `<UTheme :props>`
+ * through `useComponentProps` flow through transparently to the underlying
+ * Reka primitive.
+ */
+export function useForwardProps<T extends object, E extends string = string>(
+  source: MaybeRef<T> | ComputedRef<T>,
+  emits?: (event: E, ...args: any[]) => void
+): ComputedRef<Partial<T>> {
+  const emitAsProps = emits ? useEmitAsProps(emits) : {}
+  return computed(() => {
+    const src = isRef(source) ? source.value : source
+    const out: Record<string, any> = { ...emitAsProps }
+    for (const key in src) {
+      const value = (src as any)[key]
+      if (value !== undefined) out[key] = value
+    }
+    return out as Partial<T>
+  })
+}
diff --git a/src/runtime/composables/useResolvedVariants.ts b/src/runtime/composables/useResolvedVariants.ts
deleted file mode 100644
index cc84a51d14..0000000000
--- a/src/runtime/composables/useResolvedVariants.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ComputedRef, MaybeRefOrGetter } from 'vue'
-import { computed, toValue } from 'vue'
-import { useAppConfig } from '#imports'
-import { get } from '../utils'
-
-/**
- * Resolve variant values that are consumed in template logic (e.g. `<component :is="...">`).
- *
- * `tv()`'s `defaultVariants` only apply when computing classes — they don't affect
- * template conditionals that read the prop directly. This mirrors tv's priority:
- * `props[key]` > `app.config.ts` `defaultVariants[key]` > `theme.defaultVariants[key]`.
- *
- * @example
- * const { variant } = useResolvedVariants('radioGroup', props, theme, ['variant'])
- *
- * // For nested prop paths, override with a getter:
- * const { position } = useResolvedVariants('select', props, theme, ['position'], {
- *   position: () => props.content?.position
- * })
- *
- * Related: #6360
- */
-export function useResolvedVariants<K extends string>(
-  name: string,
-  props: Record<string, any>,
-  theme: Record<string, any>,
-  keys: K[],
-  overrides?: Partial<Record<K, MaybeRefOrGetter<any>>>
-): { [P in K]: ComputedRef<any> } {
-  const appConfig = useAppConfig()
-  const result = {} as { [P in K]: ComputedRef<any> }
-
-  for (const key of keys) {
-    result[key] = computed(() => {
-      const value = overrides?.[key] !== undefined ? toValue(overrides[key]!) : get(props, key)
-      return value ?? ((appConfig as any).ui?.[name] as any)?.defaultVariants?.[key] ?? theme.defaultVariants?.[key]
-    })
-  }
-
-  return result
-}
diff --git a/src/runtime/types/content.ts b/src/runtime/types/content.ts
index 3679377264..bcb3684750 100644
--- a/src/runtime/types/content.ts
+++ b/src/runtime/types/content.ts
@@ -1,4 +1,5 @@
 export * from '../components/content/ContentNavigation.vue'
 export * from '../components/content/ContentSearch.vue'
+export * from '../components/content/ContentSearchButton.vue'
 export * from '../components/content/ContentSurround.vue'
 export * from '../components/content/ContentToc.vue'
diff --git a/src/theme/chat-tool.ts b/src/theme/chat-tool.ts
index 104dc76e47..8f83d43906 100644
--- a/src/theme/chat-tool.ts
+++ b/src/theme/chat-tool.ts
@@ -42,8 +42,5 @@ export default (options: Required<ModuleOptions>) => ({
         chevronIcon: ['absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100', options.theme.transitions && 'transition-[rotate,opacity] duration-200']
       }
     }
-  },
-  defaultVariants: {
-    variant: 'inline'
   }
 })
diff --git a/src/theme/form-field.ts b/src/theme/form-field.ts
index c34f511068..99831eae40 100644
--- a/src/theme/form-field.ts
+++ b/src/theme/form-field.ts
@@ -33,7 +33,6 @@ export default {
     }
   },
   defaultVariants: {
-    size: 'md',
-    orientation: 'vertical'
+    size: 'md'
   }
 }
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index fc4c604908..61baf150ec 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -175,7 +175,6 @@ export default (options: Required<ModuleOptions>) => ({
     size: 'md',
     color: 'primary',
     variant: 'list',
-    orientation: 'vertical',
     indicator: 'start'
   }
 })
diff --git a/test/components/Theme.spec.ts b/test/components/Theme.spec.ts
index c78af64708..d16f560052 100644
--- a/test/components/Theme.spec.ts
+++ b/test/components/Theme.spec.ts
@@ -4,10 +4,18 @@ import type { ThemeProps, ThemeSlots } from '../../src/runtime/components/Theme.
 import Theme from '../../src/runtime/components/Theme.vue'
 import { renderEach, componentRender } from '../component-render'
 import { h, ref, nextTick } from 'vue'
+import { TooltipProvider } from 'reka-ui'
 import Button from '../../src/runtime/components/Button.vue'
 import Badge from '../../src/runtime/components/Badge.vue'
 import Alert from '../../src/runtime/components/Alert.vue'
 import Input from '../../src/runtime/components/Input.vue'
+import Checkbox from '../../src/runtime/components/Checkbox.vue'
+import Tooltip from '../../src/runtime/components/Tooltip.vue'
+import FormField from '../../src/runtime/components/FormField.vue'
+import FieldGroup from '../../src/runtime/components/FieldGroup.vue'
+import Avatar from '../../src/runtime/components/Avatar.vue'
+import AvatarGroup from '../../src/runtime/components/AvatarGroup.vue'
+import type { ButtonProps } from '../../src/runtime/types'
 
 type CaseOptions = { props?: ThemeProps, slots?: ThemeSlots }
 
@@ -241,4 +249,304 @@ describe('Theme', () => {
 
     expect(wrapper.find('[data-slot="root"]').classes()).toContain('input-theme-class')
   })
+
+  test(':props applies prop defaults to child', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, Button },
+      template: `
+        <Theme :props="{ button: { color: 'error', variant: 'soft' } }">
+          <Button label="Themed" />
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('button').classes()).toContain('bg-error/10')
+    expect(wrapper.find('button').classes()).not.toContain('bg-primary')
+  })
+
+  test('explicit prop wins over :props (other theme props still flow through)', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, Button },
+      template: `
+        <Theme :props="{ button: { color: 'error', variant: 'soft' } }">
+          <Button label="Override" color="primary" />
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('button').classes()).toContain('bg-primary/10')
+    expect(wrapper.find('button').classes()).not.toContain('bg-error/10')
+  })
+
+  test(':props applies to multiple component types simultaneously', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, Button, Checkbox },
+      template: `
+        <Theme :props="{ button: { color: 'error', variant: 'soft' }, checkbox: { color: 'success' } }">
+          <Button label="Themed Button" />
+          <Checkbox model-value label="Themed Checkbox" />
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('button').classes()).toContain('bg-error/10')
+    expect(wrapper.html()).toContain('focus-visible:outline-success')
+  })
+
+  test(':props does not leak outside scope', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, Button },
+      template: `
+        <div>
+          <Theme :props="{ button: { color: 'error', variant: 'soft' } }">
+            <Button label="Inside" class="inside-btn" />
+          </Theme>
+          <Button label="Outside" class="outside-btn" />
+        </div>
+      `
+    })
+
+    expect(wrapper.find('.inside-btn').classes()).toContain('bg-error/10')
+    expect(wrapper.find('.outside-btn').classes()).not.toContain('bg-error/10')
+  })
+
+  test('nested :props inherits non-overridden keys from outer', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, Button },
+      template: `
+        <Theme :props="{ button: { color: 'error', variant: 'soft' } }">
+          <Button label="Outer" class="outer-btn" />
+          <Theme :props="{ button: { color: 'success' } }">
+            <Button label="Inner" class="inner-btn" />
+          </Theme>
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('.outer-btn').classes()).toContain('bg-error/10')
+    expect(wrapper.find('.inner-btn').classes()).toContain('bg-success/10')
+    expect(wrapper.find('.inner-btn').classes()).not.toContain('bg-error/10')
+  })
+
+  // Real-world layout: an outer `<UTheme :props>` set near the root configures
+  // a "global" component (e.g. tooltip), and an inner `<UTheme :props>` further
+  // down the tree only overrides a different component (e.g. button). Both
+  // should compose: tooltips below the inner theme still inherit the outer's
+  // tooltip defaults, and the inner's button override applies only locally.
+  test('nested :props inherits across different components', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, TooltipProvider, Tooltip, Button },
+      template: `
+        <Theme :props="{ tooltip: { arrow: true }, button: { color: 'error', variant: 'soft' } }">
+          <TooltipProvider>
+            <Theme :props="{ button: { color: 'success' } }">
+              <Tooltip text="Inner tooltip" :open="true" :portal="false">
+                <Button label="Inner" class="inner-btn" />
+              </Tooltip>
+            </Theme>
+          </TooltipProvider>
+        </Theme>
+      `
+    })
+
+    // Inner button picks up the inner theme's color override, but inherits
+    // `variant: 'soft'` from the outer theme (proven by `bg-success/10` —
+    // the soft variant of success).
+    expect(wrapper.find('.inner-btn').classes()).toContain('bg-success/10')
+    expect(wrapper.find('.inner-btn').classes()).not.toContain('bg-error/10')
+
+    // Tooltip below the inner theme inherits the outer theme's `arrow: true`
+    // because the inner theme didn't touch the `tooltip` key.
+    expect(wrapper.find('[data-slot="arrow"]').exists()).toBe(true)
+  })
+
+  test('reacts to :props changes', async () => {
+    const themeProps = ref<{ button: Partial<ButtonProps> }>({ button: { color: 'error', variant: 'soft' } })
+
+    const wrapper = await mountSuspended({
+      components: { Theme, Button },
+      setup: () => ({ themeProps }),
+      template: `
+        <Theme :props="themeProps">
+          <Button label="Themed" />
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('button').classes()).toContain('bg-error/10')
+
+    themeProps.value = { button: { color: 'success', variant: 'soft' } }
+    await nextTick()
+
+    expect(wrapper.find('button').classes()).toContain('bg-success/10')
+    expect(wrapper.find('button').classes()).not.toContain('bg-error/10')
+  })
+
+  test(':props and :ui work together', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, Button },
+      template: `
+        <Theme
+          :props="{ button: { color: 'error', variant: 'soft' } }"
+          :ui="{ button: { base: 'rounded-full' } }"
+        >
+          <Button label="Both" />
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('button').classes()).toContain('bg-error/10')
+    expect(wrapper.find('button').classes()).toContain('rounded-full')
+  })
+
+  // Boolean values supplied via `:props` must reach a Reka primitive root through
+  // `useForwardProps`. This is the path where Vue's auto-casting of unset Boolean
+  // props would otherwise turn the proxy result into `false` and silently swallow
+  // the theme value — the test pins down that the proxy + forwarder cooperate.
+  test(':props forwards a boolean to a reka primitive root (tooltip arrow)', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, TooltipProvider, Tooltip },
+      template: `
+        <Theme :props="{ tooltip: { arrow: true } }">
+          <TooltipProvider>
+            <Tooltip text="Themed" :open="true" :portal="false" />
+          </TooltipProvider>
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('[data-slot="arrow"]').exists()).toBe(true)
+  })
+
+  // Without a `<UTheme :props>` ancestor, an unset Boolean prop must stay unset
+  // so the underlying Reka primitive's own default applies. The proxy gates the
+  // `_props` fallback on `withDefaults` having a real default, otherwise Vue's
+  // auto-cast `false` would leak through.
+  test('bare component does not pass Vue auto-cast `false` to reka primitive', async () => {
+    const wrapper = await mountSuspended({
+      components: { TooltipProvider, Tooltip },
+      template: `
+        <TooltipProvider>
+          <Tooltip text="Bare" :open="true" :portal="false" />
+        </TooltipProvider>
+      `
+    })
+
+    expect(wrapper.find('[data-slot="arrow"]').exists()).toBe(false)
+  })
+
+  // `useFormField` must receive the raw `_props` rather than the
+  // `useComponentProps` proxy, otherwise `<UTheme :props>` defaults would shadow
+  // values injected by `<UFormField>` (size, name, disabled, error...). This test
+  // locks down the precedence: explicit FormField context > `<UTheme :props>`.
+  test(':props on a child of <UFormField> still honors field injection', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, FormField, Checkbox },
+      template: `
+        <Theme :props="{ checkbox: { color: 'success', size: 'xs' } }">
+          <FormField label="Accept" size="xl">
+            <Checkbox model-value />
+          </FormField>
+        </Theme>
+      `
+    })
+
+    // theme `color` flows through the proxy onto the checkbox
+    expect(wrapper.html()).toContain('focus-visible:outline-success')
+    // FormField label is wired up
+    expect(wrapper.text()).toContain('Accept')
+    // FormField-injected `size` (xl) wins over `<UTheme :props>` size (xs).
+    // `useFormField` reads `_props.size` (raw, undefined here) so it falls back
+    // to the FormField context — proving the proxy isn't shadowing field injection.
+    expect(wrapper.find('button[role="checkbox"]').classes()).toContain('size-5')
+    expect(wrapper.find('button[role="checkbox"]').classes()).not.toContain('size-3')
+  })
+
+  // FormField validation errors must always win over `<UTheme :props>` color.
+  // `useFormField` reads raw `_props` and short-circuits to `'error'` when a
+  // validation message is present, so the proxy fallback in
+  // `color: color.value ?? props.color` never runs.
+  test('FormField validation error overrides :props color', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, FormField, Checkbox },
+      template: `
+        <Theme :props="{ checkbox: { color: 'success' } }">
+          <FormField label="Required" error="This field is required">
+            <Checkbox model-value />
+          </FormField>
+        </Theme>
+      `
+    })
+
+    expect(wrapper.html()).toContain('focus-visible:outline-error')
+    expect(wrapper.html()).not.toContain('focus-visible:outline-success')
+  })
+
+  // `useFieldGroup` shares the same closer-context-wins fallback as
+  // `useFormField` (`_props.size ?? fieldGroup.size`). A child Button inside
+  // `<UFieldGroup>` must take its size from the wrapping group, not from
+  // `<UTheme :props="{ button: { size } }">`. Regressed once when components
+  // were passing the proxy `props` to `useFieldGroup` instead of `_props`.
+  test('FieldGroup size wins over :props button size', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, FieldGroup, Button },
+      template: `
+        <Theme :props="{ button: { size: 'xs' } }">
+          <FieldGroup size="xl">
+            <Button label="Save" />
+          </FieldGroup>
+        </Theme>
+      `
+    })
+
+    const btn = wrapper.find('button')
+    expect(btn.classes()).toContain('text-base')
+    expect(btn.classes()).not.toContain('text-xs')
+  })
+
+  // `useAvatarGroup` follows the same pattern: `<UAvatarGroup size>` is the
+  // closer context and must beat `<UTheme :props="{ avatar: { size } }">`.
+  test('AvatarGroup size wins over :props avatar size', async () => {
+    const wrapper = await mountSuspended({
+      components: { Theme, AvatarGroup, Avatar },
+      template: `
+        <Theme :props="{ avatar: { size: 'xs' } }">
+          <AvatarGroup size="xl">
+            <Avatar src="https://example.com/a.png" />
+            <Avatar src="https://example.com/b.png" />
+          </AvatarGroup>
+        </Theme>
+      `
+    })
+
+    const avatars = wrapper.findAll('span[data-slot="root"]')
+    expect(avatars.length).toBeGreaterThan(0)
+    avatars.forEach((avatar) => {
+      expect(avatar.classes()).toContain('size-10')
+      expect(avatar.classes()).not.toContain('size-6')
+    })
+  })
+
+  test('reactivity: toggling a boolean in :props re-renders the reka primitive', async () => {
+    const themeProps = ref<{ tooltip: { arrow?: boolean } }>({ tooltip: { arrow: false } })
+
+    const wrapper = await mountSuspended({
+      components: { Theme, TooltipProvider, Tooltip },
+      setup: () => ({ themeProps }),
+      template: `
+        <Theme :props="themeProps">
+          <TooltipProvider>
+            <Tooltip text="Themed" :open="true" :portal="false" />
+          </TooltipProvider>
+        </Theme>
+      `
+    })
+
+    expect(wrapper.find('[data-slot="arrow"]').exists()).toBe(false)
+
+    themeProps.value = { tooltip: { arrow: true } }
+    await nextTick()
+
+    expect(wrapper.find('[data-slot="arrow"]').exists()).toBe(true)
+  })
 })
diff --git a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
index 86cea0ef55..8330f213b8 100644
--- a/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm-vue.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -22,7 +22,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -53,7 +53,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -68,7 +68,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -103,7 +103,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -118,7 +118,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -153,7 +153,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -168,7 +168,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -199,7 +199,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -214,7 +214,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -245,7 +245,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -260,7 +260,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -291,7 +291,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -306,7 +306,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -337,7 +337,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -352,7 +352,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -387,7 +387,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -402,7 +402,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -437,7 +437,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -452,7 +452,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -483,7 +483,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -498,7 +498,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -534,7 +534,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       <div data-slot="border" class="border-default w-full border-solid border-t"></div>
     </div>
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -549,7 +549,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -580,7 +580,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
     <div data-slot="providers" class="space-y-3">Providers</div>
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -595,7 +595,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -626,7 +626,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -641,7 +641,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -672,7 +672,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -687,7 +687,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -718,7 +718,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -733,7 +733,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -765,7 +765,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -780,7 +780,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -815,7 +815,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -830,7 +830,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -861,7 +861,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -876,7 +876,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -907,7 +907,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -922,7 +922,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <div id="v-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index f7d0818fd6..bd43cdee4f 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -22,7 +22,7 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -55,7 +55,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -70,7 +70,7 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -107,7 +107,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -122,7 +122,7 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -159,7 +159,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -174,7 +174,7 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -207,7 +207,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -222,7 +222,7 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -255,7 +255,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -270,7 +270,7 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -303,7 +303,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -318,7 +318,7 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -351,7 +351,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -366,7 +366,7 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -403,7 +403,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -418,7 +418,7 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -455,7 +455,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -470,7 +470,7 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -503,7 +503,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -518,7 +518,7 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -556,7 +556,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
       <div data-slot="border" class="border-default w-full border-solid border-t"></div>
     </div>
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -571,7 +571,7 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -604,7 +604,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
     <div data-slot="providers" class="space-y-3">Providers</div>
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -619,7 +619,7 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -652,7 +652,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -667,7 +667,7 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -700,7 +700,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -715,7 +715,7 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -748,7 +748,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -763,7 +763,7 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -797,7 +797,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -812,7 +812,7 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -849,7 +849,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -864,7 +864,7 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -897,7 +897,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -912,7 +912,7 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
@@ -945,7 +945,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
     <!--v-if-->
     <!--v-if-->
     <form id="v-0-0-0" class="space-y-5" data-slot="form">
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-1" data-slot="label" class="block font-medium text-default">Email</label>
             <!--v-if-->
@@ -960,7 +960,7 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <div id="v-0-0-1-error" data-slot="error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
-      <div data-slot="root" class="text-sm">
+      <div data-orientation="vertical" data-slot="root" class="text-sm">
         <div data-slot="wrapper" class="">
           <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0-2" data-slot="label" class="block font-medium text-default">Password</label>
             <!--v-if-->
diff --git a/test/components/__snapshots__/Form-vue.spec.ts.snap b/test/components/__snapshots__/Form-vue.spec.ts.snap
index 379f047efa..6c2ea53cfe 100644
--- a/test/components/__snapshots__/Form-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Form-vue.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Form > custom validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -15,7 +15,7 @@ exports[`Form > custom validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -33,7 +33,7 @@ exports[`Form > custom validation works > with error 1`] = `
 
 exports[`Form > custom validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -46,7 +46,7 @@ exports[`Form > custom validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -64,7 +64,7 @@ exports[`Form > custom validation works > without error 1`] = `
 
 exports[`Form > joi validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -77,7 +77,7 @@ exports[`Form > joi validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -95,7 +95,7 @@ exports[`Form > joi validation works > with error 1`] = `
 
 exports[`Form > joi validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -108,7 +108,7 @@ exports[`Form > joi validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -130,7 +130,7 @@ exports[`Form > renders with state correctly 1`] = `"<form id="v-0" class=""></f
 
 exports[`Form > superstruct validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -143,7 +143,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -161,7 +161,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
 
 exports[`Form > superstruct validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -174,7 +174,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -192,7 +192,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
 
 exports[`Form > valibot validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -205,7 +205,7 @@ exports[`Form > valibot validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -223,7 +223,7 @@ exports[`Form > valibot validation works > with error 1`] = `
 
 exports[`Form > valibot validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -236,7 +236,7 @@ exports[`Form > valibot validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -254,7 +254,7 @@ exports[`Form > valibot validation works > without error 1`] = `
 
 exports[`Form > yup validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -267,7 +267,7 @@ exports[`Form > yup validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -285,7 +285,7 @@ exports[`Form > yup validation works > with error 1`] = `
 
 exports[`Form > yup validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -298,7 +298,7 @@ exports[`Form > yup validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -316,7 +316,7 @@ exports[`Form > yup validation works > without error 1`] = `
 
 exports[`Form > zod validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -329,7 +329,7 @@ exports[`Form > zod validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -347,7 +347,7 @@ exports[`Form > zod validation works > with error 1`] = `
 
 exports[`Form > zod validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -360,7 +360,7 @@ exports[`Form > zod validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/Form.spec.ts.snap b/test/components/__snapshots__/Form.spec.ts.snap
index 574b64511b..cf734ea572 100644
--- a/test/components/__snapshots__/Form.spec.ts.snap
+++ b/test/components/__snapshots__/Form.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Form > custom validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -15,7 +15,7 @@ exports[`Form > custom validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -33,7 +33,7 @@ exports[`Form > custom validation works > with error 1`] = `
 
 exports[`Form > custom validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -46,7 +46,7 @@ exports[`Form > custom validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -64,7 +64,7 @@ exports[`Form > custom validation works > without error 1`] = `
 
 exports[`Form > joi validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -77,7 +77,7 @@ exports[`Form > joi validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -95,7 +95,7 @@ exports[`Form > joi validation works > with error 1`] = `
 
 exports[`Form > joi validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -108,7 +108,7 @@ exports[`Form > joi validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -130,7 +130,7 @@ exports[`Form > renders with state correctly 1`] = `"<form id="v-0-0" class=""><
 
 exports[`Form > superstruct validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -143,7 +143,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -161,7 +161,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
 
 exports[`Form > superstruct validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -174,7 +174,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -192,7 +192,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
 
 exports[`Form > valibot validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -205,7 +205,7 @@ exports[`Form > valibot validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -223,7 +223,7 @@ exports[`Form > valibot validation works > with error 1`] = `
 
 exports[`Form > valibot validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -236,7 +236,7 @@ exports[`Form > valibot validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -254,7 +254,7 @@ exports[`Form > valibot validation works > without error 1`] = `
 
 exports[`Form > yup validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -267,7 +267,7 @@ exports[`Form > yup validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -285,7 +285,7 @@ exports[`Form > yup validation works > with error 1`] = `
 
 exports[`Form > yup validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -298,7 +298,7 @@ exports[`Form > yup validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -316,7 +316,7 @@ exports[`Form > yup validation works > without error 1`] = `
 
 exports[`Form > zod validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -329,7 +329,7 @@ exports[`Form > zod validation works > with error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -347,7 +347,7 @@ exports[`Form > zod validation works > with error 1`] = `
 
 exports[`Form > zod validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-slot="root" class="text-sm" id="emailField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="emailField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -360,7 +360,7 @@ exports[`Form > zod validation works > without error 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <div data-slot="root" class="text-sm" id="passwordField">
+  <div data-orientation="vertical" data-slot="root" class="text-sm" id="passwordField">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/FormField-vue.spec.ts.snap b/test/components/__snapshots__/FormField-vue.spec.ts.snap
index 26c94c2af7..345d79c993 100644
--- a/test/components/__snapshots__/FormField-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FormField-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FormField > renders with as correctly 1`] = `
-"<section data-slot="root" class="text-sm">
+"<section data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -13,7 +13,7 @@ exports[`FormField > renders with as correctly 1`] = `
 `;
 
 exports[`FormField > renders with class correctly 1`] = `
-"<div data-slot="root" class="text-sm relative">
+"<div data-orientation="vertical" data-slot="root" class="text-sm relative">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -25,7 +25,7 @@ exports[`FormField > renders with class correctly 1`] = `
 `;
 
 exports[`FormField > renders with default slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -37,7 +37,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with description slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <p id="v-0-0-description" data-slot="description" class="text-muted">Description slot</p>
@@ -49,7 +49,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with error correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -61,7 +61,7 @@ exports[`FormField > renders with error correctly 1`] = `
 `;
 
 exports[`FormField > renders with error slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -73,7 +73,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with help correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -85,7 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
 `;
 
 exports[`FormField > renders with help slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -97,7 +97,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with hint correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -109,7 +109,7 @@ exports[`FormField > renders with hint correctly 1`] = `
 `;
 
 exports[`FormField > renders with hint slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -121,7 +121,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with label and description correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -135,7 +135,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
 `;
 
 exports[`FormField > renders with label slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
       <!--v-if-->
@@ -177,7 +177,7 @@ exports[`FormField > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`FormField > renders with required correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
       <!--v-if-->
@@ -191,7 +191,7 @@ exports[`FormField > renders with required correctly 1`] = `
 `;
 
 exports[`FormField > renders with size lg correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -205,7 +205,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
 `;
 
 exports[`FormField > renders with size md correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -219,7 +219,7 @@ exports[`FormField > renders with size md correctly 1`] = `
 `;
 
 exports[`FormField > renders with size sm correctly 1`] = `
-"<div data-slot="root" class="text-xs">
+"<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -233,7 +233,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xl correctly 1`] = `
-"<div data-slot="root" class="text-base">
+"<div data-orientation="vertical" data-slot="root" class="text-base">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -247,7 +247,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xs correctly 1`] = `
-"<div data-slot="root" class="text-xs">
+"<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -261,7 +261,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
 `;
 
 exports[`FormField > renders with ui correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/FormField.spec.ts.snap b/test/components/__snapshots__/FormField.spec.ts.snap
index 26c94c2af7..345d79c993 100644
--- a/test/components/__snapshots__/FormField.spec.ts.snap
+++ b/test/components/__snapshots__/FormField.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FormField > renders with as correctly 1`] = `
-"<section data-slot="root" class="text-sm">
+"<section data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -13,7 +13,7 @@ exports[`FormField > renders with as correctly 1`] = `
 `;
 
 exports[`FormField > renders with class correctly 1`] = `
-"<div data-slot="root" class="text-sm relative">
+"<div data-orientation="vertical" data-slot="root" class="text-sm relative">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -25,7 +25,7 @@ exports[`FormField > renders with class correctly 1`] = `
 `;
 
 exports[`FormField > renders with default slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -37,7 +37,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with description slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <p id="v-0-0-description" data-slot="description" class="text-muted">Description slot</p>
@@ -49,7 +49,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with error correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -61,7 +61,7 @@ exports[`FormField > renders with error correctly 1`] = `
 `;
 
 exports[`FormField > renders with error slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -73,7 +73,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with help correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -85,7 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
 `;
 
 exports[`FormField > renders with help slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -97,7 +97,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with hint correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -109,7 +109,7 @@ exports[`FormField > renders with hint correctly 1`] = `
 `;
 
 exports[`FormField > renders with hint slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
@@ -121,7 +121,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 `;
 
 exports[`FormField > renders with label and description correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -135,7 +135,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
 `;
 
 exports[`FormField > renders with label slot correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
       <!--v-if-->
@@ -177,7 +177,7 @@ exports[`FormField > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`FormField > renders with required correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Username</label>
       <!--v-if-->
@@ -191,7 +191,7 @@ exports[`FormField > renders with required correctly 1`] = `
 `;
 
 exports[`FormField > renders with size lg correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -205,7 +205,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
 `;
 
 exports[`FormField > renders with size md correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -219,7 +219,7 @@ exports[`FormField > renders with size md correctly 1`] = `
 `;
 
 exports[`FormField > renders with size sm correctly 1`] = `
-"<div data-slot="root" class="text-xs">
+"<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -233,7 +233,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xl correctly 1`] = `
-"<div data-slot="root" class="text-base">
+"<div data-orientation="vertical" data-slot="root" class="text-base">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -247,7 +247,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
 `;
 
 exports[`FormField > renders with size xs correctly 1`] = `
-"<div data-slot="root" class="text-xs">
+"<div data-orientation="vertical" data-slot="root" class="text-xs">
   <div data-slot="wrapper" class="">
     <div data-slot="labelWrapper" class="flex content-center items-center justify-between gap-1"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Username</label>
       <!--v-if-->
@@ -261,7 +261,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
 `;
 
 exports[`FormField > renders with ui correctly 1`] = `
-"<div data-slot="root" class="text-sm">
+"<div data-orientation="vertical" data-slot="root" class="text-sm">
   <div data-slot="wrapper" class="">
     <!--v-if-->
     <!--v-if-->
diff --git a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
index a6d86ba55b..6e68354926 100644
--- a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavigationMenu > renders with arrow correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -54,7 +54,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with as correctly 1`] = `
-"<section data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<section data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -102,7 +102,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with chip correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">
@@ -130,7 +130,7 @@ exports[`NavigationMenu > renders with chip correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with class correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -178,7 +178,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -227,7 +227,7 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
 `;
 
 exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -275,7 +275,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with defaultValue correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -324,7 +324,7 @@ exports[`NavigationMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -372,7 +372,7 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -414,7 +414,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -462,7 +462,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -510,7 +510,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -552,7 +552,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with items correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -600,7 +600,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with labelKey correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -648,7 +648,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with modelValue correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -697,7 +697,7 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -745,7 +745,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -793,7 +793,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -841,7 +841,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -889,7 +889,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -937,7 +937,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1020,7 +1020,7 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
 `;
 
 exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
   <ul data-slot="list" class="isolate min-w-0">
     <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0">
       <div data-slot="label" class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
@@ -1065,7 +1065,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1113,7 +1113,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1161,7 +1161,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1209,7 +1209,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1257,7 +1257,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1305,7 +1305,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with ui correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1353,7 +1353,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1488,7 +1488,7 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with valueKey correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1571,7 +1571,7 @@ exports[`NavigationMenu > renders with valueKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index 5201ed4ad7..d7280272a8 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NavigationMenu > renders with arrow correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -54,7 +54,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with as correctly 1`] = `
-"<section data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<section data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -102,7 +102,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with chip correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">
@@ -130,7 +130,7 @@ exports[`NavigationMenu > renders with chip correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with class correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between w-48" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -178,7 +178,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -227,7 +227,7 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
 `;
 
 exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -275,7 +275,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with defaultValue correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -324,7 +324,7 @@ exports[`NavigationMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -372,7 +372,7 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -414,7 +414,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -462,7 +462,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -510,7 +510,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -552,7 +552,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with items correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -600,7 +600,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with labelKey correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -648,7 +648,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with modelValue correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -697,7 +697,7 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -745,7 +745,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -793,7 +793,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -841,7 +841,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -889,7 +889,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -937,7 +937,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1020,7 +1020,7 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
 `;
 
 exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
   <ul data-slot="list" class="isolate min-w-0">
     <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0">
       <div data-slot="label" class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
@@ -1065,7 +1065,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1113,7 +1113,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1161,7 +1161,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 `;
 
 exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1209,7 +1209,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1257,7 +1257,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 `;
 
 exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1305,7 +1305,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with ui correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1353,7 +1353,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1488,7 +1488,7 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders with valueKey correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
@@ -1571,7 +1571,7 @@ exports[`NavigationMenu > renders with valueKey correctly 1`] = `
 `;
 
 exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
-"<nav data-collapsed="false" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+"<nav data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">
     <ul data-slot="list" class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" data-slot="item" class="min-w-0 py-2"></li>
diff --git a/test/composables/useComponentProps.spec.ts b/test/composables/useComponentProps.spec.ts
new file mode 100644
index 0000000000..298fabe71b
--- /dev/null
+++ b/test/composables/useComponentProps.spec.ts
@@ -0,0 +1,40 @@
+import { describe, expectTypeOf, test } from 'vitest'
+import type * as ui from '#build/ui'
+import type { ThemeDefaults } from '../../src/runtime/composables/useComponentProps'
+
+/**
+ * Hand-maintained list of `#build/ui` exports that intentionally don't
+ * participate in `<UTheme :props>` overrides. Two reasons land here:
+ *
+ *   - `prose` is a namespace, not a single component (its children live
+ *     under `prose.<tag>` and are read via `useComponentProps('prose.p', …)`).
+ *   - The matching Vue file doesn't run `useComponentProps`, so a `:props`
+ *     entry would types-check but no-op at runtime. If a key stays here
+ *     long-term, consider migrating the component to `useComponentProps`
+ *     and removing it from this list.
+ */
+type NonProxyComponents
+  = | 'prose'
+    | 'link'
+    | 'editorEmojiMenu'
+    | 'editorMentionMenu'
+    | 'editorSuggestionMenu'
+
+type Expected = Exclude<keyof typeof ui, NonProxyComponents>
+
+// Drift catchers — surfaced at the type level so any new themable component
+// added to `#build/ui` without a `ThemeDefaults` entry (or vice versa) breaks
+// `vue-tsc --noEmit` in CI. The error message names the offending key
+// directly, e.g. `Type 'never' is not assignable to type '"button"'`.
+type MissingFromThemeDefaults = Exclude<Expected, keyof ThemeDefaults>
+type ExtraInThemeDefaults = Exclude<keyof ThemeDefaults, Expected>
+
+describe('ThemeDefaults registry', () => {
+  test('every themable `#build/ui` component has a ThemeDefaults entry', () => {
+    expectTypeOf<MissingFromThemeDefaults>().toBeNever()
+  })
+
+  test('ThemeDefaults declares no entries beyond the `#build/ui` registry', () => {
+    expectTypeOf<ExtraInThemeDefaults>().toBeNever()
+  })
+})
diff --git a/test/composables/useResolvedVariants.spec.ts b/test/composables/useResolvedVariants.spec.ts
deleted file mode 100644
index c3228fc936..0000000000
--- a/test/composables/useResolvedVariants.spec.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { defineComponent, reactive, nextTick } from 'vue'
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { useResolvedVariants } from '../../src/runtime/composables/useResolvedVariants'
-import { useAppConfig } from '#imports'
-
-const theme = {
-  defaultVariants: {
-    variant: 'list',
-    size: 'md'
-  }
-}
-
-describe('useResolvedVariants', () => {
-  it('returns prop value when provided', async () => {
-    let variant: any
-
-    const component = defineComponent({
-      setup() {
-        const props = reactive({ variant: 'card' })
-        ;({ variant } = useResolvedVariants('radioGroup', props, theme, ['variant']))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(variant.value).toBe('card')
-  })
-
-  it('falls back to appConfig defaultVariants over theme when prop is undefined', async () => {
-    let variant: any
-
-    const component = defineComponent({
-      setup() {
-        const appConfig = useAppConfig() as any
-        appConfig.ui = { ...appConfig.ui, _testAppConfig: { defaultVariants: { variant: 'card' } } }
-
-        const props = reactive({ variant: undefined as string | undefined })
-        ;({ variant } = useResolvedVariants('_testAppConfig', props, theme, ['variant']))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(variant.value).toBe('card')
-  })
-
-  it('falls back to theme defaultVariants when prop and appConfig are undefined', async () => {
-    let variant: any
-
-    const component = defineComponent({
-      setup() {
-        const props = reactive({ variant: undefined as string | undefined })
-        ;({ variant } = useResolvedVariants('radioGroup', props, theme, ['variant']))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(variant.value).toBe('list')
-  })
-
-  it('prop takes precedence over appConfig defaultVariants', async () => {
-    let variant: any
-
-    const component = defineComponent({
-      setup() {
-        const appConfig = useAppConfig() as any
-        appConfig.ui = { ...appConfig.ui, _testPropPrecedence: { defaultVariants: { variant: 'table' } } }
-
-        const props = reactive({ variant: 'card' })
-        ;({ variant } = useResolvedVariants('_testPropPrecedence', props, theme, ['variant']))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(variant.value).toBe('card')
-  })
-
-  it('is reactive to prop changes', async () => {
-    let variant: any
-    const props = reactive({ variant: 'card' as string | undefined })
-
-    const component = defineComponent({
-      setup() {
-        ;({ variant } = useResolvedVariants('radioGroup', props, theme, ['variant']))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(variant.value).toBe('card')
-
-    props.variant = undefined
-    await nextTick()
-    expect(variant.value).toBe('list')
-
-    props.variant = 'card'
-    await nextTick()
-    expect(variant.value).toBe('card')
-  })
-
-  it('resolves multiple variants at once', async () => {
-    let variant: any, size: any
-
-    const component = defineComponent({
-      setup() {
-        const props = reactive({ variant: 'card', size: undefined as string | undefined })
-        ;({ variant, size } = useResolvedVariants('radioGroup', props, theme, ['variant', 'size']))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(variant.value).toBe('card')
-    expect(size.value).toBe('md')
-  })
-
-  it('supports overrides for nested prop paths', async () => {
-    let position: any
-    const selectTheme = { defaultVariants: { position: 'popper' } }
-
-    const component = defineComponent({
-      setup() {
-        const props = reactive({ content: { position: 'item-aligned' } })
-        ;({ position } = useResolvedVariants('select', props, selectTheme, ['position'], {
-          position: () => props.content?.position
-        }))
-        return () => null
-      }
-    })
-
-    await mountSuspended(component)
-    expect(position.value).toBe('item-aligned')
-  })
-})