@nuxt/ui 4.4.0 → 4.5.1

package/.nuxt/ui.css

@@ -147,8 +147,10 @@
   --divide-color-bg: var(--ui-bg);
   --outline-color-default: var(--ui-border);
   --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-bg: var(--ui-bg);
   --stroke-default: var(--ui-border);
   --stroke-inverted: var(--ui-border-inverted);
+  --fill-bg: var(--ui-bg);
   --fill-default: var(--ui-border);
   --fill-inverted: var(--ui-border-inverted);
 }

package/README.md

@@ -1,7 +1,7 @@
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
   <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
-  <img alt="Nuxt UI" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+  <img alt="Nuxt UI" width="830" height="436" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
 </picture>
 
 # Nuxt UI
@@ -125,6 +125,9 @@ Thank you for considering contributing to Nuxt UI. Here are a few ways you can g
 - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
 - Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
+> [!TIP]
+> We provide a [contributing skill](https://github.com/nuxt/ui/tree/v4/.claude/skills/contributing) for AI assistants to help you contribute to Nuxt UI. It will automatically guide you through component structure, theming patterns, testing conventions, and documentation guidelines when working in this repository.
+
 ## Local Development
 
 Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute.

package/cli/package.json

@@ -5,7 +5,7 @@
     ".": "./index.mjs"
   },
   "dependencies": {
-    "citty": "^0.2.0",
+    "citty": "^0.2.1",
     "consola": "^3.4.2",
     "pathe": "^2.0.3",
     "scule": "^1.3.0"

package/cli/templates.mjs

@@ -26,6 +26,7 @@ const component = ({ name, primitive, prose, content }) => {
     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'
@@ -43,7 +44,7 @@ export interface ${upperName}Props {
 }
 
 export interface ${upperName}Slots {
-  default(props?: {}): any
+  default?(props?: {}): VNode[]
 }
 </script>
 
@@ -144,23 +145,19 @@ import { describe, it, expect } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import ${upperName} from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
-import type { ${upperName}Props, ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
-import ComponentRender from '../${content ? '../' : ''}component-render'
+import { renderEach } from '../${content ? '../' : ''}component-render'
 
 describe('${upperName}', () => {
   const props = {}
 
-  it.each([
+  renderEach(${upperName}, [
     // Props
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: '' } }],
     ['with ui', { props: { ui: {} } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
-    const html = await ComponentRender(nameOrHtml, options, ${upperName})
-    expect(html).toMatchSnapshot()
-  })
+  ])
 
   it('passes accessibility tests', async () => {
     const wrapper = await mountSuspended(${upperName}, {

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.4.0",
+  "version": "4.5.1",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, b as addTemplates } from './shared/ui.Ddb3hKxo.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, b as addTemplates } from './shared/ui.DI_ypO2T.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.4.0";
+const version = "4.5.1";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -49,7 +49,7 @@ const module$1 = defineNuxtModule({
       }
     }
     await registerModule("@nuxt/icon", "icon", {
-      cssLayer: "components"
+      cssLayer: "base"
     });
     if (options.fonts) {
       await registerModule("@nuxt/fonts", "fonts", {

package/dist/runtime/components/Accordion.d.vue.ts

@@ -1,4 +1,5 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/accordion';
 import type { IconProps } from '../types';
@@ -57,17 +58,17 @@ type SlotProps<T extends AccordionItem> = (props: {
     index: number;
     open: boolean;
     ui: Accordion['ui'];
-}) => any;
+}) => VNode[];
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
-    leading: SlotProps<T>;
-    default(props: {
+    default?(props: {
         item: T;
         index: number;
         open: boolean;
-    }): any;
-    trailing: SlotProps<T>;
-    content: SlotProps<T>;
-    body: SlotProps<T>;
+    }): VNode[];
+    leading?: SlotProps<T>;
+    trailing?: SlotProps<T>;
+    content?: SlotProps<T>;
+    body?: SlotProps<T>;
 } & DynamicSlots<T, 'body', {
     index: number;
     open: boolean;

package/dist/runtime/components/Accordion.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -17,7 +18,7 @@ const props = defineProps({
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   collapsible: { type: Boolean, required: false, default: true },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -28,6 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("accordion", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} })({
   disabled: props.disabled
@@ -35,7 +37,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -43,27 +45,27 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
       :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
     >
-      <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 })">
+      <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 })">
           <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: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</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: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [uiProp?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
-          <div data-slot="body" :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
+          <div data-slot="body" :class="ui.body({ class: [uiProp?.body, item.ui?.body] })">
             <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>

package/dist/runtime/components/Accordion.vue.d.ts

@@ -1,4 +1,5 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/accordion';
 import type { IconProps } from '../types';
@@ -57,17 +58,17 @@ type SlotProps<T extends AccordionItem> = (props: {
     index: number;
     open: boolean;
     ui: Accordion['ui'];
-}) => any;
+}) => VNode[];
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
-    leading: SlotProps<T>;
-    default(props: {
+    default?(props: {
         item: T;
         index: number;
         open: boolean;
-    }): any;
-    trailing: SlotProps<T>;
-    content: SlotProps<T>;
-    body: SlotProps<T>;
+    }): VNode[];
+    leading?: SlotProps<T>;
+    trailing?: SlotProps<T>;
+    content?: SlotProps<T>;
+    body?: SlotProps<T>;
 } & DynamicSlots<T, 'body', {
     index: number;
     open: boolean;

package/dist/runtime/components/Alert.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/alert';
 import type { AvatarProps, ButtonProps, IconProps, LinkPropsKeys } from '../types';
@@ -56,15 +57,15 @@ export interface AlertEmits {
     'update:open': [value: boolean];
 }
 export interface AlertSlots {
-    leading(props: {
+    leading?(props: {
         ui: Alert['ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         ui: Alert['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Alert.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/alert";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -24,12 +25,13 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("alert", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} })({
   color: props.color,
   variant: props.variant,
@@ -39,32 +41,32 @@ 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: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <UAvatar v-if="avatar" :size="uiProp?.avatarSize || ui.avatarSize()" 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 })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+    <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 })">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
         <slot name="description">
           {{ description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
         <slot name="actions">
           <UButton v-for="(action, index) in 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: props.ui?.actions, orientation: 'horizontal' })">
+    <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)">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
@@ -80,7 +82,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
           :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : {}"
           data-slot="close"
-          :class="ui.close({ class: props.ui?.close })"
+          :class="ui.close({ class: uiProp?.close })"
           @click="emits('update:open', false)"
         />
       </slot>

package/dist/runtime/components/Alert.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/alert';
 import type { AvatarProps, ButtonProps, IconProps, LinkPropsKeys } from '../types';
@@ -56,15 +57,15 @@ export interface AlertEmits {
     'update:open': [value: boolean];
 }
 export interface AlertSlots {
-    leading(props: {
+    leading?(props: {
         ui: Alert['ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         ui: Alert['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/App.d.vue.ts

@@ -1,4 +1,5 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { ToasterProps } from '../types';
 import type { Locale, Messages } from '../types/locale';
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
@@ -8,7 +9,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/App.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { ToasterProps } from '../types';
 import type { Locale, Messages } from '../types/locale';
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
@@ -8,7 +9,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/AuthForm.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
 import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps, LinkPropsKeys } from '../types';
@@ -76,21 +77,21 @@ export type AuthFormEmits<T extends object> = {
 type DynamicFieldSlots<T, F, SlotProps = {
     field: F;
     state: T;
-}> = Record<string, (props: SlotProps) => any> & Record<`${keyof T extends string ? keyof T : never}-field`, (props: SlotProps) => any>;
-type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
+}> = Record<`${keyof T extends string ? keyof T : never}-field` | (string & {}), (props: SlotProps) => VNode[]>;
+type DynamicFormFieldSlots<T> = Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}` | (string & {}), (props?: {}) => VNode[]>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
-    header(props?: {}): any;
-    leading(props: {
+    header?(props?: {}): VNode[];
+    leading?(props: {
         ui: AuthForm['ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    providers(props?: {}): any;
-    validation(props?: {}): any;
-    submit(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    providers?(props?: {}): VNode[];
+    validation?(props?: {}): VNode[];
+    submit?(props: {
         loading: boolean;
-    }): any;
-    footer(props?: {}): any;
+    }): VNode[];
+    footer?(props?: {}): VNode[];
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/AuthForm.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/auth-form";
 import { reactive, ref, computed, useTemplateRef } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, pick } from "../utils";
 import { tv } from "../utils/tv";
@@ -37,7 +38,7 @@ const props = defineProps({
   loadingAuto: { type: Boolean, required: false },
   class: { type: null, required: false },
   onSubmit: { type: Function, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const state = reactive((props.fields || []).reduce((acc, field) => {
   if (field.name) {
@@ -49,6 +50,7 @@ defineEmits(["submit"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("authForm", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.authForm || {} })());
 const formRef = useTemplateRef("formRef");
 const passwordVisibility = ref(false);
@@ -77,22 +79,22 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="icon || !!slots.leading || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <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 })">
       <slot name="header">
-        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -100,8 +102,8 @@ defineExpose({
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
-      <div v-if="providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: props.ui?.providers })">
+    <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 })">
         <slot name="providers">
           <UButton
             v-for="(provider, index) in providers"
@@ -118,7 +120,7 @@ defineExpose({
         v-if="providers?.length && fields?.length"
         v-bind="typeof separator === 'object' ? separator : { label: separator }"
         data-slot="separator"
-        :class="ui.separator({ class: props.ui?.separator })"
+        :class="ui.separator({ class: uiProp?.separator })"
       />
 
       <UForm
@@ -131,7 +133,7 @@ defineExpose({
         :disabled="disabled"
         :loading-auto="loadingAuto"
         data-slot="form"
-        :class="ui.form({ class: props.ui?.form })"
+        :class="ui.form({ class: uiProp?.form })"
         v-bind="$attrs"
         @submit="onSubmit"
       >
@@ -145,14 +147,14 @@ defineExpose({
               v-if="field.type === 'checkbox'"
               v-model="state[field.name]"
               data-slot="checkbox"
-              :class="ui.checkbox({ class: props.ui?.checkbox })"
+              :class="ui.checkbox({ class: uiProp?.checkbox })"
               v-bind="omitFieldProps(field)"
             />
             <USelectMenu
               v-else-if="field.type === 'select'"
               v-model="state[field.name]"
               data-slot="select"
-              :class="ui.select({ class: props.ui?.select })"
+              :class="ui.select({ class: uiProp?.select })"
               v-bind="omitFieldProps(field)"
             />
             <UPinInput
@@ -160,7 +162,7 @@ defineExpose({
               :id="field.name"
               v-model="state[field.name]"
               data-slot="otp"
-              :class="ui.otp({ class: props.ui?.otp })"
+              :class="ui.otp({ class: uiProp?.otp })"
               v-bind="Object.assign({}, omitFieldProps(field), typeof field.otp === 'object' ? field.otp : {})"
               otp
             />
@@ -169,7 +171,7 @@ defineExpose({
               ref="passwordRef"
               v-model="state[field.name]"
               data-slot="password"
-              :class="ui.password({ class: props.ui?.password })"
+              :class="ui.password({ class: uiProp?.password })"
               v-bind="omitFieldProps(field)"
               :type="passwordVisibility ? 'text' : 'password'"
             >
@@ -190,7 +192,7 @@ defineExpose({
               v-else
               v-model="state[field.name]"
               data-slot="input"
-              :class="ui.input({ class: props.ui?.input })"
+              :class="ui.input({ class: uiProp?.input })"
               v-bind="omitFieldProps(field)"
             />
           </slot>
@@ -227,7 +229,7 @@ defineExpose({
       </UForm>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

package/dist/runtime/components/AuthForm.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
 import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps, LinkPropsKeys } from '../types';
@@ -76,21 +77,21 @@ export type AuthFormEmits<T extends object> = {
 type DynamicFieldSlots<T, F, SlotProps = {
     field: F;
     state: T;
-}> = Record<string, (props: SlotProps) => any> & Record<`${keyof T extends string ? keyof T : never}-field`, (props: SlotProps) => any>;
-type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
+}> = Record<`${keyof T extends string ? keyof T : never}-field` | (string & {}), (props: SlotProps) => VNode[]>;
+type DynamicFormFieldSlots<T> = Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}` | (string & {}), (props?: {}) => VNode[]>;
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
-    header(props?: {}): any;
-    leading(props: {
+    header?(props?: {}): VNode[];
+    leading?(props: {
         ui: AuthForm['ui'];
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    providers(props?: {}): any;
-    validation(props?: {}): any;
-    submit(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    providers?(props?: {}): VNode[];
+    validation?(props?: {}): VNode[];
+    submit?(props: {
         loading: boolean;
-    }): any;
-    footer(props?: {}): any;
+    }): VNode[];
+    footer?(props?: {}): VNode[];
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
 declare const _default: typeof __VLS_export;
 export default _default;