\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_",[3049,3052,3053],{"name":3050,"color":3051},"enhancement","a2eeef",{"name":3024,"color":3025},{"name":3027,"color":3028},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7658869,{"description":3060,"labels":3061,"number":3065,"owner":3030,"repository":3031,"state":3032,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Description\n\nHello 👋,\n\nI'm building a dashboard and I often need to put a table in a modal. Currently, I have to manually change the style of the modal and the table to match perfectly.\n\nSee this example: https://stackblitz.com/edit/github-2aatsynx?file=app%2Fpages%2Findex.vue\n\nTo solve this, I have to solution in mind:\n\n1. props to change the table and modal class;\n2. injection key to tell the table that it is in a modal.\n\nTo be honest, I don't like the second one as it removes a lot of flexibility.\n\nThe first one will introduce some new variants to all customization globally which is better than the current manual customization. For a Modal component, a new `table` (or `body-padding` or something even more generic but used to remove the padding from the body) props and a `modal` props for the table to align the internal padding.\n\nMaybe there is more solutions to this!\n\n### Additional context\n\n_No response_",[3062,3063,3064],{"name":3050,"color":3051},{"name":3024,"color":3025},{"name":3027,"color":3028},4366,"Simplify table usage in modals","2025-06-17T07:42:04Z","https://github.com/nuxt/ui/issues/4366",0.76833963,{"description":3071,"labels":3072,"number":3076,"owner":3030,"repository":3031,"state":3032,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.15.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, fonts, icon, components, css, ui\n- Runtime Modules: @nuxt/fonts@0.11.4, @nuxt/eslint@1.5.2, @nuxt/icon@1.15.0, @nuxt/image@1.10.0, @nuxt/ui@3.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nTheming with either of this method such as:\n\n### Theming in `app.config.ts`\nSame issue for both UInputTags and UInputMenu (multiple)\n```typescript\ninputTags: {\n ...\n compoundVariants: [\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\ninputMenu: {\n ...\n compoundVariants: [\n // Works properly\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n // Wrong behaviour\n {\n variant: 'outline',\n multiple: true,\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\n\n```\n### Theming directly using `ui`\n```tsx\n\u003CUInputTags\n ...\n :ui=\"{\n root: 'root-test',\n base: 'base-test',\n }\"\n/>\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3073,3074,3075],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.7694097,{"description":3082,"labels":3083,"number":3090,"owner":3030,"repository":3030,"state":3032,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v24.2.0\n- Nuxt Version: 4.0.1\n- CLI Version: 3.26.4\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@10.13.1\n- Builder: -\n- User Config: compatibilityDate, experimental, modules, unocss, vue, app, colorMode, css, content, eslint, devtools, i18n, hub, nitro\n- Runtime Modules: @nuxthub/core@0.9.0, @nuxt/eslint@1.7.1, @nuxt/content@3.6.3, @unocss/nuxt@66.3.3, @nuxt/image@1.10.0, @pinia/nuxt@0.11.2, @nuxt/fonts@0.11.4, @nuxtjs/i18n@9.5.6, @nuxtjs/color-mode@3.5.2\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nI tried to reproduce on Stackblitz but it don't seems to be reproductible as I have on my machine.\n\nhttps://stackblitz.com/edit/github-c4fvnsee?file=tsconfig.json\n\n### Describe the bug\n\nI'm using Nuxt with Nuxt Content.\n\nI migrate to Nuxt 4 and when I change the tsconfig.json to match the new one, typings from `useAppConfig` is losing those coming from `NuxtCustomSchema` (which are correctly generated). On hovering it shows AppConfig and that's it.\n\n\u003Cimg width=\"604\" height=\"244\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f1429dd4-46fa-44b3-a2e9-d5c9f497cfa9\" />\n\nWhere I use config then, it shows me typing error.\nWhen I switch to the legacy tsconfig, typing issue are gone.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nTypecheck summary: \n\n\n\napp/layouts/default.vue:35:33 - error TS2339: Property 'title' does not exist on type '{}'.\n\n35 title: appConfig.information?.title,\n ~~~~~\n\napp/layouts/default.vue:36:39 - error TS2339: Property 'description' does not exist on type '{}'.\n\n36 description: appConfig.information?.description,\n ~~~~~~~~~~~\n\napp/layouts/default.vue:39:36 - error TS2339: Property 'socials' does not exist on type '{}'.\n\n39 github: appConfig.information?.socials?.github,\n ~~~~~~~\n\napp/layouts/default.vue:40:38 - error TS2339: Property 'socials' does not exist on type '{}'.\n\n40 linkedin: appConfig.information?.socials?.linkedin,\n ~~~~~~~\n\napp/layouts/default.vue:41:40 - error TS2339: Property 'birthdate' does not exist on type '{}'.\n\n41 isBirthday: appConfig.information?.birthdate ? isBirthday(appConfig.information?.birthdate) : false,\n ~~~~~~~~~\n\napp/layouts/default.vue:41:86 - error TS2339: Property 'birthdate' does not exist on type '{}'.\n\n41 isBirthday: appConfig.information?.birthdate ? isBirthday(appConfig.information?.birthdate) : false,\n ~~~~~~~~~\n\napp/layouts/default.vue:44:27 - error TS2339: Property 'icons' does not exist on type '{}'.\n\n44 normal: appConfig.ui?.icons?.normal as string[] ?? [],\n ~~~~~\n\napp/layouts/default.vue:45:29 - error TS2339: Property 'icons' does not exist on type '{}'.\n\n45 birthday: appConfig.ui?.icons?.birthday as string[] ?? [],\n ~~~~~\n\napp/middleware/title.global.ts:5:28 - error TS2571: Object is of type 'unknown'.\n\n5 const appConfigTitle = useAppConfig().information.title;\n ~~~~~~~~~~~~~~~~~~~~~~~~~~\n\napp/pages/index.vue:14:62 - error TS2339: Property 'messages' does not exist on type '{}'.\n\n14 const messages = useState('randomIndex', () => appConfig.ui?.messages?.sort(() => Math.random() - 0.5))\n ~~~~~~~~\n\nnuxt.schema.ts:3:16 - error TS2304: Cannot find name 'defineNuxtSchema'.\n\n3 export default defineNuxtSchema({\n ~~~~~~~~~~~~~~~~\n\nnuxt.schema.ts:3:16 - error TS2304: Cannot find name 'defineNuxtSchema'.\n\n3 export default defineNuxtSchema({\n ~~~~~~~~~~~~~~~~\n\nnuxt.schema.ts:3:16 - error TS2304: Cannot find name 'defineNuxtSchema'.\n\n3 export default defineNuxtSchema({\n ~~~~~~~~~~~~~~~~\n```",[3084,3087],{"name":3085,"color":3086},"pending triage","E99695",{"name":3088,"color":3089},"possible regression","B90A42",32768,"useAppConfig lose types from nuxt schema with new tsconfig","2025-07-25T22:51:01Z","https://github.com/nuxt/nuxt/issues/32768",0.7759145,{"description":3096,"labels":3097,"number":3102,"owner":3030,"repository":3030,"state":3032,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.12.1\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@6.11.0\r\n- Builder: -\r\n- User Config: typescript\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/devbox/server-components-style-l39gks\r\n\r\n### Describe the bug\r\n\r\nwhen\r\n\r\n```\r\nexperimental: {\r\n componentIslands: {\r\n selectiveClient: \"deep\",\r\n },\r\n },\r\n ```\r\n \r\n having `@unocss/nuxt` present and enabled breaks / removes the styles of a component when that component:\r\n - has `\u003Cstyle scoped>`\r\n - has a `\u003Cslot />`\r\n - during `build` (not `dev`)\r\n \r\n If I should raise within unocss too, please lemme know :) \r\n \r\n Thanks!\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3098,3099],{"name":3085,"color":3086},{"name":3100,"color":3101},"server components","839413",27584,"`selectiveClient: 'deep'` with unocss breaks components with scoped styles and `\u003Cslot />` during 'build'","2024-06-30T11:03:43Z","https://github.com/nuxt/nuxt/issues/27584",0.7785605,{"description":3108,"labels":3109,"number":3113,"owner":3030,"repository":3031,"state":3114,"title":3115,"updated_at":3116,"url":3117,"score":3118},"> You can change the `content` width globally using your `app.config.ts`:\n> \n> ```ts\n> export default defineAppConfig({\n> ui: {\n> select: {\n> slots: {\n> content: 'min-w-fit'\n> }\n> }\n> }\n> })\n> ``` \n\n _Originally posted by @benjamincanac in [#4300](https://github.com/nuxt/ui/issues/4300#issuecomment-2961842289)_\n\n\nplease,\ndocument in its page:\nhttps://ui.nuxt.com/components/select\n\nalso, consider to add access to \"content\" through \"ui\" prop to make it, not only globally, but particularly available.\nNow you can't do: \n```html\n\u003CUSelect :ui=\"{ content: 'min-w-fit' }\" ... />\n```\n\nI had to search hard to find my own answer, and I think it's a very important case for everyone. It will benefit us all.\nThank you in advance!",[3110],{"name":3111,"color":3112},"documentation","0075ca",4409,"closed","USelect > document how to make items/options content width, fit the longest item/option width. Add an image example.","2025-07-08T10:43:50Z","https://github.com/nuxt/ui/issues/4409",0.7468399,{"description":3120,"labels":3121,"number":3124,"owner":3030,"repository":3031,"state":3114,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nTo simplify customization and ensure visual consistency across projects, it would be useful to add a configuration option to define `defaultVariants` globally or for specific component types. These variants could include default size, color, and variant properties for all components or specific ones like buttons, button groups, and form fields. \n\n### Proposal: \n1. Introduce a `defaultVariants` field in the Nuxt configuration to: \n - Define **global variants** (applied to all components). \n - Define **component-specific variants** (e.g., for buttons, forms, etc.). \n\n### Example Implementation: \nIn the Nuxt configuration file: \n```javascript\nexport default defineNuxtConfig({\n ui: {\n defaultVariants: {\n // Global variants\n global: {\n size: 'lg',\n color: 'neutral',\n },\n // Button and ButtonGroup variants\n button: {\n size: 'md',\n color: 'primary',\n variant: 'solid',\n },\n // Form input, select, … variants\n form: {\n size: 'lg',\n color: 'neutral',\n variant: 'outlined',\n },\n },\n },\n});\n``` \n\n### Usage: \nThe defined `defaultVariants` would automatically be applied to all components without the need to explicitly specify these props in templates. Props provided in the template would always take precedence over the ones defined in the configuration. \n\n### Benefits: \n- Reduces repetition in templates. \n- Enhances visual consistency across the project. \n- Flexibility to customize globally or per component type. \n- Easy adoption with prop priority management. \n\n### Expected Impact: \nThis feature would add flexibility while making the integration of `@nuxt/ui` faster and more intuitive by allowing consistent and customized variants to be managed at various levels of the project. \n\nThanks for your continued work on `@nuxt/ui`, which remains an essential tool for building modern and performant interfaces. \n\n### Additional context\n\n_No response_",[3122,3123],{"name":3050,"color":3051},{"name":3024,"color":3025},2934,"Add `defaultVariants` option to define global or component-specific size, variant, and color settings","2025-07-09T12:37:51Z","https://github.com/nuxt/ui/issues/2934",0.75079405,{"description":3130,"labels":3131,"number":3132,"owner":3030,"repository":3041,"state":3114,"title":3133,"updated_at":3134,"url":3135,"score":3136},"In order to reach a near zero-config behavior and to avoid confusion, the default font weight can be set to `400 700` instead of a single `400` in the upcoming v1.12.0 release after unjs/unifont#193 is merged.\n\n@danielroe What do you think?",[],640,"idea: Font weight should default to `400 700` instead of a single `400`","2025-07-04T08:52:13Z","https://github.com/nuxt/fonts/issues/640",0.7577305,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYqh6fg3DwqrlW6m4Nn_YA3zwIGliACrw0k2B3yzGJtE":-1},"/nuxt/ui/4506"]