\n\nIt can be worked around using `item-label` slot, but it would be nice if developer can use `items` props only to implement it for simpler way.\n\nBelow, I have tried to create it using Reka UI `combobox` component, the component used by SelectMenu.\n\n\u003Cimg width=\"329\" height=\"460\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e5cda771-3f8e-4369-bb3b-d5159f84d425\" />\n\n### Additional context\n\n_No response_",[3139,3142,3145],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4661,"nuxt","ui","open","SelectMenu: add description props to show text below title","2025-08-06T02:19:32Z","https://github.com/nuxt/ui/issues/4661",0.72817546,{"description":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3151,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Description\n\n**Title**: Add Descriptions component\n\n**Description**\nThanks to the Nuxt UI team for the great work 🙏. Currently, the library does not provide a component similar to [Descriptions](https://ant.design/components/descriptions-cn).\n\nThis type of component is very common in real-world applications, often used to display descriptive information in pairs, such as user profiles, order details, or configuration parameters. Ant Design’s Descriptions component provides a clean and convenient way to present such data.\n\n**Use Case**\n\n* Add a `Descriptions` component to display data in “label–content” pairs.\n* Support horizontal and vertical layouts.\n* Support configurable column count with automatic wrapping.\n* Allow customization of label and content styles.\n\n**Expected Behavior**\nDevelopers should be able to easily use a Descriptions component, similar to Ant Design, to quickly build data presentation pages.\n\ne.g:\n\n\u003Cimg width=\"1421\" height=\"478\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f460119-101d-4dea-bb41-055ca77679af\" />\n\n### Additional context\n\n_No response_",[3159,3160,3161],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4788,"[Feature Request] Add Descriptions component","2025-08-19T03:39:55Z","https://github.com/nuxt/ui/issues/4788",0.7326993,{"description":3168,"labels":3169,"number":3173,"owner":3149,"repository":3150,"state":3151,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Description\n\nI propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.\n\n## Example\nThe Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).\n\nBefore:\n```html\n\u003CUForm ...>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n\u003CUForm/>\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_",[3170,3171,3172],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7446923,{"description":3179,"labels":3180,"number":3184,"owner":3149,"repository":3150,"state":3151,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### 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_",[3181,3182,3183],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4201,"[InputNumber] Add support for leading & trailing slots","2025-05-21T13:07:28Z","https://github.com/nuxt/ui/issues/4201",0.74887687,{"description":3190,"labels":3191,"number":3202,"owner":3149,"repository":3150,"state":3203,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### 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_",[3192,3195,3196,3197,3200],{"name":3193,"color":3194},"feature","A27AF6",{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3198,"color":3199},"closed-by-bot","ededed",{"name":3201,"color":3199},"stale",4138,"closed","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.71303153,{"description":3209,"labels":3210,"number":3220,"owner":3149,"repository":3149,"state":3203,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-issues-25423\r\n\r\n### Describe the bug\r\n\r\nUsing nested slots in a server components + `nuxt-client` breaks:\r\n\r\nExample\r\n\r\n```vue\r\n\u003C!-- ServerComp.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CAppButton nuxt-client>\r\n \u003Cslot />\r\n \u003C/AppButton>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n```vue\r\n\u003C!-- App.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CServerComp>\r\n Some slot content here\r\n \u003C/ServerComp>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3211,3214,3217],{"name":3212,"color":3213},"3.x","29bc7f",{"name":3215,"color":3216},"🔨 p3-minor","FBCA04",{"name":3218,"color":3219},"server components","839413",25423,"Respect named slots in server components","2024-03-06T15:26:20Z","https://github.com/nuxt/nuxt/issues/25423",0.7237178,{"description":3226,"labels":3227,"number":3235,"owner":3149,"repository":3149,"state":3203,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.15.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: vite\r\n- User Config: extends, telemetry, ssr, nitro, fontMetrics, routeRules, runtimeConfig, build, modules, components, bugsnag, devtools, i18n, app, dnGraphqlClient, vite, plugins\r\n- Runtime Modules: @nuxtjs/fontaine@0.4.0, @pinia/nuxt@0.4.11, @nuxt/devtools@0.6.6, nuxt-bugsnag@5.9.2, @digitalnatives/css-variables/nuxt@5.1.0, @digitalnatives/graphql-client@3.2.2, @nuxtjs/i18n@8.0.0-beta.12\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nSetting up a component inheritance pattern:\r\n\r\n- With ssr: true...\r\n- Base component with a root-level `\u003Ccomponent>` element and one or more slots\r\n- An extending component which \"inherits\" the slots of the base component using `$slots` in the template;\r\n- Use the extending component somewhere\r\n- On the server, an error is thrown: `[1:54:29 PM] [Vue warn]: Property \"name\" was accessed during render but is not defined on instance.`\r\n- On the client, a hydration error is thrown: SSR renders no content within the slots, client-side the component is rendered correctly however\r\n\r\nSee https://codesandbox.io/p/github/nuxt/starter/csb-rhhp8s/draft/determined-joliot?file=/app.vue:3,69\r\n\r\n### Describe the bug\r\n\r\nIt seems server-side there is some problem with SSR trying to pass slots to a dynamic `\u003Ccomponent>`\r\n\r\nI would expect this pattern to work, but somehow the slot name is getting lost somewhere\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Ccomponent\r\n :is=\"element\"\r\n >\r\n \u003Cslot />\r\n \u003C/component>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n'use strict';\r\n\r\nexport default {\r\n props: {\r\n element: {\r\n type: String,\r\n required: false,\r\n default: 'button'\r\n }\r\n }\r\n};\r\n\u003C/script>\r\n```\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CBaseComponent>\r\n \u003Ctemplate v-for=\"(_, name) in $slots\" v-slot:[name]=\"scope\">\r\n \u003Cslot :name=\"name\" v-bind=\"scope\" />\r\n \u003C/template>\r\n \u003C/BaseComponent>\r\n\u003C/template>\r\n\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3228,3229,3232],{"name":3212,"color":3213},{"name":3230,"color":3231},"pending triage","E99695",{"name":3233,"color":3234},"upstream","E8A36D",21915,"Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.72387457,{"description":3241,"labels":3242,"number":3252,"owner":3149,"repository":3150,"state":3203,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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_",[3243,3246,3249,3250,3251],{"name":3244,"color":3245},"bug","d73a4a",{"name":3247,"color":3248},"nuxt/ui-pro","00dc82",{"name":3146,"color":3147},{"name":3198,"color":3199},{"name":3201,"color":3199},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.73017704,{"description":3258,"labels":3259,"number":3262,"owner":3149,"repository":3150,"state":3203,"title":3263,"updated_at":3264,"url":3265,"score":3266},"\u003Cdetails>\n \u003Csummary>Environment\u003C/summary>\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.4.1\n- Builder: -\n- User Config: modules, ssr, devtools, app, css, ui, runtimeConfig, alias, build, devServer, watch, future, experimental, compatibilityDate, nitro, vite, eslint, heyApi, i18n, icon, svgIconSprite\n- Runtime Modules: @nuxt/ui@3.1.2, @nuxt/test-utils/module@3.19.0, @nuxt/eslint@1.4.1, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.2.0, @hey-api/nuxt@0.1.6, @nuxtjs/i18n@9.5.4, nuxt-svg-icon-sprite@2.0.0\n- Build Modules: -\n------------------------------\n\u003C/details>\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://www.npmjs.com/package/@nuxt/ui?activeTab=code - `interface ModalSlots`\n\n### Description\n\nGreetings, thank you very much for the work you have done!\n\nUsing the example of the `UModal` component, you can see that props in scoped slots, such as `#footer=“{ close }”`, is untyped \n\u003Cdetails>\n \u003Csummary>Example\u003C/summary>\n\n \n\u003C/details>\n\nin the bundle package it can be seen that there are indeed no valid types of props in `ModalSlots` - https://www.npmjs.com/package/@nuxt/ui?activeTab=code `interface ModalSlots`, although they are present in the source files - https://github.com/nuxt/ui/blob/v3/src/runtime/components/Modal.vue#L70\n\n\nAs I understand it, it is not only `UModal`, but all components with scoped slots.",[3260,3261],{"name":3244,"color":3245},{"name":3143,"color":3144},4260,"Scoped slots are not typed","2025-06-02T09:08:41Z","https://github.com/nuxt/ui/issues/4260",0.7314317,{"description":3268,"labels":3269,"number":3272,"owner":3149,"repository":3149,"state":3203,"title":3273,"updated_at":3274,"url":3275,"score":3276},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.1.2`\r\n- Nitro Version: `2.1.1`\r\n- Package Manager: `yarn@1.22.17`\r\n- Builder: `vite`\r\n- User Config: `modules`, `vuestic`\r\n- Runtime Modules: `@vuestic/nuxt@1.0.9`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. create component as below\r\n\r\nBtn.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cslot name=\"header\">\u003C/slot>\r\n \u003Cslot>\u003C/slot>\r\n \u003Cslot name=\"slot1\">\u003C/slot>\r\n \u003Cslot name=\"slot2\">\u003C/slot>\r\n \u003Cslot name=\"footer\">\u003C/slot>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\u003C/style>\r\n```\r\n\r\n2. build project `yarn build`\r\n3. run `yarn preview`\r\n4. inspect DOM\r\n\n\n### Describe the bug\n\nthis is resulting html of built project\r\n\r\n```html\r\n\u003Cdiv id=\"__nuxt\">\r\n \u003Cdiv>\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n im a button\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nIs it possible to get rid of generated comments in place of empty slots?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3270,3271],{"name":3212,"color":3213},{"name":3230,"color":3231},18754,"component slots end up as comments","2023-02-05T13:45:07Z","https://github.com/nuxt/nuxt/issues/18754",0.7358573,["Reactive",3278],{},["Set"],["ShallowReactive",3281],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFo4d1m_R0F7-OaB7u9yTaaqGY_26PZqeZZyXZhx0FsE":-1},"/nuxt/ui/4575"]