From e88852260c2468b0379698a6147fa77f4aa1a0cd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 10 Oct 2025 16:24:22 +0200
Subject: [PATCH 1/3] feat(components): expose `ui` in slot props where used

---
 src/runtime/components/Accordion.vue          | 14 +++---
 src/runtime/components/Alert.vue              |  6 +--
 src/runtime/components/AuthForm.vue           |  4 +-
 src/runtime/components/Badge.vue              |  8 ++--
 src/runtime/components/Banner.vue             |  6 +--
 src/runtime/components/Breadcrumb.vue         | 12 ++---
 src/runtime/components/Button.vue             |  8 ++--
 src/runtime/components/ChatMessage.vue        |  4 +-
 src/runtime/components/CommandPalette.vue     | 16 +++----
 src/runtime/components/ContextMenu.vue        |  4 +-
 src/runtime/components/ContextMenuContent.vue | 12 ++---
 src/runtime/components/DashboardNavbar.vue    | 12 ++---
 src/runtime/components/DashboardSidebar.vue   |  8 ++--
 src/runtime/components/DropdownMenu.vue       |  4 +-
 .../components/DropdownMenuContent.vue        | 12 ++---
 src/runtime/components/FileUpload.vue         | 12 ++---
 src/runtime/components/FooterColumns.vue      | 10 ++--
 src/runtime/components/Header.vue             |  4 +-
 src/runtime/components/Input.vue              |  8 ++--
 src/runtime/components/InputMenu.vue          | 46 ++++++++-----------
 src/runtime/components/InputTags.vue          | 14 +++---
 src/runtime/components/Modal.vue              |  4 +-
 src/runtime/components/NavigationMenu.vue     | 10 ++--
 src/runtime/components/PageAnchors.vue        | 10 ++--
 src/runtime/components/PageCard.vue           |  4 +-
 src/runtime/components/PageFeature.vue        |  4 +-
 src/runtime/components/PageLinks.vue          | 10 ++--
 src/runtime/components/PageSection.vue        |  4 +-
 src/runtime/components/Select.vue             | 37 ++++++---------
 src/runtime/components/SelectMenu.vue         | 37 ++++++---------
 src/runtime/components/Slideover.vue          |  4 +-
 src/runtime/components/Stepper.vue            |  4 +-
 src/runtime/components/Tabs.vue               | 16 +++----
 src/runtime/components/Textarea.vue           |  8 ++--
 src/runtime/components/Toast.vue              |  6 +--
 src/runtime/components/Tree.vue               | 12 +++--
 src/runtime/components/User.vue               |  4 +-
 .../components/content/ContentNavigation.vue  | 12 ++---
 .../components/content/ContentSurround.vue    | 10 ++--
 src/runtime/components/content/ContentToc.vue |  8 ++--
 src/runtime/types/tv.ts                       |  5 ++
 41 files changed, 205 insertions(+), 228 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 81f329a02f..70a6f0c9ef 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -53,15 +53,15 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
 
 export interface AccordionEmits extends AccordionRootEmits {}
 
-type SlotProps<T extends AccordionItem> = (props: { item: T, index: number, open: boolean }) => any
+type SlotProps<T extends AccordionItem> = (props: { item: T, index: number, open: boolean, ui: Accordion['ui'] }) => any
 
 export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
   leading: SlotProps<T>
-  default: SlotProps<T>
+  default(props: { item: T, index: number, open: boolean }): any
   trailing: SlotProps<T>
   content: SlotProps<T>
   body: SlotProps<T>
-} & DynamicSlots<T, 'body', { index: number, open: boolean }>
+} & DynamicSlots<T, 'body', { index: number, open: boolean, ui: Accordion['ui'] }>
 
 </script>
 
@@ -104,7 +104,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
     >
       <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
         <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
-          <slot name="leading" :item="item" :index="index" :open="open">
+          <slot name="leading" :item="item" :index="index" :open="open" :ui="ui">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
@@ -112,16 +112,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
           </span>
 
-          <slot name="trailing" :item="item" :index="index" :open="open">
+          <slot name="trailing" :item="item" :index="index" :open="open" :ui="ui">
             <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :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>])" :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">
+        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open" :ui="ui">
           <div :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">
+            <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>
           </div>
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index 1d9ab5c5c1..32fbb51fc6 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -61,11 +61,11 @@ export interface AlertEmits {
 }
 
 export interface AlertSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Alert['ui'] }): any
   title(props?: {}): any
   description(props?: {}): any
   actions(props?: {}): any
-  close(props: { ui: { [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string } }): any
+  close(props: { ui: Alert['ui'] }): any
 }
 </script>
 
@@ -98,7 +98,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 
 <template>
   <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot name="leading">
+    <slot name="leading" :ui="ui">
       <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index ae6d78f4cd..3e7967a0bd 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -96,7 +96,7 @@ type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${
 
 export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
   header(props?: {}): any
-  leading(props?: {}): any
+  leading(props: { ui: AuthForm['ui'] }): any
   title(props?: {}): any
   description(props?: {}): any
   providers(props?: {}): any
@@ -192,7 +192,7 @@ function omitFieldProps(field: F) {
     <div v-if="(icon || !!slots.icon) || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
+          <slot name="leading" :ui="ui">
             <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 6ee8a7a88e..66e789b41c 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -33,9 +33,9 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
 }
 
 export interface BadgeSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Badge['ui'] }): any
   default(props?: {}): any
-  trailing(props?: {}): any
+  trailing(props: { ui: Badge['ui'] }): any
 }
 </script>
 
@@ -69,7 +69,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
 
 <template>
   <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <slot name="leading">
+    <slot name="leading" :ui="ui">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
@@ -80,7 +80,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
       </span>
     </slot>
 
-    <slot name="trailing">
+    <slot name="trailing" :ui="ui">
       <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
diff --git a/src/runtime/components/Banner.vue b/src/runtime/components/Banner.vue
index ea89369361..6b68d05756 100644
--- a/src/runtime/components/Banner.vue
+++ b/src/runtime/components/Banner.vue
@@ -53,10 +53,10 @@ export interface BannerProps {
 }
 
 export interface BannerSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Banner['ui'] }): any
   title(props?: {}): any
   actions(props?: {}): any
-  close(props: { ui: any }): any
+  close(props: { ui: Banner['ui'] }): any
 }
 
 export interface BannerEmits {
@@ -135,7 +135,7 @@ function onClose() {
       <div :class="ui.left({ class: props.ui?.left })" />
 
       <div :class="ui.center({ class: props.ui?.center })">
-        <slot name="leading">
+        <slot name="leading" :ui="ui">
           <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index a6f9092577..c5fe4ba37a 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -43,7 +43,7 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
   ui?: Breadcrumb['slots']
 }
 
-type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
+type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean, ui: Breadcrumb['ui'] }) => any
 
 export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
   'item': SlotProps<T>
