\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_",[3188,3189,3192],{"name":3172,"color":3173},{"name":3190,"color":3191},"v3","49DCB8",{"name":3175,"color":3176},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.75255436,{"description":3199,"labels":3200,"number":3206,"owner":3178,"repository":3178,"state":3180,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Describe the feature\n\nSometimes you need to have multiple components in the `app.vue` file, or as close to the root element as possible. For example, if you have multiple modals that must be present not only on every page, but also on every layout (dialogs, cookie notice, etc) or any other interface resource and you must add each one manually somewhere in the `app.vue` file.\r\n\r\nI think it would be nice to have a directory for \"universal\" components that Nuxt detects and automatically injects into the root element. This would perfectly follow the philosophy of the framework to improve the DX as much as possible.\r\n\r\nAn example of how it would be now and how it could be:\r\n\r\n```vue\r\n// ~/app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n \u003C!-- universal components -->\r\n \u003CMenuDialog />\r\n \u003CLanguageDialog />\r\n \u003CColorModeDialog />\r\n \u003CBackdrop />\r\n \u003C!-- etc -->\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nOr you could just move those components to a directory called `~/components/universal` (for example) and Nuxt would take care of injecting them automatically.\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3201,3203],{"name":3172,"color":3202},"8DEF37",{"name":3204,"color":3205},"discussion","538de2",19492,"Components automatically injected into the root element","2024-06-30T11:09:20Z","https://github.com/nuxt/nuxt/issues/19492",0.75393283,{"description":3212,"labels":3213,"number":3217,"owner":3178,"repository":3179,"state":3180,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### 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_",[3214,3215,3216],{"name":3172,"color":3173},{"name":3190,"color":3191},{"name":3175,"color":3176},4788,"[Feature Request] Add Descriptions component","2025-08-19T03:39:55Z","https://github.com/nuxt/ui/issues/4788",0.75415444,{"description":3223,"labels":3224,"number":3227,"owner":3178,"repository":3179,"state":3180,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Package\n\nv4.x\n\n### Description\n\nWe already have title and description properties for the UModal, I propose also adding an *icon* prop (similar to how the UDashboardModal had an icon in Nuxt UI Pro v1.x.\n\nHappy to add and open a PR for it!\n\n### Additional context\n\n_No response_",[3225,3226],{"name":3172,"color":3173},{"name":3175,"color":3176},5140,"UModal: Add icon prop","2025-10-04T15:13:50Z","https://github.com/nuxt/ui/issues/5140",0.75438815,{"description":3233,"labels":3234,"number":3239,"owner":3178,"repository":3179,"state":3180,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nHi 👋🏻 \n\nI was using `PageHeader` component and I wanted to heavily customize it for my starter-kit. For this I have to write the same class with media query variant to ensure that existing class doesn't apply to my customized component.\n\nE.g. I wanted to reduce the font size of the heading and for that I had to write same class twice:\n```js\npageHeader: {\n slots: {\n title: 'text-xl sm:text-xl',\n },\n},\n```\n\nIt'll be easy if we can provide a way to replace current classes entirely via something like this:\n```js\npageHeader: {\n slots: {\n title: (existingClasses) => 'text-xl font-bold text-pretty',\n },\n},\n```\n\nWith this user can completely omit the existing style and apply our own style. This wasn’t particularly relevant to components, but as we ship block-like components, it becomes relevant to customize them heavily and override the existing style.\n\n### Additional context\n\n_No response_",[3235,3236,3237],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3238,"color":3191},"v4",4953,"🎨 Allow replacing all UI classes with new set of classes?","2025-09-27T09:55:07Z","https://github.com/nuxt/ui/issues/4953",0.7568504,{"description":3245,"labels":3246,"number":3255,"owner":3178,"repository":3178,"state":3256,"title":3257,"updated_at":3258,"url":3259,"score":3260},"### Describe the feature\n\nA component to render it slot only during dev would be useful in some cases.\r\n\r\nThe content should be tree shaken during build\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3247,3248,3249,3252],{"name":3172,"color":3202},{"name":3204,"color":3205},{"name":3250,"color":3251},"3.x","29bc7f",{"name":3253,"color":3254},"🍰 p2-nice-to-have","0E8A16",15066,"closed","Add `DevOnly` component","2023-01-19T17:44:35Z","https://github.com/nuxt/nuxt/issues/15066",0.74108225,{"description":3262,"labels":3263,"number":3268,"owner":3178,"repository":3178,"state":3256,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Environment\n\nNuxi 3.3.3 16:40:34\r\n 16:40:35\r\nRootDir: C:/Users/d91589/Desktop/Projects/onlylaw/frontend-nuxt 16:40:35\r\nNuxt project info: 16:40:35\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.3.3`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@9.6.2`\r\n- Builder: `vite`\r\n- User Config: `imports`, `typescript`, `modules`, `runtimeConfig`, `experimental`, `vite`, `css`, `i18n`, `pinia`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0-beta.10`, `@vueuse/nuxt@9.13.0`, `@pinia/nuxt@0.4.6`, `@nuxtjs/device@3.1.0`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nProblem is clear from description\n\n### Describe the bug\n\nI use \r\n```\r\ndefinePageMeta({\r\n layout: \"layoutname\",\r\n});\r\n```\r\n to change the layout for different pages. \r\n\r\nFirst layout: \r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CLayoutHeader>\u003C/LayoutHeader>\r\n \u003Cslot>\u003C/slot>\r\n \u003CLayoutFooter>\u003C/LayoutFooter>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nSecond layout: \r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CLayoutHeader>\u003C/LayoutHeader>\r\n \u003Cslot>\u003C/slot>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nWhen I change the layout, the header component rerenders. I think components that already exist in a layout should not be rerendered. Is that a bug or expected behavior?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3264,3265],{"name":3250,"color":3251},{"name":3266,"color":3267},"pending triage","E99695",21062,"Changing layout rerenders existing layout components","2023-05-25T16:05:23Z","https://github.com/nuxt/nuxt/issues/21062",0.74493146,{"description":3274,"labels":3275,"number":3279,"owner":3178,"repository":3179,"state":3256,"title":3280,"updated_at":3281,"url":3282,"score":3283},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nIt would be nice if the docs [ThemePicker](https://github.com/nuxt/ui/tree/v4/docs/app/components/theme-picker) component became part of NuxtUI directly. If this is something that would be accepted, I can work on creating a pull request.\n\n### Additional context\n\n_No response_",[3276,3277,3278],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3238,"color":3191},4960,"Provide ThemePicker component","2025-09-12T19:45:22Z","https://github.com/nuxt/ui/issues/4960",0.7451289,{"description":3285,"labels":3286,"number":3295,"owner":3178,"repository":3179,"state":3256,"title":3296,"updated_at":3297,"url":3298,"score":3299},"### Description\n\nRadioGroup has 3 styles that dramatically change the look. Which is a bit contrary to the overall UI concept of the library. After all, in all components variant changes only the color, not the entire rendering.\n\nI propose to add variants: solid, outline, soft, subtle, ghost. Styles can be taken from Button.\n\nAnd the current styles list, card, table should be moved to a new props, but I don't know what to call it.\n\n### Additional context\n\nOccasionally there is a need to make a visual button, but to work as radio",[3287,3288,3289,3290,3293],{"name":3172,"color":3173},{"name":3190,"color":3191},{"name":3175,"color":3176},{"name":3291,"color":3292},"closed-by-bot","ededed",{"name":3294,"color":3292},"stale",4545,"Expand RadioGroup and bring it to a common style","2025-09-24T02:03:22Z","https://github.com/nuxt/ui/issues/4545",0.7451919,["Reactive",3301],{},["Set"],["ShallowReactive",3304],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkCnBznh2JrT3Jk5dHgJpyJNImmFvtTGPKcW6eDlxVoc":-1},"/nuxt/ui/5164"]