@nuxt/ui 4.4.0 → 4.5.1

package/dist/runtime/components/prose/Collapsible.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/collapsible';
 import type { IconProps, CollapsibleProps } from '../../types';
@@ -28,7 +29,7 @@ export interface ProseCollapsibleProps {
     ui?: ProseCollapsible['slots'] & CollapsibleProps['ui'];
 }
 export interface ProseCollapsibleSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Em.d.vue.ts

@@ -1,8 +1,12 @@
+import type { VNode } from 'vue';
 export interface ProseEmProps {
     class?: string;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseEmSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Em.vue

@@ -5,15 +5,18 @@ import theme from "#build/ui/prose/em";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
-  class: { type: String, required: false }
+  class: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.em", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.em || {} }));
 </script>
 
 <template>
-  <em :class="ui({ class: props.class })"><slot /></em>
+  <em :class="ui({ class: [uiProp?.base, props.class] })"><slot /></em>
 </template>

package/dist/runtime/components/prose/Em.vue.d.ts

@@ -1,8 +1,12 @@
+import type { VNode } from 'vue';
 export interface ProseEmProps {
     class?: string;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseEmSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Field.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/field';
@@ -28,7 +29,7 @@ export interface ProseFieldProps {
     ui?: ProseField['slots'];
 }
 export interface ProseFieldSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Field.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/prose/field";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,32 +15,33 @@ const props = defineProps({
   description: { type: String, required: false },
   required: { type: Boolean, 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("prose.field", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.field || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <span v-if="name" :class="ui.name({ class: props.ui?.name })">
+  <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 }}
       </span>
 
-      <div v-if="type || required" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <span v-if="type" :class="ui.type({ class: props.ui?.type })">
+      <div v-if="type || required" :class="ui.wrapper({ class: uiProp?.wrapper })">
+        <span v-if="type" :class="ui.type({ class: uiProp?.type })">
           {{ type }}
         </span>
 
-        <span v-if="required" :class="ui.required({ class: props.ui?.required })">
+        <span v-if="required" :class="ui.required({ class: uiProp?.required })">
           required
         </span>
       </div>
     </div>
 
-    <div v-if="!!slots.default || description" :class="ui.description({ class: props.ui?.description })">
+    <div v-if="!!slots.default || description" :class="ui.description({ class: uiProp?.description })">
       <slot mdc-unwrap="p">
         {{ description }}
       </slot>

package/dist/runtime/components/prose/Field.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/field';
@@ -28,7 +29,7 @@ export interface ProseFieldProps {
     ui?: ProseField['slots'];
 }
 export interface ProseFieldSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/FieldGroup.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface ProseFieldGroupProps {
     /**
      * The element or component this component should render as.
@@ -5,9 +6,12 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/FieldGroup.vue

@@ -6,18 +6,21 @@ import theme from "#build/ui/prose/field-group";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.fieldGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.fieldGroup || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/prose/FieldGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface ProseFieldGroupProps {
     /**
      * The element or component this component should render as.
@@ -5,9 +6,12 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H1.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/h1';
@@ -8,7 +9,7 @@ export interface ProseH1Props {
     ui?: ProseH1['slots'];
 }
 export interface ProseH1Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H1.vue

@@ -5,22 +5,24 @@ import theme from "#build/ui/prose/h1";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h1", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h1 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h1);
 </script>
 
 <template>
-  <h1 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+  <h1 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
       <slot />
     </a>
     <slot v-else />

package/dist/runtime/components/prose/H1.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/h1';
@@ -8,7 +9,7 @@ export interface ProseH1Props {
     ui?: ProseH1['slots'];
 }
 export interface ProseH1Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H2.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/h2';
 import type { ComponentConfig } from '../../types/tv';
@@ -8,7 +9,7 @@ export interface ProseH2Props {
     ui?: ProseH2['slots'];
 }
 export interface ProseH2Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H2.vue

@@ -5,25 +5,27 @@ import theme from "#build/ui/prose/h2";
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h2", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h2 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h2);
 </script>
 
 <template>
-  <h2 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${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 })" />
+  <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 })" />
       </span>
 
       <slot />

package/dist/runtime/components/prose/H2.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/h2';
 import type { ComponentConfig } from '../../types/tv';
@@ -8,7 +9,7 @@ export interface ProseH2Props {
     ui?: ProseH2['slots'];
 }
 export interface ProseH2Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H3.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/h3';
 import type { ComponentConfig } from '../../types/tv';
@@ -8,7 +9,7 @@ export interface ProseH3Props {
     ui?: ProseH3['slots'];
 }
 export interface ProseH3Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H3.vue

@@ -5,25 +5,27 @@ import theme from "#build/ui/prose/h3";
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h3", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h3 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h3);
 </script>
 
 <template>
-  <h3 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${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 })" />
+  <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 })" />
       </span>
 
       <slot />

package/dist/runtime/components/prose/H3.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/h3';
 import type { ComponentConfig } from '../../types/tv';
@@ -8,7 +9,7 @@ export interface ProseH3Props {
     ui?: ProseH3['slots'];
 }
 export interface ProseH3Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H4.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/h4';
@@ -8,7 +9,7 @@ export interface ProseH4Props {
     ui?: ProseH4['slots'];
 }
 export interface ProseH4Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/H4.vue

@@ -5,22 +5,24 @@ import theme from "#build/ui/prose/h4";
 <script setup>
 import { computed } from "vue";
 import { useRuntimeConfig, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h4", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.h4 || {} })());
 const generate = computed(() => props.id && typeof headings?.anchorLinks === "object" && headings.anchorLinks.h4);
 </script>
 
 <template>
-  <h4 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+  <h4 :id="id" :class="ui.base({ class: [uiProp?.base, props.class] })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: uiProp?.link })">
       <slot />
     </a>
     <slot v-else />

package/dist/runtime/components/prose/H4.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig } from '../../types/tv';
 import theme from '#build/ui/prose/h4';
@@ -8,7 +9,7 @@ export interface ProseH4Props {
     ui?: ProseH4['slots'];
 }
 export interface ProseH4Slots {
-    default(props?: {}): any;
+    default(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Hr.d.vue.ts

@@ -1,5 +1,8 @@
 export interface ProseHrProps {
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Hr.vue

@@ -5,14 +5,17 @@ import theme from "#build/ui/prose/hr";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.hr", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.hr || {} }));
 </script>
 
 <template>
-  <hr :class="ui({ class: props.class })">
+  <hr :class="ui({ class: [uiProp?.base, props.class] })">
 </template>

package/dist/runtime/components/prose/Hr.vue.d.ts

@@ -1,5 +1,8 @@
 export interface ProseHrProps {
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Icon.d.vue.ts

@@ -1,6 +1,9 @@
 export interface ProseIconProps {
     name: string;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Icon.vue

@@ -5,16 +5,19 @@ import theme from "#build/ui/prose/icon";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UIcon from "../Icon.vue";
 const props = defineProps({
   name: { type: String, required: true },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.icon", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.icon || {} }));
 </script>
 
 <template>
-  <UIcon :name="name" :class="ui({ class: props.class })" />
+  <UIcon :name="name" :class="ui({ class: [uiProp?.base, props.class] })" />
 </template>

package/dist/runtime/components/prose/Icon.vue.d.ts

@@ -1,6 +1,9 @@
 export interface ProseIconProps {
     name: string;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Img.vue

@@ -4,12 +4,13 @@ import theme from "#build/ui/prose/img";
 
 <script setup>
 import { ref, computed, useId } from "vue";
-import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo";
 import { DialogRoot, DialogPortal, DialogTrigger } from "reka-ui";
 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 { resolveBaseURL } from "../../utils";
 import { tv } from "../../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -19,9 +20,10 @@ const props = defineProps({
   height: { type: [String, Number], required: false },
   class: { type: null, required: false },
   zoom: { type: Boolean, required: false, default: true },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.img", props);
 const [DefineImageTemplate, ReuseImageTemplate] = createReusableTemplate();
 const [DefineZoomedImageTemplate, ReuseZoomedImageTemplate] = createReusableTemplate();
 const open = ref(false);
@@ -29,15 +31,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.img ||
   zoom: props.zoom,
   open: open.value
 }));
-const refinedSrc = computed(() => {
-  if (props.src?.startsWith("/") && !props.src.startsWith("//")) {
-    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
-    if (_base !== "/" && !props.src.startsWith(_base)) {
-      return joinURL(_base, props.src);
-    }
-  }
-  return props.src;
-});
+const refinedSrc = computed(() => resolveBaseURL(props.src, useRuntimeConfig().app.baseURL));
 const layoutId = computed(() => `${refinedSrc.value}::${useId()}`);
 if (props.zoom) {
   useEventListener(window, "scroll", () => {
@@ -55,7 +49,7 @@ if (props.zoom) {
       :width="width"
       :height="height"
       v-bind="$attrs"
-      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :class="ui.base({ class: [uiProp?.base, props.class] })"
     />
   </DefineImageTemplate>
 
@@ -65,7 +59,7 @@ if (props.zoom) {
       :src="refinedSrc"
       :alt="alt"
       v-bind="$attrs"
-      :class="ui.zoomedImage({ class: [props.ui?.zoomedImage] })"
+      :class="ui.zoomedImage({ class: [uiProp?.zoomedImage] })"
     />
   </DefineZoomedImageTemplate>
 
@@ -78,9 +72,9 @@ if (props.zoom) {
 
     <DialogPortal>
       <AnimatePresence>
-        <Motion v-if="open" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :class="ui.overlay({ class: [props.ui?.overlay] })" />
+        <Motion v-if="open" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :class="ui.overlay({ class: [uiProp?.overlay] })" />
 
-        <div v-if="open" :class="ui.content({ class: [props.ui?.content] })" @click="close">
+        <div v-if="open" :class="ui.content({ class: [uiProp?.content] })" @click="close">
           <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
             <ReuseZoomedImageTemplate />
           </Motion>

package/dist/runtime/components/prose/Kbd.d.vue.ts

@@ -1,6 +1,9 @@
 export interface ProseKbdProps {
     value: string;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Kbd.vue

@@ -5,16 +5,19 @@ import theme from "#build/ui/prose/kbd";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import UKbd from "../Kbd.vue";
 const props = defineProps({
   value: { type: String, required: true },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.kbd", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.kbd || {} }));
 </script>
 
 <template>
-  <UKbd :value="value" :class="ui({ class: props.class })" />
+  <UKbd :value="value" :class="ui({ class: [uiProp?.base, props.class] })" />
 </template>