@@ -51,7 +51,7 @@ export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
   'separator': any
-} & DynamicSlots<T, 'leading' | 'label' | 'trailing', { index: number, active?: boolean }>
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', { index: number, active?: boolean, ui: Breadcrumb['ui'] }>
 
 </script>
 
@@ -90,19 +90,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
         <li :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="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
-              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
-                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
+              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index" :ui="ui">
+                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index" :ui="ui">
                   <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items!.length - 1 })" />
                   <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: index === 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>]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
-                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
+                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index" :ui="ui">
                     {{ get(item, props.labelKey as string) }}
                   </slot>
                 </span>
 
-                <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index" />
+                <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index" :ui="ui" />
               </slot>
             </ULinkBase>
           </ULink>
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index c0411ade3a..8dd1375f46 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -35,9 +35,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
 }
 
 export interface ButtonSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Button['ui'] }): any
   default(props?: {}): any
-  trailing(props?: {}): any
+  trailing(props: { ui: Button['ui'] }): any
 }
 </script>
 
@@ -132,7 +132,7 @@ const ui = computed(() => tv({
       })"
       @click="onClickWrapper"
     >
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })" />
         <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })" />
       </slot>
@@ -143,7 +143,7 @@ const ui = computed(() => tv({
         </span>
       </slot>
 
-      <slot name="trailing">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })" />
       </slot>
     </ULinkBase>
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 04f54cc44a..ac9522fc8f 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -48,7 +48,7 @@ export interface ChatMessageProps extends UIMessage {
 }
 
 export interface ChatMessageSlots {
-  leading(props: { avatar: ChatMessageProps['avatar'] }): any
+  leading(props: { avatar: ChatMessageProps['avatar'], ui: ChatMessage['ui'] }): any
   content(props: ChatMessageProps): any
   actions(props: { actions: ChatMessageProps['actions'] }): any
 }
@@ -85,7 +85,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
   <Primitive :as="as" :data-role="role" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <div v-if="icon || avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-        <slot name="leading" :avatar="avatar">
+        <slot name="leading" :avatar="avatar" :ui="ui">
           <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           <UAvatar v-else-if="avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 0a213df0a2..990245a04e 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -161,13 +161,13 @@ export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteIte
   'update:open': [value: boolean]
 }
 
-type SlotProps<T> = (props: { item: T, index: number }) => any
+type SlotProps<T> = (props: { item: T, index: number, ui: CommandPalette['ui'] }) => any
 
 export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
   'empty'(props: { searchTerm?: string }): any
-  'footer'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
-  'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
-  'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
+  'footer'(props: { ui: CommandPalette['ui'] }): any
+  'back'(props: { ui: CommandPalette['ui'] }): any
+  'close'(props: { ui: CommandPalette['ui'] }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
@@ -378,8 +378,8 @@ function onSelect(e: Event, item: T) {
     >
       <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
         <ULinkBase v-bind="slotProps" :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<G, T>)" :item="(item as any)" :index="index">
-            <slot :name="((item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
+          <slot :name="((item.slot || group?.slot || 'item') as keyof CommandPaletteSlots<G, 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<G, T>)" :item="(item as any)" :index="index" :ui="ui">
               <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
               <UIcon v-else-if="item.icon" :name="item.icon" :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" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
@@ -394,7 +394,7 @@ function onSelect(e: Event, item: T) {
             </slot>
 
             <span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]" :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<G, T>)" :item="(item as any)" :index="index">
+              <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
                 <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
                 <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
@@ -404,7 +404,7 @@ function onSelect(e: Event, item: T) {
             </span>
 
             <span :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<G, T>)" :item="(item as any)" :index="index">
+              <slot :name="((item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
                   :name="trailingIcon || appConfig.ui.icons.chevronRight"
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index 208e548dfd..28ba2b06a1 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -82,7 +82,7 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
 
 export interface ContextMenuEmits extends ContextMenuRootEmits {}
 
-type SlotProps<T extends ContextMenuItem> = (props: { item: T, active?: boolean, index: number }) => any
+type SlotProps<T extends ContextMenuItem> = (props: { item: T, active?: boolean, index: number, ui: ContextMenu['ui'] }) => any
 
 export type ContextMenuSlots<
   A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>,
@@ -95,7 +95,7 @@ export type ContextMenuSlots<
   'item-trailing': SlotProps<T>
   'content-top': (props?: {}) => any
   'content-bottom': (props?: {}) => any
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number, ui: ContextMenu['ui'] }>
 
 </script>
 
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 02bc4b1b44..9561490dad 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -26,7 +26,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
    */
   externalIcon?: boolean | IconProps['name']
   class?: any
-  ui: { [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string }
+  ui: ContextMenu['ui']
   uiOverride?: ContextMenu['slots']
 }
 
@@ -75,15 +75,15 @@ const groups = computed<ContextMenuItem[][]>(() =>
 
 <template>
   <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="((item.slot || 'item') as keyof ContextMenuSlots<T>)" :item="item" :index="index">
-      <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
+    <slot :name="((item.slot || 'item') as keyof ContextMenuSlots<T>)" :item="item" :index="index" :ui="ui">
+      <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
         <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>]" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
-        <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
           {{ get(item, props.labelKey as string) }}
         </slot>
 
@@ -91,7 +91,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
       </span>
 
       <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
-        <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
@@ -142,7 +142,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
                 v-bind="item.content"
               >
                 <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-                  <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" />
+                  <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" :ui="ui" />
                 </template>
               </UContextMenuContent>
             </ContextMenu.Sub>
diff --git a/src/runtime/components/DashboardNavbar.vue b/src/runtime/components/DashboardNavbar.vue
index f8109c2621..d38a3662f4 100644
--- a/src/runtime/components/DashboardNavbar.vue
+++ b/src/runtime/components/DashboardNavbar.vue
@@ -38,12 +38,12 @@ type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey'
 
 export interface DashboardNavbarSlots {
   title(props?: {}): any
-  leading(props: DashboardNavbarSlotsProps): any
-  trailing(props: DashboardNavbarSlotsProps): any
+  leading(props: DashboardNavbarSlotsProps & { ui: DashboardNavbar['ui'] }): any
+  trailing(props: DashboardNavbarSlotsProps & { ui: DashboardNavbar['ui'] }): any
   left(props: DashboardNavbarSlotsProps): any
   default(props: DashboardNavbarSlotsProps): any
   right(props: DashboardNavbarSlotsProps): any
-  toggle(props: DashboardNavbarSlotsProps): any
+  toggle(props: DashboardNavbarSlotsProps & { ui: DashboardNavbar['ui'] }): any
 }
 </script>
 
@@ -76,7 +76,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" v-bind="dashboardContext">
+    <slot name="toggle" v-bind="{ ...dashboardContext, ui }">
       <UDashboardSidebarToggle
         v-if="toggle"
         v-bind="(typeof toggle === 'object' ? toggle as Partial<ButtonProps> : {})"
@@ -91,7 +91,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
-        <slot name="leading" v-bind="dashboardContext">
+        <slot name="leading" v-bind="{ ...dashboardContext, ui }">
           <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
@@ -101,7 +101,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dashboardNav
           </slot>
         </h1>
 
-        <slot name="trailing" v-bind="dashboardContext" />
+        <slot name="trailing" v-bind="{ ...dashboardContext, ui }" />
       </slot>
     </div>
 
diff --git a/src/runtime/components/DashboardSidebar.vue b/src/runtime/components/DashboardSidebar.vue
index 6b01e9ad5e..cde0aa3aa9 100644
--- a/src/runtime/components/DashboardSidebar.vue
+++ b/src/runtime/components/DashboardSidebar.vue
@@ -39,9 +39,9 @@ export interface DashboardSidebarSlots {
   'header'(props: { collapsed?: boolean, collapse?: (value: boolean) => void }): any
   'default'(props: { collapsed?: boolean, collapse?: (value: boolean) => void }): any
   'footer'(props: { collapsed?: boolean, collapse?: (value: boolean) => void }): any
-  'toggle'(props: { open: boolean, toggle: () => void }): any
+  'toggle'(props: { open: boolean, toggle: () => void, ui: DashboardSidebar['ui'] }): any
   'content'(props?: {}): any
-  'resize-handle'(props: { onMouseDown: (e: MouseEvent) => void, onTouchStart: (e: TouchEvent) => void, onDoubleClick: (e: MouseEvent) => void }): any
+  'resize-handle'(props: { onMouseDown: (e: MouseEvent) => void, onTouchStart: (e: TouchEvent) => void, onDoubleClick: (e: MouseEvent) => void, ui: DashboardSidebar['ui'] }): any
 }
 </script>
 
@@ -135,7 +135,7 @@ function toggleOpen() {
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
+    <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UDashboardSidebarToggle
         v-if="toggle"
         v-bind="(typeof toggle === 'object' ? toggle as Partial<ButtonProps> : {})"
@@ -146,7 +146,7 @@ function toggleOpen() {
   </DefineToggleTemplate>
 
   <DefineResizeHandleTemplate>
-    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick" :ui="ui">
       <UDashboardResizeHandle
         v-if="resizable"
         :aria-controls="id"
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 5eb96481c1..d3e78b365e 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -90,7 +90,7 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
 
 export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
 
-type SlotProps<T extends DropdownMenuItem> = (props: { item: T, active?: boolean, index: number }) => any
+type SlotProps<T extends DropdownMenuItem> = (props: { item: T, active?: boolean, index: number, ui: DropdownMenu['ui'] }) => any
 
 export type DropdownMenuSlots<
   A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
@@ -103,7 +103,7 @@ export type DropdownMenuSlots<
   'item-trailing': SlotProps<T>
   'content-top': (props?: {}) => any
   'content-bottom': (props?: {}) => any
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number, ui: DropdownMenu['ui'] }>
 
 </script>
 
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index bfcbd56016..515ee13aca 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -27,7 +27,7 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
    */
   externalIcon?: boolean | IconProps['name']
   class?: any
-  ui: { [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string }
+  ui: DropdownMenu['ui']
   uiOverride?: DropdownMenu['slots']
 }
 
@@ -84,15 +84,15 @@ const groups = computed<DropdownMenuItem[][]>(() =>
 
 <template>
   <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :index="index">
-      <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
+    <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :index="index" :ui="ui">
+      <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index" :ui="ui">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
         <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuContentSlots<T>]" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
-        <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index" :ui="ui">
           {{ get(item, props.labelKey as string) }}
         </slot>
 
@@ -100,7 +100,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
       </span>
 
       <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
-        <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index" :ui="ui">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
@@ -153,7 +153,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
                 v-bind="item.content"
               >
                 <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-                  <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
+                  <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" :ui="ui" />
                 </template>
               </UDropdownMenuContent>
             </DropdownMenu.Sub>
diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index 17b9a8b3f3..dc52185905 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -107,7 +107,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     open: UseFileDialogReturn['open']
     removeFile: (index?: number) => void
   }): any
-  'leading'(props?: {}): any
+  'leading'(props: { ui: FileUpload['ui'] }): any
   'label'(props?: {}): any
   'description'(props?: {}): any
   'actions'(props: { files?: FileUploadFiles<M>, open: UseFileDialogReturn['open'], removeFile: (index?: number) => void }): any
@@ -115,10 +115,10 @@ export interface FileUploadSlots<M extends boolean = false> {
   'files-top'(props: { files?: FileUploadFiles<M>, open: UseFileDialogReturn['open'], removeFile: (index?: number) => void }): any
   'files-bottom'(props: { files?: FileUploadFiles<M>, open: UseFileDialogReturn['open'], removeFile: (index?: number) => void }): any
   'file'(props: { file: File, index: number }): any
-  'file-leading'(props: { file: File, index: number }): any
+  'file-leading'(props: { file: File, index: number, ui: FileUpload['ui'] }): any
   'file-name'(props: { file: File, index: number }): any
   'file-size'(props: { file: File, index: number }): any
-  'file-trailing'(props: { file: File, index: number }): any
+  'file-trailing'(props: { file: File, index: number, ui: FileUpload['ui'] }): any
 }
 </script>
 
@@ -272,7 +272,7 @@ defineExpose({
         <slot name="files" :files="modelValue">
           <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
-              <slot name="file-leading" :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" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
               </slot>
 
@@ -290,7 +290,7 @@ defineExpose({
                 </span>
               </div>
 
-              <slot name="file-trailing" :file="file" :index="index">
+              <slot name="file-trailing" :file="file" :index="index" :ui="ui">
                 <UButton
                   color="neutral"
                   v-bind="{
@@ -335,7 +335,7 @@ defineExpose({
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
         <div v-if="position === 'inside' ? (multiple ? !(modelValue as File[])?.length : !modelValue) : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <slot name="leading">
+          <slot name="leading" :ui="ui">
             <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" :class="ui.icon({ class: props.ui?.icon })" />
             <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" :class="ui.avatar({ class: props.ui?.avatar })" />
           </slot>
diff --git a/src/runtime/components/FooterColumns.vue b/src/runtime/components/FooterColumns.vue
index 5857cb8c7d..f35516309d 100644
--- a/src/runtime/components/FooterColumns.vue
+++ b/src/runtime/components/FooterColumns.vue
@@ -32,7 +32,7 @@ export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLin
   ui?: FooterColumns['slots']
 }
 
-type SlotProps<T> = (props: { link: T, active: boolean }) => any
+type SlotProps<T> = (props: { link: T, active: boolean, ui: FooterColumns['ui'] }) => any
 
 export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
   'left'(props?: {}): any
@@ -41,8 +41,8 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
   'column-label'?: (props: { column: FooterColumn<T> }) => any
   'link': SlotProps<T>
   'link-leading': SlotProps<T>
-  'link-label': SlotProps<T>
-  'link-trailing': SlotProps<T>
+  'link-label'(props: { link: T, active: boolean }): any
+  'link-trailing'(props: { link: T, active: boolean }): any
 }
 </script>
 
@@ -86,8 +86,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.footerColumn
             <li v-for="(link, linkIndex) in column.children" :key="linkIndex" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
                 <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
-                  <slot name="link" :link="(link as T)" :active="active">
-                    <slot name="link-leading" :link="(link as T)" :active="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" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 
diff --git a/src/runtime/components/Header.vue b/src/runtime/components/Header.vue
index b0f37aae9f..d99ea2cb20 100644
--- a/src/runtime/components/Header.vue
+++ b/src/runtime/components/Header.vue
@@ -45,7 +45,7 @@ export interface HeaderSlots {
   left(props?: {}): any
   default(props?: {}): any
   right(props?: {}): any
-  toggle(props: { open: boolean, toggle: () => void }): any
+  toggle(props: { open: boolean, toggle: () => void, ui: Header['ui'] }): any
   top(props?: {}): any
   bottom(props?: {}): any
   body(props?: {}): any
@@ -122,7 +122,7 @@ function toggleOpen() {
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
+    <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UButton
         v-if="toggle"
         color="neutral"
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index aed1b12f1d..f0cc094d8e 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -55,9 +55,9 @@ export interface InputEmits<T extends InputValue = InputValue> {
 }
 
 export interface InputSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Input['ui'] }): any
   default(props?: {}): any
-  trailing(props?: {}): any
+  trailing(props: { ui: Input['ui'] }): any
 }
 </script>
 
@@ -197,14 +197,14 @@ defineExpose({
     <slot />
 
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
     <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index be0fb4bd3c..4210d2011b 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -158,7 +158,7 @@ export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends Ge
   'remove-tag': [item: GetModelValue<A, VK, M>]
 } & GetModelValueEmits<A, VK, M>
 
-type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any
+type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number, ui: InputMenu['ui'] }) => any
 
 export interface InputMenuSlots<
   A extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>,
@@ -166,22 +166,14 @@ export interface InputMenuSlots<
   M extends boolean = false,
   T extends NestedItem<A> = NestedItem<A>
 > {
-  'leading'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-    ui: { [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string }
-  }): any
-  'trailing'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-    ui: { [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string }
-  }): any
+  'leading'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: InputMenu['ui'] }): any
+  'trailing'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: InputMenu['ui'] }): any
   'empty'(props: { searchTerm?: string }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
+  'item-label'(props: { item: T, index: number }): any
   'item-trailing': SlotProps<T>
-  'tags-item-text': SlotProps<T>
+  'tags-item-text'(props: { item: T, index: number }): any
   'tags-item-delete': SlotProps<T>
   'content-top': (props?: {}) => any
   'content-bottom': (props?: {}) => any
@@ -468,8 +460,8 @@ defineExpose({
       :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">
-        <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
+      <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" :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" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
@@ -482,14 +474,14 @@ defineExpose({
           />
         </slot>
 
-        <span :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 :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 :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
-          <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" />
+          <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
           <ComboboxItemIndicator as-child>
             <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
@@ -525,14 +517,14 @@ defineExpose({
         @remove-tag="onRemoveTag"
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="isInputItem(item) ? item : String(item)" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
-          <TagsInputItemText :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>) }}
-            </slot>
-          </TagsInputItemText>
+        <TagsInputItemText :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>) }}
+          </slot>
+        </TagsInputItemText>
 
           <TagsInputItemDelete :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">
+            <slot name="tags-item-delete" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
               <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
             </slot>
           </TagsInputItemDelete>
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index a55e664de7..7014d4a985 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -52,12 +52,12 @@ export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmi
   focus: [event: FocusEvent]
 }
 
-type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
+type SlotProps<T extends InputTagItem> = (props: { item: T, index: number, ui: InputTags['ui'] }) => any
 
 export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
-  'leading'(props?: {}): any
+  'leading'(props: { ui: InputTags['ui'] }): any
   'default'(props?: {}): any
-  'trailing'(props?: {}): any
+  'trailing'(props: { ui: InputTags['ui'] }): any
   'item-text': SlotProps<T>
   'item-delete': SlotProps<T>
 }
@@ -165,14 +165,14 @@ defineExpose({
       :class="ui.item({ class: [props.ui?.item] })"
     >
       <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
-        <slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" />
+        <slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" :ui="ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
         :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
         :disabled="disabled"
       >
-        <slot name="item-delete" :item="(item as T)" :index="index">
+        <slot name="item-delete" :item="(item as T)" :index="index" :ui="ui">
           <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
         </slot>
       </TagsInputItemDelete>
@@ -191,14 +191,14 @@ defineExpose({
     <slot />
 
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
     <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index b06853d5e9..b5c047319e 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -67,7 +67,7 @@ export interface ModalSlots {
   title(props?: {}): any
   description(props?: {}): any
   actions(props?: {}): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
+  close(props: { ui: Modal['ui'] }): any
   body(props: { close: () => void }): any
   footer(props: { close: () => void }): any
 }
@@ -167,7 +167,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
               <slot name="actions" />
 
               <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
+                <slot name="close" :ui="ui">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index b4641b77c8..55a3611199 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -144,7 +144,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
 
 export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
 
-type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean }) => any
+type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean, ui: NavigationMenu['ui'] }) => any
 
 export type NavigationMenuSlots<
   A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,
@@ -157,7 +157,7 @@ export type NavigationMenuSlots<
   'item-content': SlotProps<T>
   'list-leading': (props?: {}) => any
   'list-trailing': (props?: {}) => any
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean }>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean, ui: NavigationMenu['ui'] }>
 
 </script>
 
@@ -253,8 +253,8 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
 
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index">
-      <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="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 || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
       </slot>
