@nuxt/ui 4.4.0 → 4.5.0

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/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "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.BrgdrRzy.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.0";
 
 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.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/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/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/Avatar.vue

@@ -8,6 +8,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 { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -23,7 +24,7 @@ const props = defineProps({
   chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const as = computed(() => {
   if (typeof props.as === "string" || typeof props.as?.render === "function") {
@@ -33,6 +34,7 @@ const as = computed(() => {
 });
 const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2));
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("avatar", props);
 const { size } = useAvatarGroup(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} })({
   size: size.value
@@ -65,7 +67,7 @@ function onError() {
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :style="props.style"
   >
     <component
@@ -77,14 +79,14 @@ function onError() {
       :height="sizePx"
       v-bind="$attrs"
       data-slot="image"
-      :class="ui.image({ class: props.ui?.image })"
+      :class="ui.image({ class: uiProp?.image })"
       @error="onError"
     />
 
     <Slot v-else v-bind="$attrs">
       <slot>
-        <UIcon v-if="icon" :name="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 || "\xA0" }}</span>
+        <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 || "\xA0" }}</span>
       </slot>
     </Slot>
   </component>

package/dist/runtime/components/AvatarGroup.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/avatar-group";
 import { computed, provide } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UAvatar from "./Avatar.vue";
@@ -14,10 +15,11 @@ const props = defineProps({
   size: { type: null, required: false },
   max: { type: [Number, String], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("avatarGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} })({
   size: props.size
 }));
@@ -58,8 +60,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="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 :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>
 </template>

package/dist/runtime/components/Badge.vue

@@ -8,6 +8,7 @@ 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 { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -19,7 +20,7 @@ const props = defineProps({
   size: { type: null, required: false },
   square: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -29,6 +30,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("badge", props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} })({
@@ -41,20 +43,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} }
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+  <Primitive :as="as" data-slot="base" :class="ui.base({ class: [uiProp?.base, props.class] })">
     <slot name="leading" :ui="ui">
-      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-      <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      <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()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
     </slot>
 
     <slot :ui="ui">
-      <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+      <span v-if="label !== void 0 && label !== null" data-slot="label" :class="ui.label({ class: uiProp?.label })">
         {{ label }}
       </span>
     </slot>
 
     <slot name="trailing" :ui="ui">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Banner.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/banner";
 import { computed, ref, onMounted, useId } from "vue";
 import { Primitive } from "reka-ui";
 import { useHead, useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";
@@ -25,12 +26,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 slots = defineSlots();
 const emits = defineEmits(["close"]);
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("banner", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.banner || {} })({
   color: props.color,
   to: !!props.to
@@ -89,7 +91,7 @@ function onClose() {
     class="banner"
     :data-banner-id="id"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
   >
     <ULink
       v-if="to"
@@ -102,28 +104,28 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </ULink>
 
-    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
-      <div data-slot="left" :class="ui.left({ class: props.ui?.left })" />
+    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
+      <div data-slot="left" :class="ui.left({ class: uiProp?.left })" />
 
-      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
         <slot name="leading" :ui="ui">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
         </slot>
 
-        <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="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="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" color="neutral" size="xs" v-bind="action" />
           </slot>
         </div>
       </div>
 
-      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
+      <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
         <slot name="close" :ui="ui">
           <UButton
             v-if="close"
@@ -134,7 +136,7 @@ function onClose() {
             :aria-label="t('banner.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="ui.close({ class: props.ui?.close })"
+            :class="ui.close({ class: uiProp?.close })"
             @click="onClose"
           />
         </slot>

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

@@ -1,6 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/blog-post';
 import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type BlogPost = ComponentConfig<typeof theme, AppConfig, 'blogPost'>;
 export interface BlogPostProps {
@@ -22,7 +23,7 @@ export interface BlogPostProps {
     /** The authors of the blog post. */
     authors?: UserProps[];
     /** The image of the blog post. Can be a string or an object. */
-    image?: string | (Partial<HTMLImageElement> & {
+    image?: string | (Partial<ImgHTMLAttributes> & {
         [key: string]: any;
     });
     /**
@@ -57,8 +58,8 @@ export interface BlogPostSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
-    as: any;
     orientation: BlogPost["variants"]["orientation"];
+    as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {