\n```\n\nAfter:\n```html\n\u003C!-- `ui` prop is the same as `app.config.ts` theming config\n\u003CUTheme :ui=\"{\n formField: {\n\t slots: {\n\t root: \"flex max-sm:flex-col justify-between items-center gap-4\",\n\t},\n },\n}\">\n \u003CUForm ...>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUForm/>\n\u003C/UTheme>\n```\n\n## Benefits\n- Easily componentized. I could create a `AppForm` component which contains the `UTheme` usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.\n- Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one\n\n## Implementation\nI'd tentatively be willing to implement this. My approach would be:\n- Create `UTheme`, it should have a `ui` and `uiPro` prop, each of which take the same type as the `app.config.ts`\n- `provide()` those props\n- `inject()` those props into each component and merge with passed in `ui` field.\n- Theme priority order should be:\n 1. `ui` prop passed to component\n 2. `ui` prop coming from UTheme component\n 3. `ui` config coming from `app.config.ts`\n\n### Additional context\n\n_No response_",[2856,2859,2862],{"name":2857,"color":2858},"enhancement","a2eeef",{"name":2860,"color":2861},"v3","49DCB8",{"name":2863,"color":2864},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.73672706,{"description":2874,"labels":2875,"number":2878,"owner":2866,"repository":2867,"state":2868,"title":2879,"updated_at":2880,"url":2881,"score":2882},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[2876,2877],{"name":2857,"color":2858},{"name":2863,"color":2864},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7529809,{"description":2884,"labels":2885,"number":2889,"owner":2866,"repository":2867,"state":2868,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Description\n\n\n## Problem\n\nCurrently, there's no straightforward way to disable anchor links for specific MDC component instances. The existing approaches have significant limitations:\n\n1. **Global `mdc` config in `nuxt.config.ts` is ignored** when using `@nuxt/ui-pro` with `mdc: true`\n2. **app.config.ts prose configuration affects all MDC components globally**, requiring extensive slot overrides\n3. **No component-level control** over anchor link behavior\n\n## Current Workaround\n\nTo disable anchor links, I currently need to configure every heading level in `app.config.ts`:\n\n```typescript\nexport default defineAppConfig({\n uiPro: {\n prose: {\n h1: {\n slots: {\n base: 'mt-0',\n link: 'cursor-default',\n leading: 'hidden p-0',\n leadingIcon: 'hidden'\n }\n },\n h2: {\n slots: {\n base: 'mt-0',\n link: 'cursor-default', \n leading: 'hidden p-0',\n leadingIcon: 'hidden'\n }\n },\n // ... repeat for h3-h6\n }\n }\n})\n```\n\nThis affects **all** MDC components across the entire application.\n\n\n## Proposed Solution\n\nAllow component-level UI configuration via a `:ui` prop on the `\u003CMDC>` component:\n\n```html\n\u003C!-- Disable anchor links for this specific instance -->\n\u003CMDC \n :value=\"content\" \n :ui=\"{ \n prose: { \n anchors: false \n } \n }\" \n/>\n\n\u003C!-- Or more granular control -->\n\u003CMDC \n :value=\"content\"\n :ui=\"{\n prose: {\n h1: { leading: 'hidden', leadingIcon: 'hidden' },\n h2: { leading: 'hidden', leadingIcon: 'hidden' }\n }\n }\"\n/>\n```\n\n## Use Case\n\n**Displaying AI/LLM generated content** where anchor links are undesirable:\n- Game interfaces showing AI-generated text\n- Chat applications with LLM responses \n- Content previews or excerpts\n- Educational tools displaying sample outputs\n\nIn these scenarios, anchor links serve no purpose and can be distracting or break the user experience.\n\n## Expected Behavior\n\n- Component-level `:ui` prop should merge with global prose configuration\n- Should work consistently with both `@nuxt/content` and standalone MDC usage\n- Should not require global configuration changes for per-component customization\n\n## Current Versions\n\n- `@nuxt/ui-pro` (v3)\n- 'uiPro.mdc' set to true or false in `nuxt.config` does not make a difference\n\n## Additional Context\n\nThis would align with Nuxt UI's existing pattern of allowing component-level customization via `:ui` props, providing developers with fine-grained control while maintaining sensible defaults.\n\n### Additional context\n\n_No response_",[2886,2887,2888],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},4216,"Allow disabling anchor links per MDC component instance via :ui prop","2025-05-24T15:32:22Z","https://github.com/nuxt/ui/issues/4216",0.7558179,{"description":2895,"labels":2896,"number":2900,"owner":2866,"repository":2867,"state":2868,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Description\n\nThis feature request proposes that the InputNumber component be enhanced with leading and trailing slot support. \n\nCurrently, components such as **Input**, **InputMenu**, **Select**, and **SelectMenu** already offer these slots for inserting custom content. For consistency across the UI library and to provide developers with a uniform customization experience, it is imperative that InputNumber is updated to include both leading and trailing slots. \n\n### Additional context\n\n_No response_",[2897,2898,2899],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},4201,"[InputNumber] Add support for leading & trailing slots","2025-05-21T13:07:28Z","https://github.com/nuxt/ui/issues/4201",0.76284146,{"description":2906,"labels":2907,"number":2910,"owner":2866,"repository":2867,"state":2911,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Description\n\nI saw that some components (like `Modal` or `Slideover`) have the \"trigger\" fully replaceable, meanwhile others like `Select` and `SelectMenu` cannot be fully replaced. Because of that, introducing another slot to replace the entire trigger would be nice imho. But I would define it as the default slot, not a named one (like `trigger` or something else) to remain consistent with the modal/slideover one.\nThe problem is that it would introduce a breaking change, so I don't know what is the way you want to proceed.\nWhat do you think about this?\nMentioning @sandros94 as I talked about this with him on Discord.\n\n### Additional context\n\nTo have a look on this, I did some changes in a branch in my fork: \u003Chttps://github.com/nuxt/ui/compare/v3...zAlweNy26:nuxt-ui:feat/select-trigger>",[2908,2909],{"name":2857,"color":2858},{"name":2860,"color":2861},4009,"closed","Standardize trigger slot in components","2025-05-10T17:57:56Z","https://github.com/nuxt/ui/issues/4009",0.74057305,{"description":2917,"labels":2918,"number":2921,"owner":2866,"repository":2867,"state":2911,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Description\n\nCurrently, the Select components items popover does not display a scrollbar, even though the content is scrollable. This may confuse users, as they might not realize there are additional options available beyond what is initially visible. While in some cases the partial display of the last cut-off item may hint that more options are available, it is not ideal to rely on this visual cue alone.\n\nExample from the Select Component docs:\n\nIt seems like `Broccoli` is the last item:\n\n\nBut it is not:\n\n\n### Additional context\n\nhttps://ui.nuxt.com/components/select#items",[2919,2920],{"name":2857,"color":2858},{"name":2860,"color":2861},4069,"Scrollbar for Select Component","2025-05-23T15:41:53Z","https://github.com/nuxt/ui/issues/4069",0.74355745,{"description":2927,"labels":2928,"number":2933,"owner":2866,"repository":2867,"state":2911,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Description\n\nIt is possible add an slot named `option-append` which will be after the menu content?\r\nFor example it will be useful to add an intersection observer when creating an infinite scroll select.\n\n### Additional context\n\n_No response_",[2929,2930,2932],{"name":2857,"color":2858},{"name":2931,"color":2864},"wontfix-v2",{"name":2860,"color":2861},1167,"`USelectMenu` option-append","2025-05-23T15:24:34Z","https://github.com/nuxt/ui/issues/1167",0.7475856,{"description":2939,"labels":2940,"number":2944,"owner":2866,"repository":2867,"state":2911,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\n\nI was looking to implement tooltip for NavigationMenu links as it was available in the DashboardSidebarLinks component in v2. But seems like the feature is no longer present in v3. \n\nhttps://ui2.nuxt.com/pro/components/dashboard-sidebar-links\n\nLet me know if there is still a simple way to implement tooltips specially in the collapsed Sidebar. I don't wanna go down with the slots approach. It looks dirty.\n\n\n\n### Additional context\n\nThis is what I have to do in order to get it to work. I believe this should be part of Nuxt UI already.\n\n``` js\n\u003CUNavigationMenu :collapsed=\"collapsed\" :items=\"links\" orientation=\"vertical\">\n \u003Ctemplate #item-leading=\"{ item }\">\n \u003CUTooltip :disabled=\"!collapsed\" :text=\"item.label\">\n \u003CUIcon\n :name=\"item.icon || ''\"\n class=\"text-dimmed group-hover:text-default size-5 shrink-0 transition-colors\"\n />\n \u003C/UTooltip>\n \u003C/template>\n\u003C/UNavigationMenu>\n```",[2941,2942,2943],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.75062263,{"description":2950,"labels":2951,"number":2958,"owner":2866,"repository":2866,"state":2911,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Version\n\n[v2.6.3](https://github.com/nuxt.js/releases/tag/v2.6.3)\n\n### Reproduction link\n\n[https://github.com/nuxt/nuxt.js/blob/v2.6.3/packages/vue-renderer/src/renderer.js#L351](https://github.com/nuxt/nuxt.js/blob/v2.6.3/packages/vue-renderer/src/renderer.js#L351)\n\n### Steps to reproduce\n\nI add a module to modify index.html.\n\n```\nconst consola = require('consola')\nconst cheerio = require('cheerio')\n\nexport default function template (moduleOptions) {\n this.nuxt.hook('vue-renderer:spa:templateParams', templateParams => {\n const $ = cheerio.load(templateParams.APP)\n const nuxtScript = $('#__nuxt').first()\n nuxtScript.after(moduleOptions.customScript)\n templateParams.APP = $.html()\n })\n}\n\n```\nthen launch command `npm run build`\n\n### What is expected ?\n\nexpect index.html contains customScript.\n\n### What is actually happening?\n\nnothing changed with index.html.\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9108\">#c9108\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2952,2955],{"name":2953,"color":2954},"pending triage","E99695",{"name":2956,"color":2957},"2.x","d4c5f9",5601,"'vue-renderer:spa:templateParams' hook is not working","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5601",0.7555858,{"labels":2964,"number":2971,"owner":2866,"repository":2866,"state":2911,"title":2972,"updated_at":2973,"url":2974,"score":2975},[2965,2968],{"name":2966,"color":2967},"documentation","5319e7",{"name":2969,"color":2970},"3.x","29bc7f",14195,"Customizing html template","2024-07-31T07:45:19Z","https://github.com/nuxt/nuxt/issues/14195",0.7599823,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOL7tHlEgeWV76VljhkzASG_IZQY949GYrfThcg7TGz4":-1},"/nuxt/ui/4013"]