\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_",[3019,3022,3025],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.73672706,{"description":3037,"labels":3038,"number":3042,"owner":3029,"repository":3030,"state":3031,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.74504197,{"description":3048,"labels":3049,"number":3053,"owner":3029,"repository":3030,"state":3031,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Description\n\nI want to make the text in a custom slot for a tree item child selectable.\nThe issue is that `user-select: text` doesn’t work on `\u003Cbutton>` elements in Safari (I’m using a Tauri app).\n\nIt would be great if the component allowed using a custom slot that avoids rendering a \u003Cbutton> for certain items. (Perhaps a new slot could be added to allow custom rendering?).\n\n\u003Cimg width=\"1217\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39cf6666-e3c9-48f4-a922-90a57d604feb\" />\n\n\n### Additional context\n\n_No response_",[3050,3051,3052],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4424,"Ability to not use button container for tree custom slot","2025-06-30T07:50:57Z","https://github.com/nuxt/ui/issues/4424",0.74868184,{"description":3059,"labels":3060,"number":3063,"owner":3029,"repository":3030,"state":3031,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### 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_",[3061,3062],{"name":3020,"color":3021},{"name":3026,"color":3027},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":3069,"labels":3070,"number":3074,"owner":3029,"repository":3030,"state":3031,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Description\n\n`name` and `type` in the `ProseField` component can only be consigned as strings:\n\n```\n::field{name=\"fieldname\" type=\"boolean\"}\ndescription\n::\n```\n\nBut actually I need them as slots like:\n\n```\n::field\n#name\n\u003Cbutton>fieldname\u003C/button>\n#type\n\u003Cspan>fieldtype\u003C/span>\n#default\ndescription\n::\n```\n\nIt's not much of an adjustment, just a little tweaking in the respective Vue component:\n\n```\n \u003Cspan\n v-if=\"!!slots.name || name\"\n :class=\"ui.name({ class: props.ui?.name })\"\n >\n \u003Cslot name=\"name\" mdc-unwrap=\"p\">\n {{ name }}\n \u003C/slot>\n \u003C/span>\n```\n\nI tried to overwrite it with my own component in `component/contents/ProseField.vue`, but it didn't work in production, probably because of tree shaking. (That's another issue.)\n\n### Additional context\n\n_No response_",[3071,3072,3073],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4575,"Allow name and type slots in ProseField (#uiPro)","2025-07-22T20:26:57Z","https://github.com/nuxt/ui/issues/4575",0.7552418,{"description":3080,"labels":3081,"number":3085,"owner":3029,"repository":3030,"state":3031,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### 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_",[3082,3083,3084],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},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":3091,"labels":3092,"number":3096,"owner":3029,"repository":3030,"state":3031,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Description\n\nFor [SelectMenu](https://ui.nuxt.com/components/select-menu) seems to be no option to customize the label of the selected item, e.g. use multiple values to compose the label. Currently only one item value can be selected by prop `labelKey`, but it is not possible to use multiple values OR to even add custom html-code.\n\n**Example:**\n\n```ts\nconst items = [\n {\n id: 1,\n firstName: 'Max',\n lastName: 'Mustermann',\n },\n ...\n]\n```\n\nThe items to select can be fully customized, even with custom html code:\n\n```vue\n\u003Ctemplate #item-label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cdiv class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/div>\n\u003C/template>\n```\n\nBut when an item is selected, the selected item can only be one value:\n\n```vue\n\u003CUSelectMenu label-key=\"lastName\" />\n```\n\n**Possible solutions:**\n\n1. Make a new label prop that accepts a function, so values can be compound:\n\n```ts\n\u003CUSelectMenu :label=\"(item) => item.firstName + ' ' + item.lastName\"\n```\n\n2. Optionally make a slot to customize the labels: \n```vue\n\u003CUSelectMenu>\n \u003Ctemplate #label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cspan class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/span>\n \u003C/template>\n\u003C/USelectMenu>\n```\n\nP.S. the prop `labelKey` is not documented https://ui.nuxt.com/components/select-menu#props\n",[3093,3094,3095],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.7565312,{"description":3102,"labels":3103,"number":3113,"owner":3029,"repository":3030,"state":3114,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Description\n\nIs there currently a way, or future support for overriding the trigger for the Accordion similar to how it worked in v2:\n\n> Example for v2\n\n```vue\n\u003Cu-accordion :items=\"items\" :ui=\"{ wrapper: 'flex flex-col w-full' }\">\n \u003Ctemplate #default=\"{ item, open }\">\n \u003Cu-button variant=\"ghost\" class=\"flex justify-between items-center font-semibold\">\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003Cdiv class=\"flex items-center space-x-2\">\n \u003Cu-icon\n name=\"i-heroicons-chevron-right-20-solid\"\n class=\"w-5 h-5 ms-auto transform transition-transform duration-200\"\n :class=\"[open && 'rotate-90']\"\n />\n \u003C/div>\n \u003C/u-button>\n \u003C/template>\n\n \u003Ctemplate #item=\"{ item }\">\n // Content\n \u003C/template>\n\u003C/u-accordion>\n```\n\nCurrently i don't see a way with the default slot to override the AccordionRoot trigger\n",[3104,3107,3108,3111],{"name":3105,"color":3106},"question","d876e3",{"name":3023,"color":3024},{"name":3109,"color":3110},"closed-by-bot","ededed",{"name":3112,"color":3110},"stale",3455,"closed","Override Slot for Accordion Trigger","2025-06-18T09:01:47Z","https://github.com/nuxt/ui/issues/3455",0.71520686,{"description":3120,"labels":3121,"number":3131,"owner":3029,"repository":3030,"state":3114,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, extends, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-qsqtmc?file=app.vue\n\n### Description\n\nLandingFAQ being built on top Accordion, when an item has a specified \"slot\" property, it should allow to display custom content in a corresponding slot. In my reproduction, you can see i have an faq item with a slot property equal to \"risks\". When using \u003Ctemplate #risks> risks \u003C/template> to show a specific content for that item, it works well in the accordion but is ignored in the LandingFAQ where the content property is shown instead.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3122,3125,3128,3129,3130],{"name":3123,"color":3124},"bug","d73a4a",{"name":3126,"color":3127},"nuxt/ui-pro","00dc82",{"name":3026,"color":3027},{"name":3109,"color":3110},{"name":3112,"color":3110},2057,"LandingFAQ component in Pro ignores the \"slot\" property of an item","2025-06-18T09:06:25Z","https://github.com/nuxt/ui/issues/2057",0.7383835,{"description":3137,"labels":3138,"number":3141,"owner":3029,"repository":3030,"state":3114,"title":3142,"updated_at":3143,"url":3144,"score":3145},"### 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>",[3139,3140],{"name":3020,"color":3021},{"name":3023,"color":3024},4009,"Standardize trigger slot in components","2025-05-10T17:57:56Z","https://github.com/nuxt/ui/issues/4009",0.74057305,["Reactive",3147],{},["Set"],["ShallowReactive",3150],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOL7tHlEgeWV76VljhkzASG_IZQY949GYrfThcg7TGz4":-1},"/nuxt/ui/4013"]