@@ -271,7 +271,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
       </span>
 
       <component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge !== undefined || (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="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
-        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
           <UBadge
             v-if="item.badge !== undefined"
             color="neutral"
diff --git a/src/runtime/components/PageAnchors.vue b/src/runtime/components/PageAnchors.vue
index 719d431089..4fc6728a9e 100644
--- a/src/runtime/components/PageAnchors.vue
+++ b/src/runtime/components/PageAnchors.vue
@@ -27,13 +27,13 @@ export interface PageAnchorsProps<T extends PageAnchor = PageAnchor> {
   ui?: PageAnchors['slots']
 }
 
-type SlotProps<T> = (props: { link: T, active: boolean }) => any
+type SlotProps<T> = (props: { link: T, active: boolean, ui: PageAnchors['ui'] }) => any
 
 export interface PageAnchorsSlots<T extends PageAnchor = PageAnchor> {
   'link': SlotProps<T>
   'link-leading': SlotProps<T>
-  'link-label': SlotProps<T>
-  'link-trailing': SlotProps<T>
+  'link-label'(props: { link: T, active: boolean }): any
+  'link-trailing'(props: { link: T, active: boolean }): any
 }
 </script>
 
@@ -64,9 +64,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageAnchors
       <li v-for="(link, index) in links" :key="index" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
           <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
-            <slot name="link" :link="link" :active="active">
+            <slot name="link" :link="link" :active="active" :ui="ui">
               <div v-if="link.icon || !!slots['link-leading']" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading], active })">
-                <slot name="link-leading" :link="link" :active="active">
+                <slot name="link-leading" :link="link" :active="active" :ui="ui">
                   <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                 </slot>
               </div>
diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index 5640a8a891..f2bd4a2ae4 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -59,7 +59,7 @@ export interface PageCardProps {
 export interface PageCardSlots {
   header(props?: {}): any
   body(props?: {}): any
-  leading(props?: {}): any
+  leading(props: { ui: PageCard['ui'] }): any
   title(props?: {}): any
   description(props?: {}): any
   footer(props?: {}): any
@@ -138,7 +138,7 @@ const ariaLabel = computed(() => {
         </div>
 
         <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
+          <slot name="leading" :ui="ui">
             <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
diff --git a/src/runtime/components/PageFeature.vue b/src/runtime/components/PageFeature.vue
index 6d289701f1..0855cdda46 100644
--- a/src/runtime/components/PageFeature.vue
+++ b/src/runtime/components/PageFeature.vue
@@ -32,7 +32,7 @@ export interface PageFeatureProps {
 }
 
 export interface PageFeatureSlots {
-  leading(props?: {}): any
+  leading(props: { ui: PageFeature['ui'] }): any
   title(props?: {}): any
   description(props?: {}): any
   default(props?: {}): any
@@ -71,7 +71,7 @@ const ariaLabel = computed(() => {
 <template>
   <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
     <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       </slot>
     </div>
diff --git a/src/runtime/components/PageLinks.vue b/src/runtime/components/PageLinks.vue
index f98b548311..e76441d48a 100644
--- a/src/runtime/components/PageLinks.vue
+++ b/src/runtime/components/PageLinks.vue
@@ -28,14 +28,14 @@ export interface PageLinksProps<T extends PageLink = PageLink> {
   ui?: PageLinks['slots']
 }
 
-type SlotProps<T> = (props: { link: T, active: boolean }) => any
+type SlotProps<T> = (props: { link: T, active: boolean, ui: PageLinks['ui'] }) => any
 
 export interface PageLinksSlots<T extends PageLink = PageLink> {
   'title'(props?: {}): any
   'link': SlotProps<T>
   'link-leading': SlotProps<T>
-  'link-label': SlotProps<T>
-  'link-trailing': SlotProps<T>
+  'link-label'(props: { link: T, active: boolean }): any
+  'link-trailing'(props: { link: T, active: boolean }): any
 }
 </script>
 
@@ -72,8 +72,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageLinks ||
       <li v-for="(link, index) in links" :key="index" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
         <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
           <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
-            <slot name="link" :link="link" :active="active">
-              <slot name="link-leading" :link="link" :active="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" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
               </slot>
 
diff --git a/src/runtime/components/PageSection.vue b/src/runtime/components/PageSection.vue
index 03cbc7cac4..8f6ee05b7c 100644
--- a/src/runtime/components/PageSection.vue
+++ b/src/runtime/components/PageSection.vue
@@ -49,7 +49,7 @@ export interface PageSectionProps {
 export interface PageSectionSlots {
   top(props?: {}): any
   header(props?: {}): any
-  leading(props?: {}): any
+  leading(props: { ui: PageSection['ui'] }): any
   headline(props?: {}): any
   title(props?: {}): any
   description(props?: {}): any
@@ -98,7 +98,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pageSection
         <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
           <slot name="header">
             <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-              <slot name="leading">
+              <slot name="leading" :ui="ui">
                 <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
               </slot>
             </div>
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 96da5bacb5..7e9f8eac79 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -105,7 +105,7 @@ export type SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemK
   focus: [event: FocusEvent]
 } & GetModelValueEmits<A, VK, M>
 
-type SlotProps<T extends SelectItem> = (props: { item: T, index: number }) => any
+type SlotProps<T extends SelectItem> = (props: { item: T, index: number, ui: Select['ui'] }) => any
 
 export interface SelectSlots<
   A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>,
@@ -113,23 +113,12 @@ export interface SelectSlots<
   M extends boolean = false,
   T extends NestedItem<A> = NestedItem<A>
 > {
-  'leading'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-    ui: { [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string }
-  }): any
-  'default'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-  }): any
-  'trailing'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-    ui: { [K in keyof Required<Select['slots']>]: (props?: Record<string, any>) => string }
-  }): any
+  'leading'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: Select['ui'] }): any
+  'default'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean }): any
+  'trailing'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: Select['ui'] }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
+  'item-label'(props: { item: T, index: number }): any
   'item-trailing': SlotProps<T>
   'content-top': (props?: {}) => any
   'content-bottom': (props?: {}) => any
