\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```",[3167,3168,3169],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.683516,{"description":3176,"labels":3177,"number":3181,"owner":3144,"repository":3144,"state":3146,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@9.1.4\r\n- Builder: -\r\n- User Config: modules, experimental, ssr, css, colorMode, nitro, app, pwa, devtools, eslintConfig, i18n, vite, runtimeConfig\r\n- Runtime Modules: @vueuse/nuxt@10.10.0, @unocss/nuxt@0.58.9, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxtjs/color-mode@3.4.1, @vite-pwa/nuxt@0.4.0, @bg-dev/nuxt-naiveui@1.10.1, @nuxtjs/i18n@8.3.1, unplugin-icons/nuxt, nuxt-module-eslint-config@0.1.1\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nNuxt Config:\r\n```ts\r\nexport default defineNuxtConfig({\r\n // ...\r\n runtimeConfig: {\r\n public: {\r\n test: 'prerendered \"test value\" (default)',\r\n onlyRuntime: 'prerendered \"only runtime value\" (default)'\r\n },\r\n },\r\n nitro: {\r\n esbuild: {\r\n options: {\r\n target: 'esnext',\r\n },\r\n },\r\n prerender: {\r\n crawlLinks: false,\r\n routes: ['/'],\r\n },\r\n },\r\n // ...\r\n})\r\n```\r\n\r\n`pages/index.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>This Page is prerendered\u003C/h1>\r\n {{config.public.test}} \u003Cbr>\r\n \u003CNuxtLink to=\"/test\">SSR page\u003C/NuxtLink>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst config = useRuntimeConfig()\r\n\u003C/script>\r\n```\r\n\r\n`pages/test.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>This Page is not prerendered\u003C/h1>\r\n {{config.public.test}}\u003Cbr>\r\n {{config.public.onlyRuntime}}\u003Cbr>\r\n \u003CNuxtLink to=\"/\">prerendered Page\u003C/NuxtLink>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst config = useRuntimeConfig()\r\n\u003C/script>\r\n```\r\n\r\nenv for `node .output/server/index.mjs`\r\n\r\n```yaml\r\n environment:\r\n - NUXT_PUBLIC_TEST=runtime \"test value\"\r\n - NUXT_PUBLIC_ONLY_RUNTIME=runtime \"only runtime value\"\r\n```\r\n\r\nlink to deployed version: https://app.runtime-config-example.v2.singular-it-test.de/\n\n### Describe the bug\n\nSteps:\r\n1. open https://app.runtime-config-example.v2.singular-it-test.de/\r\n2. see varaibles\r\n3. navigate to SSR page\r\n4. variables are still from builttime\r\n5. refresh page\r\n6. variables are now from runtime\r\n7. navigate back to prerendered\r\n8. variables are still runtime\n\n### Additional context\n\ni think it will be intended that way, but i find the behavior of the runtimeConfig sometimes a bit inconsistent, especially if you prerender parts of the app and others not. (and thus also with regard to the caching of pwa). Depending on the entry point in the app (i.e. whether generated or dynamic), this can lead to different configs, which then persist between the dynamic and static pages. \r\n\r\ni don't expect prerendered parts of the app to pick up the runtime config, but i would assume that when i switch from a static to a non-static page, the runtime variables also play a role. Otherwise, as soon as prerender is active, everything should be set at build time (so that there can no longer be a runtime config) and everything is/needs to be set in the build step to avoid differences depending on the entry point.\r\n\r\nI know that it is not necessarily common to have a different config for generation than for runtime, but especially in my case it is not necessary to set all variables in the build (prerender). and generally the runtime config is also there to set the variables when running the app.\n\n### Logs\n\n_No response_",[3178],{"name":3179,"color":3180},"pending triage","E99695",28847,"strange runtimeConfig behaviour when prerendering parts of the app","2024-09-06T11:27:57Z","https://github.com/nuxt/nuxt/issues/28847",0.69012487,{"description":3187,"labels":3188,"number":3192,"owner":3144,"repository":3145,"state":3193,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.11.0`\n- Nuxt Version: `3.17.0`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.4.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modern-dust-h3lryc\n\n### Description\n\nHey, after upgrading to latest `@nuxt/ui`, custom Nuxt UI variable overrides stopped working. Looks like the correct colors are not generating.\n\nThis has worked in the previous versions:\n\n```\n:root {\n --ui-bg-elevated: var(--ui-color-neutral-500);\n}\n\nmain {\n --ui-bg-elevated: var(--color-white);\n}\n\n// Should have color --ui-color-neutral-500 with 0.5 opacity - CORRECT\n\u003Cdiv class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/div>\n\n// Should have color --color-white with 0.5 opacity - NOT WORKING - has colors from :root\n\u003Cmain class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/main>\n```\n\nCurrently, the variables in main have no effect on the sites.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3189,3190,3191],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4018,"closed","Overriding root variables stopped working in 3.1.0","2025-04-29T12:40:17Z","https://github.com/nuxt/ui/issues/4018",0.6414579,{"description":3199,"labels":3200,"number":3203,"owner":3144,"repository":3145,"state":3193,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Environment\n\n- Operating System: Linux\n- Node Version: v24.4.0\n- Nuxt Version: -\n- CLI Version: 3.26.4\n- Nitro Version: -\n- Package Manager: bun@1.2.4\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/w6mpnq\n\n### Description\n\nThe props `defaultValue` doesn't seem to work on UInput (found this props on the documentation). The field stays empty.\n`modelValue` works \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3201,3202],{"name":3138,"color":3139},{"name":3156,"color":3157},4569,"defaultValue has no effect","2025-07-22T08:38:57Z","https://github.com/nuxt/ui/issues/4569",0.6623087,{"description":3209,"labels":3210,"number":3214,"owner":3144,"repository":3145,"state":3193,"title":3215,"updated_at":3216,"url":3217,"score":3218},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/eslint@1.3.0, @nuxtjs/device@3.2.4, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, nuxt-lodash@2.5.3\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g\n\n// app.config.ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'emerald',\n neutral: 'zinc',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n green: 'green',\n blue: 'blue',\n purple: 'purple',\n gray: 'gray',\n },\n }\n}\n\n// nuxt.config.ts\n\nui: {\n theme: {\n colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],\n },\n },\n\n### Description\n\nYesterday everything was working fine, no code was changed, after the upgrade it broke.\nFor example:\n```html\n\u003Cdiv class=\"bg-(--ui-orange)\">\n```\nOr\n```html\n\u003Cdiv class=\"bg-orange\">\n```\nBoth not work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3211,3212,3213],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.67280036,{"description":3220,"labels":3221,"number":3225,"owner":3144,"repository":3145,"state":3193,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@11.1.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, @vueuse/nuxt@13.0.0, @nuxtjs/i18n@9.3.1, nuxt-security@2.2.0, @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wonderful-violet-jrsqy9\n\n### Description\n\nI get a type error when using an array of strings for the `variant` key inside of `compoundVariants´:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n select: {\n compoundVariants: [\n {\n color: \"primary\",\n variant: [\"outline\", \"subtle\"],\n class: \"data-[state='open']:ring\",\n },\n ],\n },\n },\n});\n```\n\n```\napp/app.config.ts:11:11 - error TS2322: Type 'string[]' is not assignable to type 'string'.\n\n11 variant: [\"outline\", \"subtle\"],\n ~~~~~~~\n```\n\nIt does work tho, so its only a type issue I think.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3222,3223,3224],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},3579,"Type error in app config `compoundVariants`","2025-05-02T15:06:25Z","https://github.com/nuxt/ui/issues/3579",0.6775439,{"description":3231,"labels":3232,"number":3237,"owner":3144,"repository":3145,"state":3193,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### 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_",[3233,3236],{"name":3234,"color":3235},"enhancement","a2eeef",{"name":3156,"color":3157},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.6787281,{"description":3243,"labels":3244,"number":3248,"owner":3144,"repository":3145,"state":3193,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: hooks, app, runtimeConfig, supabase, routeRules, sitemap, site, compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, @nuxtjs/supabase@1.5.1, @nuxtjs/seo@3.0.3, @storyblok/nuxt@6.2.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.2\n\n### Reproduction\n\nchange the border color(I assume should be this variable: --ui-border) in your project to red or blue and check if this color is applied when using only the classes: `border` or `border-b` without specifying the color.\n\n### Description\n\nI want to set the default border color, by default is very dark.\n\nI found that `--ui-border` variable is not used in the border style, maybe I could be wrong.\n\n\u003Cimg width=\"374\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f25806c-f5ea-43a1-a2a3-095d71448d43\" />\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3245,3246,3247],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.6805919,["Reactive",3254],{},["Set"],["ShallowReactive",3257],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fTIxOe8TKBSxTfM4endt-2f2gVXa8JGC6r9tsztsQfS8":-1},"/nuxt/ui/4722"]