\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_",[3174,3177,3178],{"name":3175,"color":3176},"enhancement","a2eeef",{"name":3149,"color":3150},{"name":3152,"color":3153},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7658869,{"description":3185,"labels":3186,"number":3190,"owner":3155,"repository":3156,"state":3157,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### 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```",[3187,3188,3189],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.7694097,{"description":3196,"labels":3197,"number":3201,"owner":3155,"repository":3156,"state":3202,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Description\n\nCurrently, `defaultVariants` must be set individually per component. While this works in isolation, it leads to repetitive configuration when dealing with common attributes like `size`, `color`, etc., which are shared across multiple components such as `button`, `input`, `select`, `tabs`, `toggle`, `checkbox`, and more.\n\nTo improve developer experience and maintain consistency, it would be valuable to support a global `defaultVariants` configuration like:\n```\nglobal: {\n defaultVariants: {\n color: \"neutral\",\n size: \"sm\",\n },\n}\n```\n### With this setup:\n\n- Any component that supports the listed attributes in the global configuration (e.g., `color`, `size`) will automatically inherit these global default values.\n- Components that do not support a particular variant will simply ignore it.\n\n### Override Behavior:\nIf a component explicitly defines the same attribute in its own `defaultVariants`, the component-specific value should take precedence over the global one. For example:\n```\nglobal: {\n defaultVariants: {\n size: \"sm\",\n },\n},\ncomponents: {\n button: {\n defaultVariants: {\n size: \"md\", // Overrides the global 'sm'\n },\n },\n}\n\n```\n\n### Additional context\n\n_No response_",[3198,3199,3200],{"name":3175,"color":3176},{"name":3149,"color":3150},{"name":3152,"color":3153},4665,"closed","[Feature Request] Global `defaultVariants` Support for Shared Attributes","2025-08-05T14:01:03Z","https://github.com/nuxt/ui/issues/4665",0.7464169,{"description":3208,"labels":3209,"number":3213,"owner":3155,"repository":3156,"state":3202,"title":3214,"updated_at":3215,"url":3216,"score":3217},"> 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!",[3210],{"name":3211,"color":3212},"documentation","0075ca",4409,"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":3219,"labels":3220,"number":3223,"owner":3155,"repository":3156,"state":3202,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### 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_",[3221,3222],{"name":3175,"color":3176},{"name":3149,"color":3150},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":3229,"labels":3230,"number":3235,"owner":3155,"repository":3156,"state":3202,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### 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_",[3231,3232,3233],{"name":3175,"color":3176},{"name":3152,"color":3153},{"name":3234,"color":3150},"v4",4953,"🎨 Allow replacing all UI classes with new set of classes?","2025-09-13T18:58:36Z","https://github.com/nuxt/ui/issues/4953",0.7520788,{"description":3241,"labels":3242,"number":3243,"owner":3155,"repository":3166,"state":3202,"title":3244,"updated_at":3245,"url":3246,"score":3247},"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,{"description":3249,"labels":3250,"number":3258,"owner":3155,"repository":3156,"state":3202,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Description\n\nHi, \nI'm struggling to customize my components when using Nuxt UI within another Nuxt Module, I've search but cannot get it to work, tried with using app.config.ts like below and also within module.ts but no joy, would appreciate if someone could help out.\n\n\n```\nexport default defineAppConfig({\n ui: {\n button: {\n slots: {\n base: 'rounded-full font-semibold cursor-pointer'\n },\n },\n }\n})\n\n```\nMy module.ts file:\n\n```\nimport { defineNuxtModule, installModule, createResolver } from '@nuxt/kit'\n\nexport default defineNuxtModule\u003CModuleOptions>({\n meta: {\n name: 'my-module',\n configKey: 'myModule',\n },\n hooks: {\n 'nitro:config': (nitroConfig) => {\n const { resolve } = createResolver(import.meta.url)\n\n nitroConfig.publicAssets ||= []\n nitroConfig.publicAssets.push({\n dir: resolve('./runtime/images/'),\n maxAge: 60 * 60 * 24 * 365,\n })\n },\n },\n defaults: {},\n async setup(_options, _nuxt) {\n const { resolve } = createResolver(import.meta.url)\n\n\n await installModule('@nuxt/ui')\n await installModule('nuxt-svgo', {\n autoImportPath: resolve('./runtime/icons'),\n defaultImport: 'component',\n componentPrefix: 'i',\n })\n\n _nuxt.options.css.push(resolve('./runtime/style.css'))\n },\n})\n\n```",[3251,3254,3255],{"name":3252,"color":3253},"question","d876e3",{"name":3149,"color":3150},{"name":3256,"color":3257},"stale","ededed",3679,"How to override components style globally when using within another Nuxt Module?","2025-06-11T10:32:59Z","https://github.com/nuxt/ui/issues/3679",0.76148605,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYqh6fg3DwqrlW6m4Nn_YA3zwIGliACrw0k2B3yzGJtE":-1},"/nuxt/ui/4506"]