@@ -324,8 +313,8 @@ defineExpose({
                 :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">
-                  <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
+                <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" :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" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
                     <UChip
@@ -338,14 +327,14 @@ defineExpose({
                     />
                   </slot>
 
-                  <SelectItemText :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>
+            <SelectItemText :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 :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" />
+                    <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
                     <SelectItemIndicator as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 191b73f5cb..821bb4adbe 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -151,7 +151,7 @@ export type SelectMenuEmits<A extends ArrayOrNested<SelectMenuItem>, VK extends
   } | undefined]
 } & GetModelValueEmits<A, VK, M>
 
-type SlotProps<T extends SelectMenuItem> = (props: { item: T, index: number }) => any
+type SlotProps<T extends SelectMenuItem> = (props: { item: T, index: number, ui: SelectMenu['ui'] }) => any
 
 export interface SelectMenuSlots<
   A extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>,
@@ -159,24 +159,13 @@ export interface SelectMenuSlots<
   M extends boolean = false,
   T extends NestedItem<A> = NestedItem<A>
 > {
-  'leading'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-    ui: { [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string }
-  }): any
-  'default'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-  }): any
-  'trailing'(props: {
-    modelValue?: GetModelValue<A, VK, M>
-    open: boolean
-    ui: { [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string }
-  }): any
+  'leading'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: SelectMenu['ui'] }): any
+  'default'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean }): any
+  'trailing'(props: { modelValue?: GetModelValue<A, VK, M>, open: boolean, ui: SelectMenu['ui'] }): any
   'empty'(props: { searchTerm?: string }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
+  'item-label'(props: { item: T, index: number }): any
   'item-trailing': SlotProps<T>
   'content-top': (props?: {}) => any
   'content-bottom': (props?: {}) => any
@@ -451,8 +440,8 @@ defineExpose({
       :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">
-        <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">
+      <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" :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" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
@@ -465,14 +454,14 @@ defineExpose({
           />
         </slot>
 
-        <span :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 :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 :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-          <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" />
+          <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
 
           <ComboboxItemIndicator as-child>
             <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index 9df043f300..5b5ee38db5 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -67,7 +67,7 @@ export interface SlideoverSlots {
   title(props?: {}): any
   description(props?: {}): any
   actions(props?: {}): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string } }): any
+  close(props: { ui: Slideover['ui'] }): any
   body(props: { close: () => void }): any
   footer(props: { close: () => void }): any
 }
@@ -175,7 +175,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
               <slot name="actions" />
 
               <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
+                <slot name="close" :ui="ui">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index 82dc4fd150..3d9d3472e0 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -62,7 +62,7 @@ export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRoot
 type SlotProps<T extends StepperItem> = (props: { item: T }) => any
 
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-  indicator: SlotProps<T>
+  indicator(props: { item: T, ui: Stepper['ui'] }): any
   title: SlotProps<T>
   description: SlotProps<T>
   content: SlotProps<T>
@@ -145,7 +145,7 @@ defineExpose({
         <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
             <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
-              <slot name="indicator" :item="item">
+              <slot name="indicator" :item="item" :ui="ui">
                 <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 0c0877b283..d922b31dfb 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -71,16 +71,16 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
 
 export interface TabsEmits extends TabsRootEmits<string | number> {}
 
-type SlotProps<T extends TabsItem> = (props: { item: T, index: number }) => any
+type SlotProps<T extends TabsItem> = (props: { item: T, index: number, ui: Tabs['ui'] }) => any
 
 export type TabsSlots<T extends TabsItem = TabsItem> = {
   'leading': SlotProps<T>
-  'default': SlotProps<T>
+  'default'(props: { item: T, index: number }): any
   'trailing': SlotProps<T>
   'content': SlotProps<T>
-  'list-leading': (props?: {}) => any
-  'list-trailing': (props?: {}) => any
-} & DynamicSlots<T, undefined, { index: number }>
+  'list-leading'(props?: {}): any
+  'list-trailing'(props?: {}): any
+} & DynamicSlots<T, undefined, { index: number, ui: Tabs['ui'] }>
 
 </script>
 
@@ -146,7 +146,7 @@ defineExpose({
         :disabled="item.disabled"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
-        <slot name="leading" :item="item" :index="index">
+        <slot name="leading" :item="item" :index="index" :ui="ui">
           <UIcon v-if="item.icon" :name="item.icon" :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" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
         </slot>
@@ -155,7 +155,7 @@ defineExpose({
           <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
-        <slot name="trailing" :item="item" :index="index">
+        <slot name="trailing" :item="item" :index="index" :ui="ui">
           <UBadge
             v-if="item.badge !== undefined"
             color="neutral"
@@ -172,7 +172,7 @@ defineExpose({
 
     <template v-if="!!content">
       <TabsContent v-for="(item, index) of items" :key="index" :value="item.value ?? String(index)" :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">
+        <slot :name="((item.slot || 'content') as keyof TabsSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :ui="ui">
           {{ item.content }}
         </slot>
       </TabsContent>
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index d65f8cd5fe..e3c8e59393 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -56,9 +56,9 @@ export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
 }
 
 export interface TextareaSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Textarea['ui'] }): any
   default(props?: {}): any
-  trailing(props?: {}): any
+  trailing(props: { ui: Textarea['ui'] }): any
 }
 </script>
 
@@ -225,14 +225,14 @@ defineExpose({
     <slot />
 
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
     <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index d2f04e2dad..48735f28e7 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -62,11 +62,11 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
 export interface ToastEmits extends ToastRootEmits {}
 
 export interface ToastSlots {
-  leading(props?: {}): any
+  leading(props: { ui: Toast['ui'] }): any
   title(props?: {}): any
   description(props?: {}): any
   actions(props?: {}): any
-  close(props: { ui: { [K in keyof Required<Toast['slots']>]: (props?: Record<string, any>) => string } }): any
+  close(props: { ui: Toast['ui'] }): any
 }
 </script>
 
@@ -128,7 +128,7 @@ defineExpose({
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
-    <slot name="leading">
+    <slot name="leading" :ui="ui">
       <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index 6b52f7f657..a79a42e8a1 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -116,6 +116,7 @@ type SlotProps<T extends TreeItem> = (props: {
   indeterminate: boolean | undefined
   handleSelect: () => void
   handleToggle: () => void
+  ui: Tree['ui']
 }) => any
 
 export type TreeSlots<
@@ -130,6 +131,7 @@ export type TreeSlots<
   index: number
   level: number
   expanded: boolean
+  ui: Tree['ui']
   selected: boolean
   indeterminate: boolean | undefined
   handleSelect: () => void
@@ -257,7 +259,7 @@ const defaultExpanded = computed(() =>
       >
         <slot
           :name="((item.slot ? `${item.slot}-wrapper` : 'item-wrapper') as keyof TreeSlots<T>)"
-          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle }"
+          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
           :item="(item as Extract<T[number], { slot: string; }>)"
         >
           <component
@@ -269,12 +271,12 @@ const defaultExpanded = computed(() =>
           >
             <slot
               :name="((item.slot || 'item') as keyof TreeSlots<T>)"
-              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle }"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
               :item="(item as Extract<T[number], { slot: string; }>)"
             >
               <slot
                 :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle }"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
                 :item="(item as Extract<T[number], { slot: string; }>)"
               >
                 <UIcon
@@ -295,7 +297,7 @@ const defaultExpanded = computed(() =>
               >
                 <slot
                   :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof TreeSlots<T>)"
-                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle }"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
                   :item="(item as Extract<T[number], { slot: string; }>)"
                 >
                   {{ getItemLabel(item) }}
@@ -308,7 +310,7 @@ const defaultExpanded = computed(() =>
               >
                 <slot
                   :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof TreeSlots<T>)"
-                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle }"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
                   :item="(item as Extract<T[number], { slot: string; }>)"
                 >
                   <UIcon
diff --git a/src/runtime/components/User.vue b/src/runtime/components/User.vue
index 62137d96df..afad843152 100644
--- a/src/runtime/components/User.vue
+++ b/src/runtime/components/User.vue
@@ -33,7 +33,7 @@ export interface UserProps {
 }
 
 export interface UserSlots {
-  avatar(props?: {}): any
+  avatar(props: { ui: User['ui'] }): any
   name(props?: {}): any
   description(props?: {}): any
   default(props?: {}): any
@@ -67,7 +67,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.user || {})
 
 <template>
   <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <slot name="avatar">
+    <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" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>
diff --git a/src/runtime/components/content/ContentNavigation.vue b/src/runtime/components/content/ContentNavigation.vue
index 01caa4135e..ba3cbf2801 100644
--- a/src/runtime/components/content/ContentNavigation.vue
+++ b/src/runtime/components/content/ContentNavigation.vue
@@ -80,7 +80,7 @@ export interface ContentNavigationProps<T extends ContentNavigationLink = Conten
 
 export interface ContentNavigationEmits extends AccordionRootEmits {}
 
-type SlotProps<T> = (props: { link: T, active?: boolean }) => any
+type SlotProps<T> = (props: { link: T, active?: boolean, ui: ContentNavigation['ui'] }) => any
 
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
   'link': SlotProps<T>
@@ -164,13 +164,13 @@ const defaultValue = computed(() => {
 
 <template>
   <DefineLinkTemplate v-slot="{ link, active }">
-    <slot name="link" :link="(link as T)" :active="active">
-      <slot name="link-leading" :link="(link as T)" :active="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" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
       </slot>
 
       <span v-if="link.title || !!slots['link-title']" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
-        <slot name="link-title" :link="(link as T)" :active="active">
+        <slot name="link-title" :link="(link as T)" :active="active" :ui="ui">
           {{ link.title }}
         </slot>
 
@@ -178,7 +178,7 @@ const defaultValue = computed(() => {
       </span>
 
       <span v-if="link.badge || (link.children?.length && !disabled) || link.trailingIcon || !!slots['link-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
-        <slot name="link-trailing" :link="(link as T)" :active="active">
+        <slot name="link-trailing" :link="(link as T)" :active="active" :ui="ui">
           <UBadge
             v-if="link.badge"
             color="neutral"
@@ -222,7 +222,7 @@ const defaultValue = computed(() => {
               :ui="props.ui"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
-                <slot :name="name" :link="(slotData.link as T)" :active="slotData.active" />
+                <slot :name="name" :link="(slotData.link as T)" :active="slotData.active" :ui="ui" />
               </template>
             </UContentNavigation>
           </AccordionContent>
diff --git a/src/runtime/components/content/ContentSurround.vue b/src/runtime/components/content/ContentSurround.vue
index 29bc2061ed..cd7e020d0b 100644
--- a/src/runtime/components/content/ContentSurround.vue
+++ b/src/runtime/components/content/ContentSurround.vue
@@ -40,7 +40,7 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
   ui?: ContentSurround['slots']
 }
 
-type SlotProps<T> = (props: { link: T }) => any
+type SlotProps<T> = (props: { link: T, ui: ContentSurround['ui'] }) => any
 
 export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
   'link': SlotProps<T>
@@ -82,21 +82,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSurro
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
     <ULink v-if="link" :to="link.path" raw :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
-      <slot name="link" :link="(link as T)">
+      <slot name="link" :link="(link as T)" :ui="ui">
         <div :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
-          <slot name="link-leading" :link="(link as T)">
+          <slot name="link-leading" :link="(link as T)" :ui="ui">
             <UIcon :name="link.icon || icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 
         <p :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
-          <slot name="link-title" :link="(link as T)">
+          <slot name="link-title" :link="(link as T)" :ui="ui">
             {{ link.title }}
           </slot>
         </p>
 
         <p :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
-          <slot name="link-description" :link="(link as T)">
+          <slot name="link-description" :link="(link as T)" :ui="ui">
             {{ link.description }}
           </slot>
         </p>
diff --git a/src/runtime/components/content/ContentToc.vue b/src/runtime/components/content/ContentToc.vue
index 1076647d5c..90cc3477e6 100644
--- a/src/runtime/components/content/ContentToc.vue
+++ b/src/runtime/components/content/ContentToc.vue
@@ -55,9 +55,9 @@ export type ContentTocEmits = CollapsibleRootEmits & {
 type SlotProps<T> = (props: { link: T }) => any
 
 export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
-  leading(props: { open: boolean }): any
+  leading(props: { open: boolean, ui: ContentToc['ui'] }): any
   default(props: { open: boolean }): any
-  trailing(props: { open: boolean }): any
+  trailing(props: { open: boolean, ui: ContentToc['ui'] }): any
   content(props: { links: T[] }): any
   link: SlotProps<T>
   top(props: { links?: T[] }): any
@@ -161,14 +161,14 @@ nuxtApp.hooks.hook('page:transition:finish', () => {
   </DefineListTemplate>
 
   <DefineTriggerTemplate v-slot="{ open }">
-    <slot name="leading" :open="open" />
+    <slot name="leading" :open="open" :ui="ui" />
 
     <span :class="ui.title({ class: props.ui?.title })">
       <slot :open="open">{{ title || t('contentToc.title') }}</slot>
     </span>
 
     <span :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing" :open="open">
+      <slot name="trailing" :open="open" :ui="ui">
         <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
diff --git a/src/runtime/types/tv.ts b/src/runtime/types/tv.ts
index 1644ec12bc..73341581ae 100644
--- a/src/runtime/types/tv.ts
+++ b/src/runtime/types/tv.ts
@@ -40,6 +40,10 @@ type ComponentSlots<T extends { slots?: Record<string, any> }> = Id<{
   [K in keyof T['slots']]?: ClassValue
 }>
 
+type ComponentUI<T extends { slots?: Record<string, any> }> = Id<{
+  [K in keyof Required<T['slots']>]: (props?: Record<string, any>) => string
+}>
+
 type GetComponentAppConfig<A, U extends string, K extends string>
   = A extends Record<U, Record<K, any>> ? A[U][K] : {}
 
@@ -70,4 +74,5 @@ export type ComponentConfig<
   AppConfig: ComponentAppConfig<T, A, K, U>
   variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>
   slots: ComponentSlots<T>
+  ui: ComponentUI<T>
 }

From 269ed23f94ef8809e95d2e8c05e1fdc84e5e0776 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 10 Oct 2025 16:35:57 +0200
Subject: [PATCH 2/3] up

---
 src/runtime/components/InputMenu.vue  | 20 ++++++++++----------
 src/runtime/components/Select.vue     | 10 +++++-----
 src/runtime/components/SelectMenu.vue | 10 +++++-----
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 4210d2011b..4433d3741d 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -474,11 +474,11 @@ defineExpose({
           />
         </slot>
 
-          <span :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 :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 :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" />
@@ -517,11 +517,11 @@ defineExpose({
         @remove-tag="onRemoveTag"
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="isInputItem(item) ? item : String(item)" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
-        <TagsInputItemText :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>) }}
-          </slot>
-        </TagsInputItemText>
+          <TagsInputItemText :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>) }}
+            </slot>
+          </TagsInputItemText>
 
           <TagsInputItemDelete :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">
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 7e9f8eac79..9c9c12fe89 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -327,11 +327,11 @@ defineExpose({
                     />
                   </slot>
 
-            <SelectItemText :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>
+                  <SelectItemText :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 :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" />
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 821bb4adbe..0c20286ce1 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -454,11 +454,11 @@ defineExpose({
           />
         </slot>
 
-          <span :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 :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 :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" />

From d48ebea82ed58526af7465c8bc4f0a1487daa628 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 11 Oct 2025 11:22:46 +0200
Subject: [PATCH 3/3] fix tests

---
 test/components/ContextMenu.spec.ts    | 14 +++++++++-----
 test/components/DropdownMenu.spec.ts   | 12 ++++++++----
 test/components/NavigationMenu.spec.ts | 12 ++++++++----
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/test/components/ContextMenu.spec.ts b/test/components/ContextMenu.spec.ts
index b19aa6f2ba..67619d3343 100644
--- a/test/components/ContextMenu.spec.ts
+++ b/test/components/ContextMenu.spec.ts
@@ -1,11 +1,15 @@
 import { h, defineComponent } from 'vue'
 import { describe, it, expect, test } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { AppConfig } from '@nuxt/schema'
 import ContextMenu from '../../src/runtime/components/ContextMenu.vue'
 import type { ContextMenuProps, ContextMenuSlots } from '../../src/runtime/components/ContextMenu.vue'
+import type { ComponentConfig } from '../../src/runtime/types/tv'
 import theme from '#build/ui/context-menu'
-import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { expectSlotProps } from '../utils/types'
 
+type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>
+
 const ContextMenuWrapper = defineComponent({
   components: {
     UContextMenu: ContextMenu as any
@@ -109,21 +113,21 @@ describe('ContextMenu', () => {
     // normal
     expectSlotProps('item', () => ContextMenu({
       items: [{ label: 'foo', value: 'bar' }]
-    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean, ui: ContextMenu['ui'] }>()
 
     // groups
     expectSlotProps('item', () => ContextMenu({
       items: [[{ label: 'foo', value: 'bar' }]]
-    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean, ui: ContextMenu['ui'] }>()
 
     // custom
     expectSlotProps('item', () => ContextMenu({
       items: [{ label: 'foo', value: 'bar', custom: 'nice' }]
-    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean, ui: ContextMenu['ui'] }>()
 
     // custom + groups
     expectSlotProps('item', () => ContextMenu({
       items: [[{ label: 'foo', value: 'bar', custom: 'nice' }]]
-    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean, ui: ContextMenu['ui'] }>()
   })
 })
diff --git a/test/components/DropdownMenu.spec.ts b/test/components/DropdownMenu.spec.ts
index 59b5807ccc..90327e39b9 100644
--- a/test/components/DropdownMenu.spec.ts
+++ b/test/components/DropdownMenu.spec.ts
@@ -1,10 +1,14 @@
 import { describe, it, expect, test } from 'vitest'
+import type { AppConfig } from '@nuxt/schema'
 import DropdownMenu from '../../src/runtime/components/DropdownMenu.vue'
 import type { DropdownMenuProps, DropdownMenuSlots } from '../../src/runtime/components/DropdownMenu.vue'
+import type { ComponentConfig } from '../../src/runtime/types/tv'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/dropdown-menu'
 import { expectSlotProps } from '../utils/types'
 
+type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>
+
 describe('DropdownMenu', () => {
   const sizes = Object.keys(theme.variants.size) as any
 
@@ -116,21 +120,21 @@ describe('DropdownMenu', () => {
     // normal
     expectSlotProps('item', () => DropdownMenu({
       items: [{ label: 'foo', value: 'bar' }]
-    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean, ui: DropdownMenu['ui'] }>()
 
     // groups
     expectSlotProps('item', () => DropdownMenu({
       items: [[{ label: 'foo', value: 'bar' }]]
-    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean, ui: DropdownMenu['ui'] }>()
 
     // custom
     expectSlotProps('item', () => DropdownMenu({
       items: [{ label: 'foo', value: 'bar', custom: 'nice' }]
-    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean, ui: DropdownMenu['ui'] }>()
 
     // custom + groups
     expectSlotProps('item', () => DropdownMenu({
       items: [[{ label: 'foo', value: 'bar', custom: 'nice' }]]
-    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean, ui: DropdownMenu['ui'] }>()
   })
 })
diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts
index 94d883fbc9..7c41af1c37 100644
--- a/test/components/NavigationMenu.spec.ts
+++ b/test/components/NavigationMenu.spec.ts
@@ -1,10 +1,14 @@
 import { describe, it, expect, test } from 'vitest'
+import type { AppConfig } from '@nuxt/schema'
 import NavigationMenu from '../../src/runtime/components/NavigationMenu.vue'
 import type { NavigationMenuProps, NavigationMenuSlots } from '../../src/runtime/components/NavigationMenu.vue'
+import type { ComponentConfig } from '../../src/runtime/types/tv'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/navigation-menu'
 import { expectSlotProps } from '../utils/types'
 
+type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>
+
 describe('NavigationMenu', () => {
   const variants = Object.keys(theme.variants.variant) as any
 
@@ -118,21 +122,21 @@ describe('NavigationMenu', () => {
     // normal
     expectSlotProps('item', () => NavigationMenu({
       items: [{ label: 'foo', value: 'bar' }]
-    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean, ui: NavigationMenu['ui'] }>()
 
     // groups
     expectSlotProps('item', () => NavigationMenu({
       items: [[{ label: 'foo', value: 'bar' }]]
-    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string }, index: number, active?: boolean, ui: NavigationMenu['ui'] }>()
 
     // custom
     expectSlotProps('item', () => NavigationMenu({
       items: [{ label: 'foo', value: 'bar', custom: 'nice' }]
-    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean, ui: NavigationMenu['ui'] }>()
 
     // custom + groups
     expectSlotProps('item', () => NavigationMenu({
       items: [[{ label: 'foo', value: 'bar', custom: 'nice' }]]
-    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean }>()
+    })).toEqualTypeOf<{ item: { label: string, value: string, custom: string }, index: number, active?: boolean, ui: NavigationMenu['ui'] }>()
   })
 })